import { cn } from "./utils"

/**
 * Shared fill + border for standalone inputs, selects, and input groups.
 * Light mode: transparent fill (original DS). Dark mode: `--input-background` elevation.
 */
export function fieldControlChromeClass(className?: string) {
  return cn(
    "border border-input bg-transparent transition-colors dark:bg-input-background",
    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
    "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20",
    "dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
    className,
  )
}

/** Inner control inside InputGroup — border/fill live on the group shell. */
export function fieldControlInnerClass(className?: string) {
  return cn(
    "border-0 bg-transparent shadow-none ring-0 focus-visible:border-transparent focus-visible:ring-0",
    "disabled:bg-transparent dark:bg-transparent dark:disabled:bg-transparent",
    className,
  )
}