$x-nav-tabs-link-color:          theme-color('info')    !default;
$x-nav-tabs-link-hover-color:    theme-color('secondary') !default;
$x-nav-tabs-link-hover-bg:       transparent            !default;

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

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

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

    .nav-link {
      @extend %font-size-sm,
              .py-2,
              .px-3,
              .w-100,
              .border-left-0,
              .border-right-0,
              .border-top-0,
              .rounded-0,
              .d-flex,
              .align-items-center,
              .font-weight-medium,
              .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;
      }

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

    .nav-link-subheading {
      @extend %font-size-xs,
              .d-block,
              .text-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,
              .font-weight-bold;
    }
  }

}

.x-nav-tabs-vertical {
  @extend .x-nav-tabs,
          .border-bottom-0,
          .flex-column,
          .flex-nowrap;

  .nav-item {
    @extend .mb-0;

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

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

      &.active {
        @extend .bg-white;
      }
    }
  }
}