@use "sass:map";
// stylelint-disable no-descending-specificity
.nav {
  &.bcl__nav {
    border: none;
    .nav-link {
      padding: map.get($spacers, 3);
      color: $black;
      border: none;
      border-radius: 0;
      &:hover {
        background: rgba($primary, 0.3);
      }
      &:focus-visible {
        border-radius: 4px;
        outline-offset: -2px;
      }
      &.disabled {
        color: $gray-600;
      }
      &.active {
        position: relative;
        background: transparent;
        border-top: none;
        border-right: none;
        border-bottom: map.get($border-widths, 2) solid $primary;
        border-left: none;
        &:focus-visible {
          outline-color: $primary;
        }
      }
    }
  }
  &.bg-gray {
    background: $gray-200;
  }
  .nav-link {
    &:focus-visible {
      outline: 2px solid $primary;
      outline-offset: -2px;
      border-radius: 4px;
    }
  }
  &.nav-pills {
    .nav-link.active {
      outline-color: $white;
      outline-offset: -3px;
    }
  }
  &.nav-tabs {
    .nav-link.active {
      &:focus-visible {
        border-radius: 4px;
        outline: 2px solid $primary;
        outline-offset: -2px;
      }
    }
  }
}

@include media-breakpoint-down(md) {
  .nav-tabs {
    @include horizontal-slider;
    border: none;

    .nav-item {
      z-index: 1;
    }
    .nav-link {
      margin-bottom: 0;
      border-bottom: map.get($border-widths, 1) solid $gray-300;
      &.active {
        border-bottom: none;
      }
    }
    .dropdown-menu {
      /* stylelint-disable-next-line declaration-no-important */
      position: fixed !important;
    }
  }
}