// Navbar and light theme styling
.navbar-vertical.navbar-expand-lg {
  // Tabler forces `overflow-y: scroll` on the vertical navbar, which renders a
  // permanent scrollbar in Chromium browsers even when scrolling isn't needed.
  // Use `auto` so the scrollbar only appears when the menu overflows.
  @include media-breakpoint-up(lg) {
    overflow-y: auto;
  }

  // Render the <button> menu headings identically to the surrounding nav links
  .navbar-collapse .nav-item.dropdown > button.nav-link {
    width: 100%;
    background-color: transparent;
    border: 0;
    text-align: left;
  }

  // Adjust hover color & style for menu items
  .navbar-collapse {
    .nav-link-icon,
    .nav-link-title {
      color: $rich-black;
    }
    .text-secondary {
      color: $dark-teal !important;
    }

    .dropdown-menu {
      // Adjust hover color & style for menu items
      .dropdown-item {
        > a {
          color: $rich-black;
        }
        .dropdown-item-buttons {
          visibility: hidden;
        }

        // Style menu item hover/active state
        &:hover,
        &.active,
        &:focus-within {
          background-color: var(--tblr-navbar-active-bg);
          > a {
            text-decoration: none;
          }
          .dropdown-item-buttons {
            visibility: visible;
          }
        }
      }
    }
  }

  // Ensures theme toggle appears above background image
  .navbar-nav {
    z-index: 1;
  }

  // Logo text for non-community editions
  .navbar-brand {
    // Reduce logo padding on mobile view
    @include media-breakpoint-down(lg) {
      padding: 0.2rem 0;
    }

    a:hover {
      text-decoration: none;
    }
  }

  // Navigation geometric graphic for non-community editions
  img.motif {
    bottom: 0;
    display: none;
    left: 0;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0.5;
    position: fixed;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    width: 18rem;

    @include media-breakpoint-up(lg) {
      display: block;
    }
  }
}

// Light theme styling
html[data-bs-theme='light'] .navbar-vertical.navbar-expand-lg {
  // Background Gradient
  background: linear-gradient(180deg, rgba(0, 133, 125, 0) 0%, rgba(0, 133, 125, 0.1) 100%), #fff;
}

// Dark theme styling
html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg {
  // Background Gradient
  background:
    linear-gradient(180deg, rgba(0, 242, 212, 0) 0%, rgba(0, 242, 212, 0.1) 100%), #001423;

  // Border color for active dropdown list
  .nav-item.dropdown.active:after {
    border-color: $bright-teal !important;
  }

  .nav-link-title,
  .nav-link-icon {
    color: white !important;
  }

  // Adjust hover color & style for menu items
  .dropdown-item {
    > a {
      color: white !important;
    }
    &.active,
    &:hover {
      background-color: $navbar-dark-active-bg !important;
    }
  }
  .text-secondary {
    color: $bright-teal !important;
  }

  img.motif {
    opacity: 0.25;
  }
}