@layer components {
  .tabs {
    $tabs: &;
    @apply flex flex-col;

    &-vertical {
      @apply flex-row gap-0;
    }

    &-list {
      @apply flex items-center border-b border-r border-b-slate-200/80 border-r-transparent dark:border-b-slate-700/80;

      #{$tabs}-vertical & {
        @apply flex-col border-b-transparent border-r-slate-200/80 dark:border-r-slate-700/80;

        & > li {
          @apply w-full;
        }
      }

      #{$tabs}-pill & {
        @apply border-b-transparent dark:border-b-transparent;
      }
    }

    &-content {
      @apply w-full;
    }

    &-panel {
      @apply hidden h-full w-full px-4 py-2 text-sm tracking-wide text-slate-500 dark:text-slate-400;

      &.active {
        @apply block;
      }
    }

    #{$tabs}-pill &-panel {
      @apply px-0;
    }

    &-btn {
      @apply relative inline-flex w-full items-center gap-2 bg-transparent px-6 py-4 text-sm font-medium tracking-wide transition-colors duration-150 ease-in-out focus:outline-none;

      &:not(.active, .disabled) {
        @apply text-slate-500 hover:text-primary-500 focus:text-primary-500 dark:text-slate-400 dark:hover:text-primary-500 dark:focus:text-primary-500;
      }

      #{$tabs}-pill & {
        @apply rounded-primary py-2;
      }

      #{$tabs}-vertical & {
        @apply py-3;
      }

      #{$tabs}:not(#{$tabs}-pill) &::after {
        @apply absolute left-1/2 top-full inline-block h-[2px] w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-transparent content-[''];
      }

      #{$tabs}#{$tabs}-vertical &::after {
        @apply left-full top-1/2 h-[100%] w-[2px] -translate-x-1/2 -translate-y-1/2;
      }

      &.active {
        @apply text-primary-500;

        &::after {
          background-color: theme('colors.primary.500') !important;
        }

        #{$tabs}-pill & {
          @apply bg-primary-500 text-slate-100;
        }
      }

      &.disabled {
        @apply cursor-not-allowed bg-transparent opacity-40;
      }
    }
  }
}
