import { RecipeVariants } from '@vanilla-extract/recipes';
export declare const buttonAtoms: ((props: {
    width?: ("full" | "hug" | {
        phone?: "full" | "hug" | undefined;
        tablet?: "full" | "hug" | undefined;
        desktop?: "full" | "hug" | undefined;
    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 1 | 3, "full" | "hug" | null>;
}) => string) & {
    properties: Set<"width">;
};
export type ButtonSprinkles = Parameters<typeof buttonAtoms>[0];
export declare const buttonRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
    width: {
        hug: string;
        full: string;
    };
    size: {
        xsmall: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        small: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        medium: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        large: {
            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
    };
    shape: {
        rect: {
            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        square: {
            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        circle: {
            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        pill: {
            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
    };
    variant: {
        primary: {
            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            transition: "all .36s ease-out";
            selectors: {
                "&.focus-visible": {
                    outline: "none";
                    boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&:hover": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&.pressed": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&:disabled": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
            };
        };
        secondary: {
            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            selectors: {
                "&.focus-visible": {
                    outline: "none";
                    boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&:hover": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&.pressed": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&.active": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                    "&:hover": {
                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                        transition: string;
                    };
                    "&.pressed": {
                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                        transition: string;
                    };
                    "&:disabled": {
                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    };
                };
                "&:disabled": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
            };
        };
        tertiary: {
            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            backgroundColor: "transparent";
            borderColor: "transparent";
            selectors: {
                "&.focus-visible": {
                    outline: "none";
                    boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&:hover": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&.pressed": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&:disabled": {
                    backgroundColor: "transparent";
                    borderColor: "transparent";
                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
            };
        };
        ghost: {
            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            backgroundColor: "transparent";
            borderColor: "transparent";
            selectors: {
                "&.focus-visible": {
                    outline: "none";
                    boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&:hover": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&.pressed": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&:disabled": {
                    backgroundColor: "transparent";
                    borderColor: "transparent";
                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
            };
        };
        brand: {
            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        light: {
            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
        };
        danger: {
            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            selectors: {
                "&.focus-visible": {
                    outline: "none";
                    boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&:hover": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&.pressed": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&:disabled": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
            };
        };
        critical: {
            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
            selectors: {
                "&.focus-visible": {
                    outline: "none";
                    boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&:hover": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&.pressed": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
                "&:disabled": {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                    transition: "all .28s ease-out";
                };
            };
        };
    };
}>;
export type ButtonVariants = RecipeVariants<typeof buttonRecipe>;
//# sourceMappingURL=Button.css.d.ts.map