$x-nav-tabs-link-color:          theme-color('info')    !default;
$x-nav-tabs-link-hover-color:    var(--custom-theme-primary, theme-color("primary")) !default;
$x-nav-tabs-link-hover-bg:       var(--custom-theme-primary-transparent, theme-color("primary-transparent")) !default;


%x-nav-tabs,
.x-nav-tabs {
  @extend .nav,
          .nav-tabs,
          %border-bottom,
          %mb-3;

  @include x-section-heading-min-height;

  .nav-item {
    @extend %d-flex;

    // .x-aside-theme-dark & {
    //   @extend %x-theme-dark-aside-mobile;
    // }

    .nav-link {
      @extend %font-size-sm,
              %font-weight-medium,
              %py-2,
              %px-3,
              %w-100,
              %border-left-0,
              %border-right-0,
              %border-top-0,
              .rounded-0,
              %d-flex,
              %align-items-center,
              %position-relative;

      .x-icon {
        @extend %x-icon-lg;
      }

      &.detailed {
        @extend %d-flex,
                %flex-column,
                %justify-content-start,
                %align-items-start;
        padding-left: 2.2rem !important;
      }

      &:not(.no-bottom-bar)::after {
        content: '';
        background: currentColor;
        position: absolute;
        height: 2px;
        width: 100%;
        left: 0;
        bottom: -1px;
        transition: all 250ms ease-out;
        transform: scaleX(0);
      }

      &:not(.active) {
        // Cannot @extend color here because `!important` by Bootstrap
        color: $x-nav-tabs-link-color;
      }

      @include hover {
        &:not(.active) {
          color: $x-nav-tabs-link-hover-color;
          background-color: $x-nav-tabs-link-hover-bg;
        }
        &::after {
          transform: scaleX(1);
        }
      }

      &.arrow:not(.no-bottom-bar)::before  {
        @extend %position-absolute;
        content: '';
        bottom: -6px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid $x-nav-tabs-link-hover-color;
        z-index: 2;
      }

      &.active {
        background-color: transparent;
        color: $x-nav-tabs-link-hover-color;
        &::after {
          transform: scaleX(1);
        }
      }
    }

    .nav-link-subheading {
      @extend %d-block,
              %font-size-xs;
      color: theme-color("info");
    }



    .nav-link-icon {
      @extend %position-absolute;
      margin-left: -1.2rem;
      margin-top: 0.1rem;

      .x-icon {
        @extend %x-icon-sm;
        font-size: inherit !important;
      }
    }

    .x-nav-item-dropdown {
      @extend %d-inline-flex;
      .nav-link {
        &.active {
          // Show hover color instead of active color on nav dropdown button
          color: $x-nav-tabs-link-hover-color;
          background-color: $x-nav-tabs-link-hover-bg;
        }
        .x-icon {
          @extend %ml-1,
                  %x-icon-sm;
        }
      }

    }
  }

  &.nav-justified {
    .nav-link {
      @extend %justify-content-center;
    }
  }
  &:not(.x-nav-tabs-vertical) {
    @extend %text-antialiased;

    .nav-link {
      @extend %text-uppercase;
    }
  }

}

.x-nav-tabs-vertical {
  @extend %x-nav-tabs,
          %border-bottom-0,
          %flex-wrap,
          %flex-column;
  .nav-item {
    @extend %mb-0;

    .nav-link {
      @extend %py-3,
              %text-capitalize;

      &:not(.no-border) {
        @extend %border-bottom;
      }

      &.active {
        background-color: theme-color("light");
      }
    }
  }
}