const buttonGroup = [
  "horizontal",
  "vertical"
] as const

const color = [
  "default",
  "danger",
  "success",
  "warning",
  "primary",
  "secondary",
  "collab",
  "ai",
  "link"
] as const

const depth = [
  "light",
  "normal",
  "dark"
] as const

const size = [
  "xs",
  "sm",
  "md",
  "lg"
] as const

export default {
  "slots": {
    "base": [
      "select-none cursor-pointer inline-flex items-center",
      "relative",
      "outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2",
      "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:opacity-50",
      "transition duration-150 ease-linear"
    ],
    "baseLine": "inline-flex items-center",
    "label": "truncate",
    "leadingIcon": "shrink-0",
    "leadingAvatar": "shrink-0",
    "leadingAvatarSize": "",
    "trailingIcon": "shrink-0",
    "safeList": "h-full w-full absolute inset-0 flex flex-row flex-nowrap items-center justify-center w-[28px] h-[28px] size-lg animate-spin stroke-2 invisible"
  },
  "variants": {
    "buttonGroup": {
      "horizontal": "focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 group-[.is-button-group]/items:not-only:first:rounded-e-none group-[.is-button-group]/items:not-only:last:rounded-s-none group-[.is-button-group]/items:not-last:not-first:rounded-none group-[.is-button-group]/items:not-only:first:border-e-0 group-[.is-button-group]/items:not-only:not-first:border-s-0",
      "vertical": "focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none"
    },
    "noSplit": {
      "false": "group-[.is-button-group]/items:not-only:not-first:after:content-[''] group-[.is-button-group]/items:not-only:not-first:after:absolute group-[.is-button-group]/items:not-only:not-first:after:top-[7px] group-[.is-button-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-button-group]/items:not-only:not-first:after:left-0 group-[.is-button-group]/items:not-only:not-first:after:w-px group-[.is-button-group]/items:not-only:not-first:after:bg-current/30"
    },
    "color": {
      "default": "text-white dark:text-base-100 bg-base-650 border border-base-650 hover:bg-base-850 hover:border-base-850 hover:focus-visible:ring-0 active:bg-slate-850 active:border-slate-850 active:focus-visible:ring-0 disabled:bg-base-650 aria-disabled:bg-base-650 disabled:border-base-650 aria-disabled:border-base-650 focus-visible:outline-base-650 ring-base-850 focus:outline-none focus-visible:ring-base-850",
      "danger": "text-white dark:text-red-100 bg-red-720 border border-red-720 hover:bg-red-790 hover:border-red-790 hover:focus-visible:ring-0 active:bg-red-730 active:border-red-730 active:focus-visible:ring-0 disabled:bg-red-720 aria-disabled:bg-red-720 disabled:border-red-720 aria-disabled:border-red-720 focus-visible:outline-red-720 ring-red-800 focus:outline-none focus-visible:ring-red-800",
      "success": "text-base-900 bg-green-450 border border-green-450 hover:bg-green-370 hover:border-green-370 hover:focus-visible:ring-0 active:bg-green-430 active:border-green-430 active:focus-visible:ring-0 disabled:bg-green-450 aria-disabled:bg-green-450 disabled:border-green-450 aria-disabled:border-green-450 focus-visible:outline-green-450 ring-green-500 focus:outline-none focus-visible:ring-green-500",
      "warning": "text-white dark:text-orange-100 bg-orange-500 border border-orange-500 hover:bg-orange-500/75 hover:border-orange-500/75 hover:focus-visible:ring-0 active:bg-orange-500/85 active:border-orange-500/85 active:focus-visible:ring-0 disabled:bg-orange-500 aria-disabled:bg-orange-500 disabled:border-bg-orange-500 aria-disabled:border-bg-orange-500 focus-visible:outline-orange-500 ring-orange-800 focus:outline-none focus-visible:ring-orange-800",
      "primary": "text-white dark:text-blue-100 bg-blue-530 border border-blue-530 hover:bg-blue-450 hover:border-blue-450 hover:focus-visible:ring-0 active:bg-blue-550 active:border-blue-550 active:focus-visible:ring-0 disabled:bg-blue-530 aria-disabled:bg-blue-530 disabled:border-blue-530 aria-disabled:border-blue-530 focus-visible:outline-blue-530 ring-blue-800 focus:outline-none focus-visible:ring-blue-800",
      "secondary": "text-base-900 bg-cyan-160 border border-cyan-230 hover:bg-cyan-150 hover:border-cyan-230 hover:focus-visible:ring-0 active:bg-cyan-230 active:border-cyan-230 active:focus-visible:ring-0 disabled:bg-cyan-160 aria-disabled:bg-cyan-160 disabled:border-cyan-230 aria-disabled:border-cyan-230 focus-visible:outline-cyan-160 ring-cyan-500 focus:outline-none focus-visible:ring-cyan-500",
      "collab": "text-white dark:text-collab-100 bg-collab-600 border border-collab-600 hover:bg-collab-500 hover:border-collab-500 hover:focus-visible:ring-0 active:bg-collab-700 active:border-collab-700 active:focus-visible:ring-0 disabled:bg-collab-600 aria-disabled:bg-collab-600 disabled:border-collab-600 aria-disabled:border-collab-600 focus-visible:outline-collab-600 ring-collab-900 focus:outline-none focus-visible:ring-collab-900",
      "ai": "text-white dark:text-ai-100 bg-ai-450 border border-ai-450 hover:bg-ai-370 hover:border-ai-370 hover:focus-visible:ring-0 active:bg-ai-550 active:border-ai-550 active:focus-visible:ring-0 disabled:bg-ai-450 aria-disabled:bg-ai-450 disabled:border-ai-450 aria-disabled:border-ai-450 focus-visible:outline-ai-450 ring-ai-900 focus:outline-none focus-visible:ring-ai-900",
      "link": "no-underline decoration-solid decoration-auto text-base-900 decoration-gray-900 bg-transparent border border-transparent dark:text-base-300 hover:text-base-750 dark:hover:text-base-400 hover:focus-visible:ring-0 active:text-base-900 dark:active:text-base-700 active:focus-visible:ring-0 disabled:text-base-900 aria-disabled:text-base-900 dark:disabled:text-base-300 dark:aria-disabled:disabled:text-base-300 focus-visible:outline-base-400 ring-base-850 focus:outline-none focus-visible:ring-base-850"
    },
    "depth": {
      "light": "",
      "normal": "",
      "dark": ""
    },
    "size": {
      "xs": {
        "base": "h-xl2 ps-4 pe-4 text-3xs leading-none",
        "baseLine": "gap-1",
        "leadingIcon": "size-5",
        "leadingAvatarSize": "2xs",
        "trailingIcon": "size-md2"
      },
      "sm": {
        "base": "h-3xl ps-[18px] pe-[18px] text-xs leading-none",
        "baseLine": "gap-1.5",
        "leadingIcon": "size-6",
        "leadingAvatarSize": "xs",
        "trailingIcon": "size-lg"
      },
      "md": {
        "base": "h-5xl ps-5 pe-5 text-xs leading-none",
        "baseLine": "gap-1.5",
        "leadingIcon": "size-xl2",
        "leadingAvatarSize": "sm",
        "trailingIcon": "size-lg"
      },
      "lg": {
        "base": "h-6xl ps-[28px] pe-[28px] text-xs leading-none",
        "baseLine": "gap-2",
        "leadingIcon": "size-xl2",
        "leadingAvatarSize": "md",
        "trailingIcon": "size-lg"
      }
    },
    "block": {
      "true": {
        "base": "w-full",
        "baseLine": "w-full justify-center",
        "trailingIcon": "ms-auto"
      }
    },
    "rounded": {
      "true": "rounded-full",
      "false": "rounded-2xs"
    },
    "leading": {
      "true": ""
    },
    "useLabel": {
      "true": "",
      "false": "ps-1.5 pe-1.5 justify-center"
    },
    "useDropdown": {
      "true": "ps-2 pe-2"
    },
    "useWait": {
      "true": ""
    },
    "useClock": {
      "true": ""
    },
    "loading": {
      "true": ""
    },
    "normalCase": {
      "true": "font-semibold normal-case",
      "false": "font-bold uppercase"
    },
    "active": {
      "true": {
        "base": ""
      },
      "false": {
        "base": ""
      }
    }
  },
  "compoundVariants": [
    {
      "color": "default" as typeof color[number],
      "depth": "light" as typeof depth[number],
      "class": "text-base-800 dark:text-base-800 bg-base-200 border border-base-300 hover:bg-base-320 hover:border-base-320 hover:focus-visible:ring-0 active:bg-base-250 active:border-base-250 active:focus-visible:ring-0 disabled:bg-base-200 aria-disabled:bg-base-200 disabled:border-base-300 aria-disabled:border-base-300 focus-visible:outline-base-200 ring-base-320 focus-visible:ring-base-320"
    },
    {
      "color": "default" as typeof color[number],
      "depth": "dark" as typeof depth[number],
      "class": "text-white dark:text-base-100 bg-base-900 border border-base-900 hover:bg-base-900/75 hover:border-base-900/75 hover:focus-visible:ring-0 active:bg-base-900/85 active:border-base-900/85 active:focus-visible:ring-0 disabled:bg-base-900 aria-disabled:bg-base-900 disabled:border-base-900 aria-disabled:border-base-900 focus-visible:outline-base-900 ring-base-700 focus-visible:ring-base-700"
    },
    {
      "color": "danger" as typeof color[number],
      "depth": "light" as typeof depth[number],
      "class": "text-red-750 dark:text-red-760 bg-red-270 border border-red-270 hover:bg-red-250 hover:border-red-250 dark:hover:bg-red-200 dark:hover:border-red-200 hover:focus-visible:ring-0 active:bg-red-350 active:border-red-350 dark:active:bg-red-350 dark:active:border-red-350 active:focus-visible:ring-0 disabled:bg-red-270 aria-disabled:bg-red-270 disabled:border-red-270 aria-disabled:border-red-270 dark:disabled:bg-red-270 dark:aria-disabled:bg-red-270 dark:disabled:border-red-270 dark:aria-disabled:border-red-270 focus-visible:outline-red-270"
    },
    {
      "color": "danger" as typeof color[number],
      "depth": "dark" as typeof depth[number],
      "class": "text-white dark:text-red-100 bg-red-850 border border-red-850 hover:bg-red-760 hover:border-red-760 hover:focus-visible:ring-0 active:bg-red-930 active:border-red-930 active:focus-visible:ring-0 disabled:bg-red-850 aria-disabled:bg-red-850 disabled:border-red-850 aria-disabled:border-red-850 focus-visible:outline-red-850 ring-red-950 focus-visible:ring-red-950"
    },
    {
      "color": "success" as typeof color[number],
      "depth": "light" as typeof depth[number],
      "class": "text-green-780 bg-green-280 border border-green-280 hover:bg-green-270 hover:border-green-270 hover:focus-visible:ring-0 dark:hover:bg-green-200 dark:hover:border-green-200 active:bg-green-330 active:border-green-270 active:focus-visible:ring-0 dark:active:bg-green-330 dark:active:border-green-270 disabled:bg-green-280 aria-disabled:bg-green-280 disabled:border-green-280 aria-disabled:border-green-280 dark:disabled:bg-green-280 dark:aria-disabled:bg-green-280 dark:disabled:border-green-280 dark:aria-disabled:border-green-280 focus-visible:outline-green-280"
    },
    {
      "color": "success" as typeof color[number],
      "depth": "dark" as typeof depth[number],
      "class": "text-white dark:text-green-100 bg-green-730 border border-green-730 hover:bg-green-570 hover:border-green-570 hover:focus-visible:ring-0 active:bg-green-570 active:border-green-570 active:focus-visible:ring-0 disabled:bg-green-730 aria-disabled:bg-green-730 disabled:border-green-730 aria-disabled:border-green-730 focus-visible:outline-green-730 ring-green-900 focus-visible:ring-green-900"
    },
    {
      "color": "warning" as typeof color[number],
      "depth": "light" as typeof depth[number],
      "class": "text-orange-750 dark:text-orange-750 bg-orange-350/80 border border-orange-350/80 dark:bg-orange-230 dark:border-orange-230 hover:bg-orange-500/65 hover:border-orange-500/65 dark:hover:bg-orange-400 dark:hover:border-orange-400 hover:focus-visible:ring-0 active:bg-orange-550 active:border-orange-550 dark:active:bg-orange-600 dark:active:border-orange-600 active:focus-visible:ring-0 disabled:bg-orange-230 aria-disabled:bg-orange-230 disabled:border-orange-230 aria-disabled:border-orange-230 dark:disabled:bg-orange-230 dark:aria-disabled:bg-orange-230 dark:disabled:border-orange-230 dark:aria-disabled:border-orange-230 focus-visible:outline-orange-230"
    },
    {
      "color": "warning" as typeof color[number],
      "depth": "dark" as typeof depth[number],
      "class": "text-white dark:text-orange-100 bg-orange-700 border border-orange-700 hover:bg-orange-700/75 hover:border-orange-700/75 hover:focus-visible:ring-0 active:bg-orange-700/85 active:border-orange-700/85 active:focus-visible:ring-0 disabled:bg-orange-700 aria-disabled:bg-orange-700 disabled:border-orange-700 aria-disabled:border-orange-700 focus-visible:outline-orange-700"
    },
    {
      "color": "primary" as typeof color[number],
      "depth": "light" as typeof depth[number],
      "class": "text-blue-800 dark:text-blue-800 bg-blue-300 border border-blue-400 hover:bg-blue-300/75 hover:border-blue-300/75 hover:focus-visible:ring-0 active:bg-blue-300/85 active:border-blue-300/85 active:focus-visible:ring-0 disabled:bg-blue-300 aria-disabled:bg-blue-300 disabled:border-blue-300 aria-disabled:border-blue-300 focus-visible:outline-blue-300"
    },
    {
      "color": "primary" as typeof color[number],
      "depth": "dark" as typeof depth[number],
      "class": "text-white dark:text-blue-100 bg-blue-650 border border-blue-650 hover:bg-blue-630 hover:border-blue-630 hover:focus-visible:ring-0 active:bg-blue-750 active:border-blue-750 active:focus-visible:ring-0 disabled:bg-blue-650 aria-disabled:bg-blue-650 disabled:border-blue-650 aria-disabled:border-blue-650 focus-visible:outline-blue-650"
    },
    {
      "color": "secondary" as typeof color[number],
      "depth": "light" as typeof depth[number],
      "class": "text-blue-620 dark:text-blue-850 bg-blue-310 border border-blue-310 hover:bg-cyan-150 hover:border-cyan-150 hover:focus-visible:ring-0 active:bg-cyan-230 active:border-cyan-230 active:focus-visible:ring-0 disabled:bg-blue-310 aria-disabled:bg-blue-310 disabled:border-blue-310 aria-disabled:border-blue-310 focus-visible:outline-blue-310"
    },
    {
      "color": "secondary" as typeof color[number],
      "depth": "dark" as typeof depth[number],
      "class": "text-base-900 bg-cyan-350 border-cyan-500 hover:bg-cyan-350/75 hover:focus-visible:ring-0 active:bg-cyan-350/85 active:focus-visible:ring-0 disabled:bg-cyan-350 aria-disabled:bg-cyan-350 focus-visible:outline-cyan-350 ring-cyan-900 focus-visible:ring-cyan-900"
    },
    {
      "color": "collab" as typeof color[number],
      "depth": "light" as typeof depth[number],
      "class": "text-collab-900 dark:text-collab-900 bg-collab-300 border border-collab-400 hover:bg-collab-300/75 hover:border-collab-300/75 hover:focus-visible:ring-0 active:bg-collab-300/85 active:border-collab-300/85 active:focus-visible:ring-0 disabled:bg-collab-300 aria-disabled:bg-collab-300 disabled:border-collab-300 aria-disabled:border-collab-300 focus-visible:outline-collab-300"
    },
    {
      "color": "collab" as typeof color[number],
      "depth": "dark" as typeof depth[number],
      "class": "text-white dark:text-collab-100 bg-collab-700 border border-collab-700 hover:bg-collab-700/75 hover:border-collab-700/75 hover:focus-visible:ring-0 active:bg-collab-700/85 active:border-collab-700/85 active:focus-visible:ring-0 disabled:bg-collab-700 aria-disabled:bg-collab-700 disabled:border-collab-700 aria-disabled:border-collab-700 focus-visible:outline-collab-700"
    },
    {
      "color": "ai" as typeof color[number],
      "depth": "light" as typeof depth[number],
      "class": "text-ai-900 dark:text-ai-900 bg-ai-300 border border-ai-400 hover:bg-ai-300/75 hover:border-ai-300/75 hover:focus-visible:ring-0 active:bg-ai-300/85 active:border-ai-300/85 active:focus-visible:ring-0 disabled:bg-ai-300 aria-disabled:bg-ai-300 disabled:border-ai-300 aria-disabled:border-ai-300 focus-visible:outline-ai-300"
    },
    {
      "color": "ai" as typeof color[number],
      "depth": "dark" as typeof depth[number],
      "class": "text-white dark:text-ai-100 bg-ai-550 border border-ai-550 hover:bg-ai-550/75 hover:border-ai-550/75 hover:focus-visible:ring-0 active:bg-ai-550/85 active:border-ai-550/85 active:focus-visible:ring-0 disabled:bg-ai-550 aria-disabled:bg-ai-550 disabled:border-ai-550 aria-disabled:border-ai-550 focus-visible:outline-ai-550 ring-ai-900 focus-visible:ring-ai-900"
    },
    {
      "color": "link" as typeof color[number],
      "depth": "light" as typeof depth[number],
      "class": "text-base-900 dark:text-base-300 bg-transparent border border-transparent hover:text-base-master dark:hover:text-base-100 hover:bg-base-30 dark:hover:bg-base-850 hover:focus-visible:ring-0 active:text-base-ebony active:bg-blue-270 dark:active:text-base-100 dark:active:bg-slate-850 active:focus-visible:ring-0 disabled:text-base-master disabled:bg-base-30 aria-disabled:bg-base-30 dark:disabled:text-base-100 dark:aria-disabled:text-base-100 dark:disabled:bg-base-850 dark:aria-disabled:bg-base-850 focus-visible:outline-base-30 dark:focus-visible:outline-base-850"
    },
    {
      "color": "link" as typeof color[number],
      "depth": "light" as typeof depth[number],
      "useLabel": true,
      "class": "ps-1.5 pe-1.5"
    },
    {
      "color": "link" as typeof color[number],
      "depth": "normal" as typeof depth[number],
      "useLabel": true,
      "class": "ps-0 pe-0"
    },
    {
      "color": "link" as typeof color[number],
      "depth": "dark" as typeof depth[number],
      "class": " border text-base-900 bg-transparent border-base-330 dark:text-base-300 dark:border-base-800 hover:text-base-900 dark:hover:text-base-900 hover:bg-base-320 hover:border-base-330 hover:focus-visible:ring-0 active:text-base-900 dark:active:text-base-900 active:bg-base-250 active:border-base-550 active:focus-visible:ring-0 disabled:bg-transparent disabled:border-base-330 aria-disabled:bg-transparent aria-disabled:border-base-330 dark:disabled:text-base-900 dark:aria-disabled:text-base-900 dark:disabled:border-base-900 dark:aria-disabled:border-base-900 focus-visible:outline-base-330"
    },
    {
      "size": "xs" as typeof size[number],
      "leading": true,
      "useLabel": true,
      "useDropdown": false,
      "class": "ps-1.5 pe-4"
    },
    {
      "size": "sm" as typeof size[number],
      "leading": true,
      "useLabel": true,
      "useDropdown": false,
      "class": "ps-2.5 pe-[18px]"
    },
    {
      "size": "md" as typeof size[number],
      "leading": true,
      "useLabel": true,
      "useDropdown": false,
      "class": "ps-3.5 pe-5"
    },
    {
      "size": "lg" as typeof size[number],
      "leading": true,
      "useLabel": true,
      "useDropdown": false,
      "class": "ps-4 pe-[28px]"
    },
    {
      "size": "xs" as typeof size[number],
      "leading": false,
      "useLabel": true,
      "useDropdown": true,
      "class": "ps-4 pe-1.5"
    },
    {
      "size": "sm" as typeof size[number],
      "leading": false,
      "useLabel": true,
      "useDropdown": true,
      "class": "ps-[18px] pe-1.5"
    },
    {
      "size": "md" as typeof size[number],
      "leading": false,
      "useLabel": true,
      "useDropdown": true,
      "class": "ps-5 pe-2.5"
    },
    {
      "size": "lg" as typeof size[number],
      "leading": false,
      "useLabel": true,
      "useDropdown": true,
      "class": "ps-[28px] pe-3.5"
    },
    {
      "size": "xs" as typeof size[number],
      "leading": true,
      "useLabel": true,
      "useDropdown": true,
      "class": "ps-1.5 pe-1.5"
    },
    {
      "size": "sm" as typeof size[number],
      "leading": true,
      "useLabel": true,
      "useDropdown": true,
      "class": "ps-2.5 pe-1.5"
    },
    {
      "size": "md" as typeof size[number],
      "leading": true,
      "useLabel": true,
      "useDropdown": true,
      "class": "ps-3.5 pe-2.5"
    },
    {
      "size": "lg" as typeof size[number],
      "leading": true,
      "useLabel": true,
      "useDropdown": true,
      "class": "ps-4 pe-3.5"
    },
    {
      "normalCase": true,
      "size": "xs" as typeof size[number],
      "class": "text-xs"
    },
    {
      "normalCase": true,
      "size": "sm" as typeof size[number],
      "class": "text-sm"
    },
    {
      "normalCase": true,
      "size": [
        "md" as typeof size[number],
        "lg" as typeof size[number]
      ],
      "class": "text-md"
    }
  ],
  "defaultVariants": {
    "size": "md" as typeof size[number],
    "color": "default" as typeof color[number],
    "depth": "normal" as typeof depth[number]
  }
}