.ga-tabs {
  @apply flex gap-2;

  &.ga-tabs--keyline {
    @apply border-(--ga-color-border-tertiary);
  }

  .ga-tabs__tab {
    @apply text-md animate-hover relative flex h-8 cursor-pointer items-center gap-2 border-transparent leading-4 font-medium text-(--ga-color-text-action) transition-colors;

    &.ga-tabs__tab--selected {
      @apply border-(--ga-color-border-action) font-semibold;
    }

    &.ga-tabs__tab--disabled {
      @apply cursor-not-allowed text-(--ga-color-text-disabled);

      &.ga-tabs__tab--selected {
        @apply border-(--ga-color-border-disabled);
      }

      .ga-tabs__tab-icon {
        @apply text-(--ga-color-icon-disabled);
      }
    }

    &:not(.ga-tabs__tab--disabled):hover {
      @apply border-(--ga-color-border-action-hover) text-(--ga-color-text-action-hover);
    }

    &:not(.ga-tabs__tab--disabled):hover .ga-tabs__tab-icon {
      @apply text-(--ga-color-icon-primary);
    }

    &:focus-visible {
      @apply outline-none;
    }

    &:focus-visible::after,
    &.ga-tabs__tab--focused::after {
      @apply absolute -inset-1 rounded border-2 border-(--ga-color-border-focus) content-[''];
    }

    .ga-tabs__tab-icon {
      @apply text-(--ga-color-icon-action);
    }
  }

  &.ga-tabs--horizontal {
    @apply flex-row;

    &.ga-tabs--keyline {
      @apply border-b-1;
    }

    .ga-tabs__tab {
      @apply border-b-4 px-4 pt-2 pb-1;

      &:focus-visible::after,
      &.ga-tabs__tab--focused::after {
        @apply -bottom-2;
      }
    }
  }

  &.ga-tabs--vertical {
    @apply flex-col;

    &.ga-tabs--keyline {
      @apply border-l-1;
    }

    .ga-tabs__tab {
      @apply border-l-4 py-2 pr-4 pl-3;

      &:focus-visible::after,
      &.ga-tabs__tab--focused::after {
        @apply -left-2;
      }
    }
  }
}