import { RecipeVariants } from '@vanilla-extract/recipes';
import { cssLayerComponent } from '../../styles/layers.css';
export declare const hiddenContent: string;
export declare const spinnerWrapper: string;
export declare const spinner: string;
export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
    size: {
        small: {
            '@layer': {
                [cssLayerComponent]: {
                    fontSize: `var(--${string})`;
                    height: "36px";
                    padding: `0 var(--${string})`;
                };
            };
        };
        medium: {
            '@layer': {
                [cssLayerComponent]: {
                    fontSize: `var(--${string})`;
                    height: `var(--${string})`;
                };
            };
        };
        xsmall: {
            '@layer': {
                [cssLayerComponent]: {
                    fontSize: `var(--${string})`;
                    fontWeight: `var(--${string})`;
                    padding: `2px var(--${string})`;
                };
            };
        };
    };
    shape: {
        default: {};
        rounded: {};
        iconOnly: {
            '@layer': {
                [cssLayerComponent]: {
                    padding: number;
                };
            };
        };
    };
    intent: {
        primary: {
            '@layer': {
                [cssLayerComponent]: {
                    backgroundColor: `var(--${string})`;
                    color: `var(--${string})`;
                    "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
                        backgroundColor: `var(--${string})`;
                        color: `var(--${string})`;
                    };
                };
            };
        };
        brand: {
            '@layer': {
                [cssLayerComponent]: {
                    backgroundColor: `var(--${string})`;
                    color: `var(--${string})`;
                    "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
                        backgroundColor: `var(--${string})`;
                    };
                };
            };
        };
        secondary: {
            '@layer': {
                [cssLayerComponent]: {
                    backgroundColor: `var(--${string})`;
                    border: `1px solid var(--${string})`;
                    color: `var(--${string})`;
                    selectors: {
                        "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
                            backgroundColor: `var(--${string})`;
                            borderColor: `var(--${string})`;
                        };
                    };
                };
            };
        };
        danger: {
            '@layer': {
                [cssLayerComponent]: {
                    backgroundColor: `var(--${string})`;
                    color: `var(--${string})`;
                    "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
                        backgroundColor: `var(--${string})`;
                    };
                };
            };
        };
        information: {
            '@layer': {
                [cssLayerComponent]: {
                    backgroundColor: `var(--${string})`;
                    color: `var(--${string})`;
                    "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
                        backgroundColor: `var(--${string})`;
                    };
                };
            };
        };
        warning: {
            '@layer': {
                [cssLayerComponent]: {
                    backgroundColor: `var(--${string})`;
                    color: `var(--${string})`;
                    "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
                        backgroundColor: `var(--${string})`;
                    };
                };
            };
        };
        success: {
            '@layer': {
                [cssLayerComponent]: {
                    backgroundColor: `var(--${string})`;
                    color: `var(--${string})`;
                    "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
                        backgroundColor: `var(--${string})`;
                    };
                };
            };
        };
    };
    minimal: {
        true: {
            '@layer': {
                [cssLayerComponent]: {
                    backgroundColor: "transparent";
                    borderStyle: "none";
                    color: `var(--${string})`;
                };
            };
        };
        false: never[];
    };
    rounded: {
        true: string;
    };
    isFullWidth: {
        true: string;
    };
    isLoading: {
        true: {};
    };
}>;
type ButtonRecipeProps = NonNullable<Required<RecipeVariants<typeof button>>>;
export type ButtonSize = ButtonRecipeProps['size'];
export type ButtonShape = ButtonRecipeProps['shape'];
export type ButtonIntent = ButtonRecipeProps['intent'];
export type ButtonIsFullWidth = ButtonRecipeProps['isFullWidth'];
export type ButtonIsLoading = ButtonRecipeProps['isLoading'];
export type ButtonMinimal = ButtonRecipeProps['minimal'];
export type ButtonRounded = ButtonRecipeProps['rounded'];
export interface StyledButtonProps {
    /**
     * Button sizing
     */
    size?: ButtonSize;
    /**
     * Button intentional colour scheme
     */
    variant?: ButtonIntent;
    /**
     * Pill shaped button appearance
     */
    rounded?: ButtonRounded;
    /**
     * Present a borderless minimal appearance
     */
    minimal?: ButtonMinimal;
    isFullWidth?: ButtonIsFullWidth;
    isLoading?: ButtonIsFullWidth;
}
export {};
//# sourceMappingURL=Button.css.d.ts.map