import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';

declare const buttonStyles: {
    button: RuntimeFn<{
        /**
         * Specifies whether the button should take up the full width of its container.
         * This variant is useful when you want to make a button span the entire width of its parent container.
         *
         */
        full: {
            true: {
                width: "100%";
            };
        };
        /**
         * Defines the appearance variants for the button component.
         * Each appearance variant corresponds to a specific background color, border color, and text color.
         * @default brand
         */
        appearance: {
            brand: {
                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
                color: `var(--${string})` | `var(--${string}, ${string})`;
            };
            danger: {
                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
                color: `var(--${string})` | `var(--${string}, ${string})`;
            };
            success: {
                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
                color: `var(--${string})` | `var(--${string}, ${string})`;
            };
            warning: {
                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
                color: `var(--${string})` | `var(--${string}, ${string})`;
            };
            neutral: {
                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
                color: `var(--${string})` | `var(--${string}, ${string})`;
            };
            inverted: {
                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
                color: `var(--${string})` | `var(--${string}, ${string})`;
            };
        };
        /**
         * Defines the size of the button component.
         * @default large
         */
        size: {
            large: {
                gap: `var(--${string})` | `var(--${string}, ${string})`;
                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
                height: "3rem";
                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
            };
            medium: {
                gap: `var(--${string})` | `var(--${string}, ${string})`;
                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
                height: "2.5rem";
                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
            };
            small: {
                gap: `var(--${string})` | `var(--${string}, ${string})`;
                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
                height: "2rem";
                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
            };
        };
        /**
         * Defines the visual variant of the badge, affecting its background style, border and text.
         * @default solid
         */
        variant: {
            solid: {
                selectors: {
                    "&:hover:after": {
                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                    };
                    "&:active:after": {
                        borderColor: `var(--${string})` | `var(--${string}, ${string})`;
                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                    };
                };
            };
            outlined: {
                backgroundColor: "transparent";
            };
            text: {
                backgroundColor: "transparent";
                textDecoration: "underline";
                borderColor: "transparent";
            };
            tonal: {
                borderColor: "transparent";
            };
        };
    }>;
};

export { buttonStyles };