//@mixin navbar-color($bg-color: transparent, $color: $navbar-light-color, $brand-color: $navbar-light-brand-color, $link-active-color: $navbar-light-active-color, $link-disabled-color: $navbar-light-disabled-color, $link-active-bg: $navbar-light-active-bg) {
//  --#{$prefix}navbar-active-bg: #{$link-active-bg};
//  --#{$prefix}navbar-bg: #{$bg-color};
//  color: $color;
//
//  .navbar-brand {
//    color: $brand-color;
//
//    &:hover,
//    &:focus {
//      color: $brand-color;
//      opacity: .8;
//    }
//  }
//
//  .navbar-nav {
//    .nav-link {
//      color: $color;
//
//      &:hover,
//      &:focus {
//        color: $link-active-color;
//      }
//
//      &.disabled {
//        color: $link-disabled-color;
//      }
//    }
//
//    .show > .nav-link,
//    .active > .nav-link,
//    .nav-link.show,
//    .nav-link.active {
//      color: $link-active-color;
//    }
//  }
//
//  .navbar-toggler {
//    color: $brand-color;
//    border-color: transparent;
//  }
//
//  .navbar-text {
//    color: $color;
//
//    a,
//    a:hover,
//    a:focus {
//      color: $color;
//    }
//  }
//}

@mixin navbar-dark {
  --#{$prefix}navbar-bg: #{$dark};
  --#{$prefix}scrollbar-color: var(--#{$prefix}white-rgb);
  --#{$prefix}navbar-color: var(--#{$prefix}gray-400);

  @each $color, $value in $theme-colors {
    --#{$prefix}#{$color}-lt-rgb: #{to-rgb(theme-color-lighter($value, $dark))};
  }
}

