import { RecipeVariants } from '@vanilla-extract/recipes';

export declare const button: import('@vanilla-extract/recipes').RuntimeFn<{
    color: {
        primary: {
            background: `var(--${string})`;
            color: `var(--${string})`;
            selectors: {
                "&:hover": {
                    borderColor: `var(--${string})`;
                    color: `var(--${string})`;
                };
                "&:active": {
                    backgroundColor: `var(--${string})`;
                    color: `var(--${string})`;
                };
            };
        };
        secondary: {
            background: `var(--${string})`;
            color: `var(--${string})`;
            selectors: {
                "&:hover": {
                    borderColor: `var(--${string})`;
                    color: `var(--${string})`;
                };
                "&:active": {
                    backgroundColor: `var(--${string})`;
                    color: `var(--${string})`;
                };
            };
        };
        tertiary: {
            background: `var(--${string})`;
            color: `var(--${string})`;
            selectors: {
                "&:hover": {
                    borderColor: `var(--${string})`;
                    color: `var(--${string})`;
                };
                "&:active": {
                    backgroundColor: `var(--${string})`;
                    color: `var(--${string})`;
                };
            };
        };
    };
    skeleton: {
        true: {
            background: "#D4D4D4";
            borderColor: "#D4D4D4";
        };
    };
    size: {
        small: {
            padding: "4px 32px";
        };
        medium: {
            padding: "8px 48px";
        };
        large: {
            padding: "12px 64px";
            selectors: {};
            "@media": {
                "screen and (max-width: 280px)": {
                    padding: "12px 8px";
                    fontSize: number;
                };
                "screen and (max-width: 370px)": {
                    padding: "11px 1.5rem";
                };
            };
        };
        embedded: {
            padding: "8px 48px";
            fontSize: number;
            "@media": {
                "screen and (max-width: 768px)": {
                    padding: "8px 8px";
                };
                "screen and (max-width: 450px)": {
                    padding: "4px 4px";
                    fontSize: number;
                };
            };
        };
    };
    disabled: {
        true: {
            border: "2px solid transparent";
            color: "#F4F4F4";
            background: "transparent";
            cursor: "not-allowed";
        };
    };
    rounded: {
        none: {
            borderRadius: number;
        };
        small: {
            borderRadius: number;
        };
        medium: {
            borderRadius: number;
        };
        large: {
            borderRadius: number;
        };
    };
    square: {
        true: {
            width: number;
            minHeight: number;
            whiteSpace: "break-spaces";
            textAlign: "center";
            padding: "0 1em";
            display: "flex";
            flexDirection: "column";
            justifyContent: "center";
            background: "#fff";
            color: "#1F1F1F";
            border: "1px solid #EBEBEB";
            alignItems: "center";
            gap: number;
            ":hover": {
                background: "#E9F8FF";
                color: "#1F1F1F";
            };
            "@media": {
                "screen and (max-width:768px)": {
                    width: number;
                    minHeight: number;
                };
            };
        };
    };
}>;
export type ButtonVariants = RecipeVariants<typeof button>;