//
// Navbar
// --------------------------------------------------


// Brand

.navbar-brand {
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-font-weight: #{$navbar-brand-font-weight};

  display: flex;
  align-items: center;
  padding: calc(var(--#{$prefix}navbar-brand-padding-y) * .5) 0;
  font-weight: var(--#{$prefix}navbar-brand-font-weight);
}


// Navbar nav / collapse

.navbar-collapse {
  margin-top: $spacer;
  border: $border-width solid transparent;
  border-radius: var(--#{$prefix}border-radius-lg);
}

.navbar-nav {
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}mega-dropdown-column-width: #{$mega-dropdown-column-width};

  padding: $spacer * .75 $spacer * 1.25;
  .nav-link {
    padding: {
      top: calc(var(--#{$prefix}nav-link-padding-y) * .75);
      bottom: calc(var(--#{$prefix}nav-link-padding-y) * .75);
    }
  }
}


// Menu toggler

.navbar-toggler {
  position: relative;
  width: $navbar-toggler-bar-width + $navbar-toggler-padding-x * 2;
  height: $navbar-toggler-bar-height * 3 + $navbar-toggler-bar-spacing * 2 + $navbar-toggler-padding-y * 2;
}

.navbar-toggler-icon {
  top: 50%;
  display: block;
  margin-top: $navbar-toggler-bar-height * -.5;
  transition-timing-function: cubic-bezier(.55, .055, .675, .19);
  transition-duration: .075s;

  &,
  &::before,
  &::after {
    position: absolute;
    width: $navbar-toggler-bar-width;
    height: $navbar-toggler-bar-height;
    background-color: var(--#{$prefix}navbar-toggler-color);
    transition-property: transform;
  }
  &::before,
  &::after {
    display: block;
    width: $navbar-toggler-bar-width * .7;
    content: "";
  }
  &::before {
    top: ($navbar-toggler-bar-spacing + $navbar-toggler-bar-height) * -1;
    transition: top .075s .12s ease, opacity .075s ease, width .15s ease-in-out;
  }
  &::after {
    right: 0;
    bottom: ($navbar-toggler-bar-spacing + $navbar-toggler-bar-height) * -1;
    transition: bottom .075s .12s ease, transform .075s cubic-bezier(.55, .055, .675, .19), width .15s ease-in-out;
  }
}

.navbar-toggler:hover .navbar-toggler-icon {
  &,
  &::before,
  &::after {
    width: $navbar-toggler-bar-width;
  }
}

[aria-expanded="true"] {
  .navbar-toggler-icon {
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    transform: rotate(45deg);
    &::before,
    &::after {
      width: $navbar-toggler-bar-width;
    }
    &::before {
      top: 0;
      opacity: 0;
      transition: top .075s ease, opacity .075s .12s ease;
    }
    &::after {
      bottom: 0;
      transition: bottom .075s ease, transform .075s .12s cubic-bezier(.215, .61, .355, 1);
      transform: rotate(-90deg);
    }
  }
}


// Navbar dropdowns

.navbar .dropdown-toggle::after {
  width: 1.25em;
  height: 1.25em;
  margin-right: 0;
}

.navbar .navbar-nav .dropdown-menu {
  padding: {
    top: calc(var(--#{$prefix}dropdown-padding-y) * .25);
    bottom: calc(var(--#{$prefix}dropdown-padding-y) * .5);
  }
  background: none;
  background-color: transparent;
  border: 0;
  border-left: var(--#{$prefix}dropdown-border-width, 1px) solid var(--#{$prefix}navbar-collapse-border-color);
  @include border-radius(0);
  box-shadow: none !important; // stylelint-disable-line declaration-no-important
  &.dropdown-menu-dark {
    --#{$prefix}border-color: #{$dropdown-dark-border-color};
  }
  .dropdown-menu {
    margin: {
      right: .75rem;
      left: .75rem;
    }
  }
  .dropdown-toggle::after {
    margin: {
      right: 0;
      left: .125rem;
    }
  }
  .dropdown-divider { display: none; }
  &[data-bs-popper] {
    margin-top: 0;
  }
}

// Dropdown animation
@keyframes dropdown-show {
  from {
    opacity: 0;
    transform: scale(.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


// Styles for expanded navbar only

.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix} {
      @include media-breakpoint-up($next) {
        .navbar-brand { padding: var(--#{$prefix}navbar-brand-padding-y) 0; }
        .navbar-collapse {
          margin-top: 0;
          background-color: transparent !important; // stylelint-disable-line declaration-no-important
          border: 0 !important; // stylelint-disable-line declaration-no-important
        }
        .navbar-nav {
          padding: 0;
          .nav-link {
            padding: {
              top: var(--#{$prefix}nav-link-padding-y);
              bottom: var(--#{$prefix}nav-link-padding-y);
            }
          }
        }
        .offcanvas {
          background-color: transparent !important; // stylelint-disable-line declaration-no-important
          @include box-shadow(none);
        }
        .offcanvas-header { display: none; }
        .dropdown-divider { display: block; }
        .navbar-nav .dropdown-menu {
          padding: {
            top: var(--#{$prefix}dropdown-padding-y);
            bottom: var(--#{$prefix}dropdown-padding-y);
          }
          margin-top: var(--#{$prefix}dropdown-spacer) !important; // stylelint-disable-line declaration-no-important
          background-color: var(--#{$prefix}dropdown-bg);
          border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
          @include border-radius(var(--#{$prefix}dropdown-border-radius));
          box-shadow: var(--#{$prefix}dropdown-box-shadow) !important; // stylelint-disable-line declaration-no-important
        }
        .dropdown-menu.show { display: none; }
        .dropdown {
          &::before {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: $dropdown-spacer + .125rem;
            content: "";
          }
          &:hover > .dropdown-menu {
            display: block;
            animation: dropdown-show .25s cubic-bezier(.68, -.55, .265, 1.55);
          }
          .dropdown {
            .dropdown-toggle {
              display: flex;
              align-items: center;
              &::after {
                width: $caret-width;
                height: $caret-width;
                margin: {
                  right: -.325rem;
                  left: auto;
                }
                content: "";
                -webkit-mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M12.7,9.7c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7c0.4,0.4,0.4,1.1,0,1.5l-6.7,6.7c-0.4,0.4-1.1,0.4-1.5,0s-0.4-1.1,0-1.5l6-6l-6-6C12.3,10.6,12.3,10.1,12.7,9.7L12.7,9.7z'/></svg>")) no-repeat 50% 50%; // stylelint-disable-line property-no-vendor-prefix
                mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M12.7,9.7c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7c0.4,0.4,0.4,1.1,0,1.5l-6.7,6.7c-0.4,0.4-1.1,0.4-1.5,0s-0.4-1.1,0-1.5l6-6l-6-6C12.3,10.6,12.3,10.1,12.7,9.7L12.7,9.7z'/></svg>")) no-repeat 50% 50%;
              }
            }
            .dropdown-menu {
              top: calc((var(--#{$prefix}dropdown-item-padding-y) + var(--#{$prefix}dropdown-padding-y)) * -1);
              left: 100%;
              margin: {
                right: 0;
                left: -.375rem;
              }
            }
          }
          .dropdown-menu-end {
            right: 0;
            left: auto;
          }
        }
        .mega-dropdown-column {
          width: var(--#{$prefix}mega-dropdown-column-width);
          padding: 0 .5rem;

          li:hover > .mega-dropdown-column.opacity-0 {
            opacity: 100% !important; // stylelint-disable-line declaration-no-important
          }
        }
      }
    }
  }
}


// Navbar light (default)

.navbar {
  --#{$prefix}navbar-stuck-bg: var(--#{$prefix}light);
  --#{$prefix}navbar-toggler-color: #{$navbar-light-toggler-bar-color};
  --#{$prefix}navbar-collapse-bg: var(--#{$prefix}light);
  --#{$prefix}navbar-collapse-border-color: var(--#{$prefix}border-color);

  transition: $navbar-transition;

  &.navbar-stuck {
    background-color: var(--#{$prefix}navbar-stuck-bg);
  }
  .navbar-collapse {
    background-color: var(--#{$prefix}navbar-collapse-bg);
    border-color: var(--#{$prefix}navbar-collapse-border-color);
  }
  .nav-item {
    &:hover > .nav-link:not(.disabled),
    .nav-link.show:not(.disabled) {
      color: var(--#{$prefix}navbar-hover-color);
    }
    &.active > .nav-link:not(.disabled) {
      color: var(--#{$prefix}navbar-active-color);
    }
  }
  .dropdown:hover > .nav-link {
    color: var(--#{$prefix}navbar-hover-color);
  }
}


// Navbar dark

.navbar-dark {
  --#{$prefix}navbar-stuck-bg: var(--#{$prefix}dark);
  --#{$prefix}navbar-toggler-color: #{$navbar-dark-toggler-bar-color};
  --#{$prefix}navbar-collapse-bg: var(--#{$prefix}dark);
  --#{$prefix}navbar-collapse-border-color: #{$border-color-dark};
}


// Dark color mode

@if $enable-dark-mode {
  @include color-mode(dark) {
    .navbar:not([data-bs-theme="light"]),
    .navbar-stuck[data-bs-theme="light"] {
      --#{$prefix}navbar-stuck-bg: var(--#{$prefix}dark);
      --#{$prefix}navbar-collapse-bg: var(--#{$prefix}dark);
    }
    .navbar-stuck[data-bs-theme="light"] {
      @extend .navbar-dark;

      .form-switch.mode-switch .form-check-input:checked ~ .form-check-label:first-of-type {
        color: $body-color-dark;
      }
    }
  }
}
