import { cvr } from "../utils/cvr";

export const itemSizeRecipe = cvr({
  base: "relative select-none flex flex-nowrap justify-center items-center",
  variants: {
    size: {
      xs: "text-xs h-item-xs gap-xs px-xs",
      sm: "text-sm h-item-sm gap-sm px-sm",
      md: "text-md h-item-md gap-md px-md",
      lg: "text-lg h-item-lg gap-lg px-lg",
      xl: "text-xl h-item-xl gap-xl px-xl",
      "2xl": "text-2xl h-item-2xl gap-2xl px-2xl",
    },
    shape: {
      square: "rounded-none",
      rounded: "",
      circle: "rounded-full",
    },
    iconOnly: {
      true: "px-none",
      false: "",
    },
  },
  compoundVariants: [
    { iconOnly: false, size: "xs", class: "px-xs" },
    { iconOnly: false, size: "sm", class: "px-sm" },
    { iconOnly: false, size: "md", class: "px-md" },
    { iconOnly: false, size: "lg", class: "px-lg" },
    { iconOnly: false, size: "xl", class: "px-xl" },
    { iconOnly: false, size: "2xl", class: "px-2xl" },
    { shape: "rounded", size: "xs", class: "rounded-sm" },
    {
      shape: "rounded",
      size: "sm",
      class: "rounded-md",
    },
    {
      shape: "rounded",
      size: "md",
      class: "rounded-lg",
    },
    {
      shape: "rounded",
      size: "lg",
      class: "rounded-xl",
    },
    {
      shape: "rounded",
      size: "xl",
      class: "rounded-2xl",
    },
    {
      shape: "rounded",
      size: "2xl",
      class: "rounded-3xl",
    },
    // --------------------------------------------------
    {
      iconOnly: true,
      size: "xs",
      class: "w-item-xs",
    },
    {
      iconOnly: true,
      size: "sm",
      class: "w-item-sm",
    },
    {
      iconOnly: true,
      size: "md",
      class: "w-item-md",
    },
    {
      iconOnly: true,
      size: "lg",
      class: "w-item-lg",
    },
    {
      iconOnly: true,
      size: "xl",
      class: "w-item-xl",
    },
    {
      iconOnly: true,
      size: "2xl",
      class: "w-item-2xl",
    },
  ],
});