import { buttonInteractionVariants } from "@/shared/ui/button-interaction";
import { cn } from "@/shared/ui/cn";

export const headerControlButtonClassName =
  cn(
    buttonInteractionVariants({ tone: "neutral" }),
    "inline-flex h-8 items-center gap-2 whitespace-nowrap rounded-full border border-transparent bg-transparent text-sm font-semibold after:absolute after:-inset-1 after:content-['']"
  );

export const compactHeaderControlButtonClassName =
  "h-10 w-10 justify-center px-0";

export const headerControlIconClassName =
  "header-control-icon grid h-5 w-5 shrink-0 place-items-center rounded-full bg-[var(--surface-control)]/80 text-[var(--ink-muted)] transition-colors group-hover:bg-[var(--action-soft)] group-hover:text-[var(--action-blue-hover)] group-data-[state=open]:bg-[var(--action-soft)] group-data-[state=open]:text-[var(--action-blue-hover)]";

export const compactHeaderTextClassName = "hidden min-[1800px]:inline";