/* Tabs */
@layer components {
  .tabs {
    @apply flex;

    &:has(> [role='tablist'][aria-orientation='horizontal']),
    &:not(:has(> [role='tablist'][aria-orientation='vertical'])) {
      @apply flex-col;
    }

    &:has(> [role='tablist'][aria-orientation='vertical']) {
      @apply flex-row;
    }

    > [role='tablist'] {
      @apply text-muted-foreground inline-flex w-fit items-center justify-center;

      &[aria-orientation='vertical'] {
        @apply h-fit flex-col;
      }

      > [role='tab'] {
        @apply relative inline-flex flex-1 items-center justify-center whitespace-nowrap transition-all outline-none disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
      }
    }

    > [role='tabpanel'] {
      @apply flex-1 outline-none;
    }
  }
}