import { cva } from "class-variance-authority"

export const badgeVariants = cva(
  "gap-1 rounded-md border border-transparent px-2 py-1 text-xs font-semibold transition-all inset-ring has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
        link: "text-primary underline-offset-4 hover:underline",
        red: "bg-red-50 text-red-700 inset-ring-red-600/10 [a]:hover:bg-red-50/80 dark:bg-red-400/10 dark:text-red-400 dark:inset-ring-red-400/20 dark:[a]:hover:bg-red-400/20",
        green: "bg-green-50 text-green-700 inset-ring-green-600/10 [a]:hover:bg-green-50/80 dark:bg-green-400/10 dark:text-green-400 dark:inset-ring-green-500/20 dark:[a]:hover:bg-green-400/20",
        yellow: "bg-yellow-50 text-yellow-800 inset-ring-yellow-600/10 [a]:hover:bg-yellow-50/80 dark:bg-yellow-400/10 dark:text-yellow-500 dark:inset-ring-yellow-500/20 dark:[a]:hover:bg-yellow-400/20",
        blue: "bg-blue-50 text-blue-700 inset-ring-blue-700/10 [a]:hover:bg-blue-50/80 dark:bg-blue-400/10 dark:text-blue-400 dark:inset-ring-blue-400/20 dark:[a]:hover:bg-blue-400/20",
        indigo: "bg-indigo-50 text-indigo-700 inset-ring-indigo-700/10 [a]:hover:bg-indigo-50/80 dark:bg-indigo-400/10 dark:text-indigo-400 dark:inset-ring-indigo-400/20 dark:[a]:hover:bg-indigo-400/20",
        purple: "bg-purple-50 text-purple-700 inset-ring-purple-700/10 [a]:hover:bg-purple-50/80 dark:bg-purple-400/10 dark:text-purple-400 dark:inset-ring-purple-400/20 dark:[a]:hover:bg-purple-400/20",
        pink: "bg-pink-50 text-pink-700 inset-ring-pink-700/10 [a]:hover:bg-pink-50/80 dark:bg-pink-400/10 dark:text-pink-400 dark:inset-ring-pink-400/20 dark:[a]:hover:bg-pink-400/20",
        gray: "bg-gray-50 text-gray-600 [a]:bg-gray-50/80 inset-ring-gray-500/10 dark:bg-gray-400/10 dark:text-gray-400 dark:inset-ring-gray-400/20 dark:[a]:hover:bg-gray-400/20",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)