Function buttonVariants

classNames: RecipeClassNames<
    {
        disabled: {
            false: {};
            true: { cursor: "not-allowed"; opacity: number };
        };
        size: {
            large: (
                string
                | { height: "54px"; padding: "6px 16px"; width: "335px" }
            )[];
            middle: (
                string
                | { height: "44px"; padding: "6px 14px"; width: "160px" }
            )[];
            small: (string | { height: "36px"; padding: "6px 14px"; width: "116px" })[];
        };
        variant: {
            primary: {
                ":active": { backgroundColor: CSSVarFunction; color: CSSVarFunction };
                "& svg": { color: CSSVarFunction; display: string };
                "&:active svg": { color: CSSVarFunction };
                backgroundColor: CSSVarFunction;
                color: CSSVarFunction;
            };
            secondary: {
                backgroundColor: CSSVarFunction;
                border: | `1px solid var(--${string})`
                | `1px solid var(--${string}, ${string})`
                | `1px solid var(--${string}, ${number})`;
                color: CSSVarFunction;
            };
            third: {
                "& svg": { display: string };
                backgroundColor: CSSVarFunction;
                border:
                    | `1px solid var(--${string})`
                    | `1px solid var(--${string}, ${string})`
                    | `1px solid var(--${string}, ${number})`;
                color: CSSVarFunction;
            };
        };
    },
>

variants: () => ("size" | "disabled" | "variant")[]