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

declare const stepperStyles: {
    stepper: RuntimeFn<{
        /**
         * Specifies the direction of the stepper. This prop accepts one of the following values: vertical or horizontal.
         * @default horizontal
         */
        direction: {
            horizontal: {
                width: "100%";
                flexDirection: "row";
            };
            vertical: {
                flexDirection: "column";
                height: "100%";
            };
        };
    }>;
    step: RuntimeFn<{
        direction: {
            /**
             * Specifies the direction of the stepper. This prop accepts one of the following values: vertical or horizontal.
             * @default horizontal
             */
            horizontal: {
                flexDirection: "column";
                ":after": {
                    top: "20px";
                    height: "1px";
                    width: "calc(100% - 60px)";
                    left: "calc(50% + 30px)";
                };
            };
            vertical: {
                ":after": {
                    width: "1px";
                    height: "calc(100% - 60px)";
                    top: "calc(50% + 30px)";
                    left: "18px";
                };
            };
        };
    }>;
    circle: RuntimeFn<{
        /**
         * Indicates whether the step is currently active. An active step is typically highlighted to show that it is the current step.
         * @default false
         */
        active: {
            true: {
                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                color: `var(--${string})` | `var(--${string}, ${string})`;
            };
        };
        /**
         * Indicates whether the step has been completed. A completed step is usually marked with a checkmark or other indicator.
         * @default false
         */
        done: {
            true: {
                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                color: `var(--${string})` | `var(--${string}, ${string})`;
            };
        };
    }>;
    separator: RuntimeFn<{
        direction: {
            /**
             * Specifies the direction of the stepper. This prop accepts one of the following values: vertical or horizontal.
             * @default horizontal
             */
            horizontal: {
                height: "1px";
                marginLeft: `var(--${string})` | `var(--${string}, ${string})`;
                marginRight: `var(--${string})` | `var(--${string}, ${string})`;
                marginTop: "20px";
            };
            vertical: {
                width: "1px";
                marginTop: `var(--${string})` | `var(--${string}, ${string})`;
                marginBottom: `var(--${string})` | `var(--${string}, ${string})`;
                marginLeft: "18px";
            };
        };
    }>;
};

export { stepperStyles };