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

declare const iconButtonStyles: {
    iconButton: RuntimeFn<{
        /**
         * Determines the visual style of the icon button, influencing its color scheme and appearance.
         * @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 icon button component.
         * @default medium
         */
        size: {
            large: {
                height: "3rem";
                width: "3rem";
                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
            };
            medium: {
                height: "2.5rem";
                width: "2.5rem";
                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
            };
            small: {
                height: "2rem";
                width: "2rem";
                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
            };
        };
        variant: {
            /**
             * Defines the visual variant of the icon button, affecting its background style, border and text.
             * @default solid
             */
            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";
            };
            ghost: {
                backgroundColor: "transparent";
                borderColor: "transparent";
            };
            tonal: {
                borderColor: "transparent";
            };
        };
        /**
         * Defines if the button should have rounded edges.
         *
         * - `true`: The button will be rendered with completely rounded edges, useful for circular -shaped icons.
         * - `false` (default): The button will have standard edges or defined by the component style.
         * @default false
         */
        rounded: {
            true: {
                borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
                ":after": {
                    borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
                };
            };
        };
    }>;
};

export { iconButtonStyles };