$baseLineIndex: 1;
$baseBarIndex: 2;
.vc-tabs {
  --tabs-line-base-index: #{$baseLineIndex};
  --tabs-line-bar-index: #{$baseBarIndex};
  &__nav-wrap {
    @apply overflow-hidden relative -bottom-px max-w-full w-full;
    &:after {
      @apply absolute left-0 bottom-0 right-0 w-full bg-inactive-elements h-0.5;
      content: "";
      z-index: var(--tabs-line-base-index);
    }
  }
  &__nav-scroll {
    overflow: hidden;
  }
  &__nav {
    @apply whitespace-nowrap relative flex items-center;
    transition: transform .3s ease;
  }
  &__item {
    @apply
    h-10
    pb-1
    pl-3
    pr-3
    pt-0
    box-border
    flex
    items-center
    text-sm
    font-medium
    relative
    cursor-pointer
    text-secondary-actions mr-3 outline-none;
    transition: all .3s ease;
    &:first-child {
      @apply pl-1;
    }
    &:hover {
      @apply text-secondary-actions--focus;
      .tabs-nav-icon {
        @apply text-secondary-actions--focus;
      }
    }
    &.is--active {
      @apply text-black;
      .tabs-nav-icon {
        @apply text-active-elements;
      }
    }
    &:focus-visible {
      @apply bg-active-elements-bg--focus;
    }
    &.is--disabled {
      @apply text-inactive-elements cursor-not-allowed;
      .tabs-nav-icon {
        @apply text-inactive-elements;
      }
    }
  }
  &__nav {
    &.is--stretch {
      .vc-tabs__item {
        @apply mx-0 text-center justify-center;
        flex: 1 0 auto;
      }
    }
  }
  &__active-bar {
    @apply absolute bottom-0 left-0 h-0.5 bg-active-elements;
    z-index: var(--tabs-line-bar-index);
    transition: width 0.3s cubic-bezier(.645, .045, .355, 1),transform 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
  }
  &.is--card {
    .vc-tabs__nav-scroll {
      @apply px-1 pt-1;
    }
    .vc-tabs__nav-wrap {
      &:after {
        display: none;
      }
    }
    .vc-tabs__item {
      @apply truncate shadow-card rounded-t-md bg-default-bg px-3 py-4 h-full font-medium mr-4 text-default-text;
      transition: all .3s ease;
      .tabs-nav-icon {
        @apply px-1 text-primary-actions;
        font-size: 1.375rem;
      }
      &.is--active {
        @apply bg-white;
      }
      &.is--disabled {
        @apply bg-inactive-elements-bg--focus text-inactive-elements;
        .tabs-nav-icon {
          @apply text-inactive-elements;
        }
      }
      .vc-tabs__item-text {
      }
      &:not(.is--active):not(.is--disabled):hover {
        @apply text-primary-actions--focus;
        .tabs-nav-icon {
          @apply text-primary-actions--focus;
        }
      }
    }
  }
}
[dir='rtl'] {
  .vc-tabs {
    &__item {
      @apply mr-0 ml-3;
      &:first-child {
        @apply pl-3 pr-1;
      }
    }
  }
}