@mixin navbar-vertical-nav {
  .navbar-collapse {
    flex-direction: column;

    [class^="container"] {
      flex-direction: column;
      align-items: stretch;
      padding: 0;
    }

    .navbar-nav {
      margin-left: 0;
      margin-right: 0;

      .nav-link {
        padding: .5rem calc(#{$container-padding-x} / 2);
        justify-content: flex-start;
      }
    }

    .dropdown-menu-columns {
      flex-direction: column;
    }

    .dropdown-menu {
      padding: 0;
      background: transparent;
      position: static;
      color: inherit;
      box-shadow: none;
      border: none;
      min-width: 0;
      margin: 0;

      .dropdown-item {
        min-width: 0;
        display: flex;
        width: auto;
        padding-left: add(calc(#{$container-padding-x} / 2), 1.75rem);
        color: inherit;

        &.active,
        &:active {
          background: var(--#{$prefix}navbar-active-bg);
        }
      }

      .dropdown-menu .dropdown-item {
        padding-left: add(calc(#{$container-padding-x} / 2), 3.25rem);
      }

      .dropdown-menu .dropdown-menu .dropdown-item {
        padding-left: add(calc(#{$container-padding-x} / 2), 4.75rem);
      }
    }

    .dropdown-toggle:after {
      margin-left: auto;
    }

    .nav-item.active:after {
      border-bottom-width: 0;
      border-left-width: 3px;
      right: auto;
      top: 0;
      bottom: 0;
    }
  }
}

/**
Navbar
 */
.navbar {
  --#{$prefix}navbar-border-width: #{$navbar-border-width};
  --#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
  --#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
  --#{$prefix}navbar-bg: transparent;
  --#{$prefix}navbar-color: inherit;
  align-items: stretch;
  min-height: $navbar-height;
  box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
  background: var(--#{$prefix}navbar-bg);
  color: var(--#{$prefix}navbar-color);

  .navbar-collapse & {
    flex-grow: 1;
  }

  &.collapsing {
    min-height: 0;
  }

  //@include navbar-color();

  @include dark-mode {
    @include navbar-dark();
  }

  .dropdown-menu {
    position: absolute;
    z-index: $zindex-fixed;
  }

  .navbar-nav {
    min-height: subtract($navbar-height, 2 * $navbar-padding-y);

    .nav-link {
      position: relative;
      min-width: 2rem;
      min-height: 2rem;
      justify-content: center;
      border-radius: var(--#{$prefix}border-radius);

      .badge {
        position: absolute;
        top: .375rem;
        right: .375rem;
        transform: translate(50%, -50%);
      }
    }
  }
}

.navbar-nav {
  margin: 0;
  padding: 0;
}

.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-down(breakpoint-next($breakpoint)) {
        @include navbar-vertical-nav;
      }

      @include media-breakpoint-up($next) {
        .navbar-collapse {
          width: auto;
          flex: 1 1 auto;
        }

        &.navbar-light,
        .navbar-light {
          .nav-item.active {
            position: relative;

            &:after {
              content: "";
              position: absolute;
              left: 0;
              right: 0;
              bottom: -.25rem;
              border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
              border-bottom-width: 2px;
            }
          }
        }

        &.navbar-vertical {
          box-shadow: inset calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);

          &.navbar-right {
            box-shadow: inset calc(1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
          }
        }

        &.navbar-vertical {
          ~ .navbar,
          ~ .page-wrapper {
            margin-left: $sidebar-width;
          }
        }

        &.navbar-vertical.navbar-right {
          ~ .navbar,
          ~ .page-wrapper {
            margin-left: 0;
            margin-right: $sidebar-width;
          }
        }
      }
    }
  }
}

/**
Navbar brand
 */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  font-weight: $navbar-brand-font-weight;
  margin: 0;
  line-height: 1;
  gap: $spacer-2;
}

.navbar-brand-image {
  height: $navbar-brand-image-height;
  width: auto;
}

/**
Navbar toggler
 */
.navbar-toggler {
  border: 0;
  width: $navbar-brand-image-height;
  height: $navbar-brand-image-height;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-toggler-icon {
  height: 2px;
  width: 1.25em;
  background: currentColor;
  border-radius: 10px;
  @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
  position: relative;

  &:before,
  &:after {
    content: "";
    display: block;
    height: inherit;
    width: inherit;
    border-radius: inherit;
    background: inherit;
    position: absolute;
    left: 0;
    @include transition(inherit);
  }

  &:before {
    top: -.45em;
  }

  &:after {
    bottom: -.45em;
  }

  .navbar-toggler[aria-expanded="true"] & {
    transform: rotate(45deg);
    @include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);

    &:before {
      top: 0;
      transform: rotate(-90deg);
    }

    &:after {
      bottom: 0;
      opacity: 0;
    }
  }
}

/**
Navbar light
 */
.navbar-light {
  --#{$prefix}navbar-border-color: #{$navbar-border-color};
  --#{$prefix}navbar-bg: var(--#{$prefix}bg-surface);
}

/**
Navbar dark
 */
.navbar-dark {
  @include navbar-dark;
}

/**
Navbar transparent
 */
.navbar-transparent {
  --#{$prefix}navbar-border-color: transparent !important;
  background: transparent !important;
}

/**
Navbar nav
 */
.navbar-nav {
  align-items: stretch;

  .nav-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/**
Navbar side
 */
.navbar-side {
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

/**
Navbar vertical
 */
@if $enable-navbar-vertical {
  .navbar-vertical {
    &.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) {
            width: $sidebar-width;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: $zindex-fixed;
            align-items: flex-start;
            @include transition(transform $transition-time);
            overflow-y: scroll;
            padding: 0;

            &.navbar-right {
              left: auto;
              right: 0;
            }

            .navbar-brand {
              padding: (($navbar-height - $navbar-brand-image-height) * .5) 0;
              justify-content: center;
            }

            .navbar-collapse {
              align-items: stretch;
            }

            .navbar-nav {
              flex-direction: column;
              flex-grow: 1;
              min-height: auto;

              .nav-link {
                padding-top: .5rem;
                padding-bottom: .5rem;
              }
            }

            > [class^="container"] {
              flex-direction: column;
              align-items: stretch;
              min-height: 100%;
              justify-content: flex-start;
              padding: 0;
            }

            ~ .page {
              padding-left: $sidebar-width;

              [class^="container"] {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
              }
            }

            &.navbar-right ~ .page {
              padding-left: 0;
              padding-right: $sidebar-width;
            }

            @include navbar-vertical-nav;
          }
        }
      }
    }
  }
}


.navbar-overlap {
  &:after {
    content: "";
    height: $navbar-overlap-height;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: inherit;
    z-index: -1;
    box-shadow: inherit;
  }
}