//
// Base class
//
.nav {
  // Mask hanging left- and right-hand .nav-link padding.
  //
  // Because we're using negative margins here, $nav-link-padding-x should
  // never be a value that exceeds the current grid gutter width (to avoid
  // horizontal scrollbars).  For that reason, $nav-link-padding-x will always
  // be pixel-based, instead of in em's or rem's (to match gutter units).
  margin-left: -$nav-link-padding-x;
  margin-right: -$nav-link-padding-x;
}

.nav-item,
.nav-link {
  // Fix text overflow when using certain flex utility classes in IE 11
  max-width: 100%;
}

.nav-link {
  @include unset-link-underline();
  padding: $nav-link-padding-y $nav-link-padding-x;

  @include hover-focus-active {
    // Force underline on hover for basic nav links
    text-decoration: $link-hover-decoration;
  }

  &.active {
    // Force bolding on active state for basic nav links
    font-weight: $font-weight-bold;
  }
}


//
// Stylized nav (tabs, pills) overrides
//
.nav-tabs,
.nav-pills {
  margin-left: 0;
  margin-right: 0;

  .nav-item {
    display: flex;
  }

  .nav-link {
    align-items: center;
    display: flex;

    @include hover-focus {
      text-decoration: none; // unset underline
    }

    &.active {
      text-decoration: none; // unset underline
    }
  }
}

// Tabs
.nav-tabs {
  .nav-item {
    align-content: end;
    margin-bottom: 0; // Add compatibility with non-ul tab markup
  }

  .nav-link {
    margin-bottom: -$nav-tabs-border-width; // Add compatibility with non-ul tab markup
  }

  .nav-link.active,
  .nav-item.show .nav-link {
    &:focus:not(:focus-visible) {
      outline: 0;
    }
  }

  // Allow customization of hover state
  .nav-link:not(.disabled):not(.active) {
    @include hover-focus {
      background-color: $nav-tabs-link-hover-bg;
    }
  }
}

// Pills
.nav-pills {
  .nav-item {
    align-content: center;
  }

  // Allow customization of hover state
  .nav-link:not(.disabled):not(.active) {
    @include hover-focus {
      background-color: $nav-pills-link-hover-bg;
    }
  }
}


//
// Justified variants
//

.nav-fill,
.nav-justified {
  .nav-link {
    justify-content: center;
    text-align: center;
  }

  .nav-item .nav-link {
    width: 100%;
  }
}

.nav-fill {
  > .nav-link {
    flex: 1 1 auto; // Add compatibility with non-ul tab markup
  }
}

.nav-justified {
  > .nav-link {
    flex: 1 1 100%; // Add compatibility with non-ul tab markup
  }
}