// Base class
.nav {
  // scss-docs-start nav-css-vars
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
  // scss-docs-end nav-css-vars
}

.nav-link {
  color: var(--#{$prefix}nav-link-color);

  &:hover,
  &:focus {
    color: var(--#{$prefix}nav-link-hover-color);
  }

  // Disabled state lightens text
  &.disabled,
  &:disabled {
    color: var(--#{$prefix}nav-link-disabled-color);
  }
}

//
// Tabs
//

.nav-tabs {
  // scss-docs-start nav-tabs-css-vars
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
  // scss-docs-end nav-tabs-css-vars

  .nav-link {
    &:hover,
    &:focus {
      border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
    }
  }

  .nav-link.active,
  .nav-item.show .nav-link {
    color: var(--#{$prefix}nav-tabs-link-active-color);
    background-color: var(--#{$prefix}nav-tabs-link-active-bg);
    border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
  }
}

//
// Pills
//

.nav-pills {
  // scss-docs-start nav-pills-css-vars
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
  // scss-docs-end nav-pills-css-vars

  .nav-link.active,
  .show > .nav-link {
    color: var(--#{$prefix}nav-pills-link-active-color);
    background-color: var(--#{$prefix}nav-pills-link-active-bg);
  }
}

//
// Underline
//

.nav-underline {
  // scss-docs-start nav-underline-css-vars
  --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
  // scss-docs-end nav-underline-css-vars

  .nav-link.active,
  .show > .nav-link {
    color: var(--#{$prefix}nav-underline-link-active-color);
  }
}