.td-navbar {
  --bs-navbar-color: #{$navbar-dark-color};
  --bs-navbar-hover-color: #{$navbar-dark-hover-color};
  --bs-navbar-active-color: #{$navbar-dark-active-color};
  --bs-navbar-brand-color: #{$navbar-dark-color};
  --bs-navbar-brand-hover-color: #{$navbar-dark-hover-color};

  background: transparent !important;
  position: fixed !important;
  transition: 0.3s;
  width: 100%;

  // Based on from Bootstrap's _navbar.scss
  .active > .nav-link,
  .nav-link.active {
    box-shadow: 0 2px $navbar-dark-active-color;
  }

  .navbar-brand__name {
    display: none;
  }

  .navbar-brand {
    @include media-breakpoint-down(sm) {
      margin-inline-start: auto;
    }

    svg {
      height: 38px;
    }
  }

  @media only screen and (max-width: 1500px) {
    .td-navbar-nav-scroll {
      font-size: .875rem;
    }
  }

  #hamburger {
    color: $navbar-dark-color;

    &:hover:focus {
      color: $navbar-dark-hover-color;
    }
    margin-right: 0.4rem;
    margin-left: 0.4rem;

    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: xx-large;

    // Bootstrap buttons have a noticeable depression effect when clicked which is not desirable for the hamburger button
    &:focus,
    &:active {
      box-shadow: none !important;
    }

    transition: all 0.75s;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;

    @include media-breakpoint-down(lg) {
      opacity: 1;
      visibility: visible;
    }
  }

/* Centers logo without offset horizontally and vertically in the navbar on small / mobile viewports */
@include media-breakpoint-down(sm) {
  .navbar-brand__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20%;
    z-index: 5;
  }
}
}

.navbar-bg-onscroll {
  background: var(--bs-body-bg) !important;
  box-shadow: 0 1px 2px var(--bs-border-color);

  .navbar-nav .nav-link, #hamburger {
    color: var(--bs-body-color);

    &:hover, &:focus {
      color: $primary;
    }
  }

  .navbar-nav {
    // Based on from Bootstrap's _navbar.scss
    .show > .nav-link,
    .nav-link.show {
      color: $primary;
    }

    .active > .nav-link,
    .nav-link.active {
      color: $primary;
      box-shadow: 0 2px $primary;
    }
  }

  .navbar-brand__logo.navbar-logo svg #its-pronounced path {
    fill: $primary;
  }
}

/* theme_lock front-matter: render a static placeholder where the theme toggle would be. */
.td-locked-theme {
  color: var(--bs-secondary-color);
  cursor: not-allowed;
  opacity: 0.75;
  text-decoration: none;

  &:hover,
  &:focus {
    color: var(--bs-secondary-color);
  }

  .bi {
    width: 1rem;
    height: 1rem;
  }
}

.td-light-dark-menu .td-locked-theme {
  position: relative;
}

.td-light-dark-menu .td-locked-theme__label {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  white-space: nowrap;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
}

.td-light-dark-menu .td-locked-theme:hover .td-locked-theme__label,
.td-light-dark-menu .td-locked-theme:focus-visible .td-locked-theme__label {
  opacity: 1;
}

/* Small/Mobile viewport nav menu */

.pi-pushmenu {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s;

  &.on {
    opacity: 1;

    .sled {
      width: 400px;
      max-width: 100vw;
    }
  }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .sled {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    background-color: var(--bs-body-bg);
    overflow: auto;
    transition: 0.3s;

    .content ul {
      padding: 0;
      margin-top: 25px;

      li {
        position: relative;
        display: block;
        width: 100%;
        min-height: 2.75rem;
        padding: 0 60px 0 20px;
        border-bottom: 1px solid var(--bs-border-color);

        // Hides the logo that will be in the list
        &:first-child {
          display: none;
        }

        a {
          display: inline-block;
          width: 100%;
          height: 2.75rem;
          line-height: 2.75rem;
          font-size: 1.25rem;
          color: $primary;

          .nav-link {
            padding: 0;
          }
        }
      }
    }

    button {
      position: absolute;
      top: 0;
      right: 0;
      font-size: xx-large;

      &:focus,
      &:active {
        box-shadow: none !important;
      }
    }

    // Theme-switcher icons lose Docsy's .td-light-dark-menu wrapper during auto-burger cloning.
    .bi {
      width: 1em;
      height: 1em;
      vertical-align: -.125em;
      fill: currentcolor;
    }

    // Hide the cloned dropdown toggle itself; Light/Dark/Auto rows below already cover the choice.
    .content ul li:has(> a > svg.theme-icon-active) {
      display: none;
    }
  }
}