import { tv } from "tailwind-variants";

export const inlineSizeRecipe = tv({
  base: "relative overflow-hidden flex flex-nowrap justify-center items-center box-border",
  variants: {
    size: {
      xs: "text-xs h-inline-xs",
      sm: "text-sm h-inline-sm",
      md: "text-md h-inline-md",
      lg: "text-lg h-inline-lg",
      xl: "text-xl h-inline-xl",
      "2xl": "text-2xl h-inline-2xl",
    },
    shape: {
      square: "rounded-none",
      rounded: "",
      circle: "rounded-full",
    },
    iconOnly: {
      true: "",
      false: "",
    },
    disabled: {
      true: "",
      false: "",
    },
  },
  compoundVariants: [
    {
      shape: "rounded",
      size: "xs",
      class: "rounded-xs",
    },
    {
      shape: "rounded",
      size: "sm",
      class: "rounded-sm",
    },
    {
      shape: "rounded",
      size: "md",
      class: "rounded-md",
    },
    {
      shape: "rounded",
      size: "lg",
      class: "rounded-lg",
    },
    {
      shape: "rounded",
      size: "xl",
      class: "rounded-xl",
    },
    {
      shape: "rounded",
      size: "2xl",
      class: "rounded-2xl",
    },
    // --------------------------------------------------
    {
      iconOnly: true,
      size: "xs",
      class: "w-inline-xs",
    },
    {
      iconOnly: true,
      size: "sm",
      class: "w-inline-sm",
    },
    {
      iconOnly: true,
      size: "md",
      class: "w-inline-md",
    },
    {
      iconOnly: true,
      size: "lg",
      class: "w-inline-lg",
    },
    {
      iconOnly: true,
      size: "xl",
      class: "w-inline-xl",
    },
    {
      iconOnly: true,
      size: "2xl",
      class: "w-inline-2xl",
    },
  ],
});