// stylelint-disable selector-no-qualifying-type
// stylelint-disable selector-class-pattern

.nav {
  // --#{$prefix}nav-item-spacer: #{$masthead-nav-item-spacer};
  // --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
}

.nav-item {
  position: relative;
  height: 100%;
  // margin-right: var(--#{$prefix}nav-item-spacer);

  &:last-child {
    margin-right: 0;
  }
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;

  &.active {
    color: var(--#{$prefix}nav-link-hover-color);
    text-decoration: if($link-hover-decoration == underline, none, null);
  }

  &::after {
    .nav-tabs &,
    .nav-pills & {
      display: none;
    }
  }

  .nav-item:hover > & {
    color: var(--#{$prefix}nav-link-hover-color);
    text-decoration: if($link-hover-decoration == underline, none, null);
  }

  + .nav-link {
    margin-left: calc(var(--#{$prefix}nav-item-spacer) * .25);
  }
}

.nav-underline {

  @include media-breakpoint-up(lg) {
    --#{$prefix}nav-underline-gap: #{$nav-underline-gap-xl};
  }

  .nav-link {
    padding-right: 0;
    padding-left: 0;
    border-bottom: none;

    &::after {
      position: absolute;
      bottom: 0;
      // z-index: $zindex-sticky;
      height: var(--lx-ornament-border-width);
      content: "";
      background-color: var(--lx-ornament-border-color, --lx-ornament-bg-color);
      transition: $transition-base;
    }
    &:hover,
    &:focus {
      color: var(--#{$prefix}nav-underline-link-active-color);
    }
  }

  .nav-link::after,
  &:hover > .nav-item > .nav-link::after,
  &:hover > .nav-item > .nav-link:not(:hover)::after {
    right: calc(-1 * var(--#{$prefix}nav-underline-gap));
    left: auto;
    width: 0;
  }

  > .nav-item > .nav-link:hover::after,
  > .nav-item > .nav-link:focus::after,
  &:not(:hover) > .nav-item > .nav-link.active::after,
  &:hover > .nav-item > .nav-link:hover::after,
  &:hover > .nav-item > .nav-link.active:hover::after {
    right: auto;
    left: 0;
    width: 100%;
    margin-right: auto;
    transition-delay: .15s;
  }
}

.nav-tabs {
  --#{$prefix}nav-link-hover-color: #{$nav-tabs-link-hover-color};

  position: relative;
  z-index: 1;
  border-bottom: none;

}

.tab-content {
  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};

  margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
  background-color: var(--#{$prefix}nav-tabs-link-active-bg);
}

.tab-pane {
  border-color: var(--#{$prefix}nav-tabs-border-color);
  border-style: solid;
  border-width: var(--#{$prefix}nav-tabs-border-width);
}

.nav-pills {
  .nav-link {
    border: 1px transparent solid;
  }
  .nav-link.active,
  .show > .nav-link {
    border-color: var(--#{$prefix}primary);
  }
}