.tablist {
  @apply text-muted-foreground/70 inline-flex items-center justify-start
    rounded-md before:bg-border relative h-auto w-full gap-1 bg-transparent
    py-0 px-2 before:absolute before:inset-x-0 before:bottom-0 before:h-px;
}

.tablist-item {
  @apply hover:text-muted-foreground focus-visible:border-ring
    focus-visible:ring-ring/50 inline-flex items-center justify-center
    rounded-lg px-3 text-sm font-medium whitespace-nowrap transition-all
    outline-none focus-visible:ring-[3px] disabled:pointer-events-none
    disabled:opacity-50 [&_svg]:shrink-0 bg-foreground/5 overflow-hidden
    rounded-b-none border-x border-t border-foreground/10 py-2;
}

.tablist-item.active {
  @apply bg-background text-foreground shadow-none z-10;
}