/**
 * Bootstrap navbar
 */

@use "sass:math";

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

@import "bootstrap/scss/navbar";

.navbar {
  --#{$prefix}hamburger-color: #{$dark};

  &:not(.fluid &) {
    @include edgel-constrain-width();
  }
}

.navbar-nav {
  --#{$prefix}nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$navbar-nav-link-padding-y};
  border-left: $navbar-nav-item-border;
  .nav-item {
    border-right: $navbar-nav-item-border;
  }
}

.nav-link {
  @include edgel-link-hover-decoration();
  @include edgel-focus-outline();
  position: relative;
  white-space: nowrap;
  background-color: rgba(255, 255, 255, .03);
}

/* Modify the navbar-expand series to wrap nav-items */
.navbar-expand {
  $pcs: (
    xs: percentage(math.div(1, 2)),
    sm: percentage(math.div(1, 3)),
    md: percentage(math.div(1, 4)),
    lg: percentage(math.div(1, 5)),
    xl: percentage(math.div(1, 6)),
    xxl: percentage(math.div(1, 7)),
  );
  $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-link {
          white-space: normal;
        }
      }

      .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-toggler {
  --#{$prefix}navbar-toggler-border-color: currentcolor;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: edgel-px-rem(50);
  min-height: edgel-px-rem(33);
  margin: space(1) 0 space(1) auto;

  &:hover {
    background-color: $navbar-light-toggler-hover-bg;
    --#{$prefix}hamburger-color: #{$light};
  }

  @include edgel-focus-outline();

  &:focus {
    box-shadow: none;
  }

  &:focus-visible {
    box-shadow: 0 0 0 $btn-focus-width rgba(from currentcolor r g b / #{$focus-ring-opacity});
  }
}

.navbar-toggler-icon.navbar-toggler-icon {
  @extend .hamburger;
}
[aria-expanded="true"] > .navbar-toggler-icon {
  @extend .hamburger-expanded;
}

.navbar-dark {
  --#{$prefix}hamburger-color: #{$white};
  --#{$prefix}link-hover-color-rgb: #{to-rgb($navbar-dark-active-color)};

  .navbar-toggler:hover {
    background-color: $navbar-dark-toggler-hover-bg;
    --#{$prefix}hamburger-color: #{$dark};
  }

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