/**
 * Bootstrap navbar
 */

@use "../settings" as *;
@use "../tools" as *;

@import "bootstrap/scss/navbar";

.navbar-collapse .navbar-nav {
  background-color: rgba(255, 255, 255, .03);
}

/* Modify the navbar-expand series to wrap nav-items */
.navbar-expand {
  $pcs: (
    xs: percentage(1 / 2),
    sm: percentage(1 / 3),
    md: percentage(1 / 4),
    lg: percentage(1 / 5),
    xl: percentage(1 / 6),
  );
  $lower: ();

  @each $breakpoint, $pc in $pcs {
    $lower: append($lower, $breakpoint);
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-down($breakpoint) {
        .navbar-nav {
          flex-direction: row;
          flex-wrap: wrap;
          margin-bottom: space(1);
          border-top: $navbar-nav-item-border;

          .nav-item {
            border-bottom: $navbar-nav-item-border;
          }
        }
      }

      .nav-item {
        $key: nth(map_keys($grid-breakpoints), 1);
        @while $key and $key != $breakpoint {
          @include media-breakpoint-only($key) {
            width: map-get($pcs, $key);
          }

          $key: breakpoint-next($key, $grid-breakpoints);
        }
      }
    }
  }
}

.navbar-nav .nav-link {
  padding: space(2) space(3);
}

.navbar-nav {
  border-left: $navbar-nav-item-border;
}
.navbar-nav .nav-item {
  border-right: $navbar-nav-item-border;
}

.navbar-light {
  .navbar-toggler:hover {
    background-color: $navbar-dark-toggler-hover-bg;
    .navbar-toggler-icon {
      background-image: escape-svg($navbar-dark-toggler-icon-bg);
    }
  }
}
.navbar-dark {
  .navbar-toggler:hover {
    background-color: $navbar-light-toggler-hover-bg;
    .navbar-toggler-icon {
      background-image: escape-svg($navbar-light-toggler-icon-bg);
    }
  }

  .nav-link:hover,
  .nav-link:focus,
  .nav-link.active {
    color: $navbar-dark-active-color;
    background: $navbar-dark-active-bg;
  }
}

.navbar-toggler {
  float: right;
  margin-top: space(1);
  margin-bottom: space(1);
}
.navbar-collapse {
  clear: right;
}
