@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) {
  background: $bg-color;
  color: $color;

  @include scrollbar;

  .text-muted {
    color: rgba($color, $text-muted-opacity) !important;
  }

  .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 {
  @include navbar-color($dark, $navbar-dark-color, $navbar-dark-brand-color, $navbar-dark-active-color, $navbar-dark-disabled-color);
  @include scrollbar(true);

  .input-icon-addon {
    color: rgba($dark-mode-text, .64);
  }

  .form-control {
    border-color: transparent;
    background-color: rgba(0, 0, 0, .1);

    &::placeholder {
      color: rgba($dark-mode-text, .64);
    }
  }
}

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

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

    .navbar-nav {
      margin-left: calc( -1 * var(--#{$variable-prefix}gutter-x, #{$container-padding-x}));
      margin-right: calc( -1 * var(--#{$variable-prefix}gutter-x, #{$container-padding-x}));

      .nav-link {
        padding: .5rem $container-padding-x;
        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($container-padding-x, 1.75rem);
      }

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

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

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

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

/**
Navbar
 */
.navbar {
  align-items: stretch;
  min-height: $navbar-height;

  .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: $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-dark,
        .navbar-dark {
          .nav-item.active {
            .nav-link {
              background-color: rgba($black, .1);
            }
          }
        }

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

            &:after {
              content: '';
              position: absolute;
              left: 0;
              right: 0;
              bottom: -.25rem;
              border: 0 solid $primary;
              border-bottom-width: 2px;
            }
          }

          &.navbar-vertical {
            box-shadow: inset -1px 0 0 0 $navbar-light-border-color;

            &.navbar-right {
              box-shadow: inset 1px 0 0 0 $navbar-light-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;
}

.navbar-brand-image {
  display: block;
  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;
  transition: $navbar-toggler-animation-time $navbar-toggler-animation-time top, $navbar-toggler-animation-time $navbar-toggler-animation-time bottom, $navbar-toggler-animation-time transform, 0s $navbar-toggler-animation-time opacity;
  position: relative;

  &:before,
  &:after {
    content: '';
    display: block;
    height: inherit;
    width: inherit;
    border-radius: inherit;
    background: inherit;
    position: absolute;
    left: 0;
    transition: inherit;
  }

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

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

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

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

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

/**
Navbar light
 */
.navbar-light {
  box-shadow: inset 0 -1px 0 0 $navbar-light-border-color;
  background-color: $white;
}

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

/**
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;
            transition: .3s transform;
            overflow-x: auto;

            &.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;
            }

            ~ .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;
  }
}