import { cva } from "../lib/cva";
import { getMotionRecipeClassNames } from "../lib/motion";

export const tabsListVariants = cva([
  "inline-flex h-12 items-center gap-1 rounded-[var(--ui-control-radius)] border border-[var(--ui-control-border)] bg-[var(--ui-control-bg)] p-1 shadow-[var(--ui-control-shadow)] [border-width:var(--ui-input-border-width)]"
]);

export const tabsTriggerVariants = cva([
  "inline-flex min-w-[7rem] items-center justify-center rounded-[var(--ui-control-radius)] px-4 py-2.5 text-sm font-medium outline-none",
  "text-[var(--color-muted-foreground)] transition-[color,background-color,box-shadow,transform] duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
  "focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
  "data-[disabled]:pointer-events-none data-[disabled]:opacity-45",
  "hover:-translate-y-px hover:bg-[color-mix(in_oklch,var(--ui-control-bg)_76%,white_24%)] hover:text-[var(--color-foreground)]",
  "data-[state=active]:-translate-y-px data-[state=active]:bg-[var(--ui-panel-bg)] data-[state=active]:text-[var(--color-foreground)] data-[state=active]:shadow-[var(--ui-control-shadow)]",
  getMotionRecipeClassNames("ring")
]);

export const tabsContentVariants = cva([
  "mt-4 rounded-[var(--ui-card-radius)] border border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)] p-6 text-[var(--color-card-foreground)] shadow-[var(--ui-card-default-shadow)] outline-none [border-width:var(--ui-card-border-width)]",
  "data-[state=active]:motion-enter-fade data-[state=active]:motion-enter-rise"
]);