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

declare const stepper: {
    classNames: {
        stepper: RuntimeFn<{
            direction: {
                horizontal: {
                    width: "100%";
                    flexDirection: "row";
                };
                vertical: {
                    flexDirection: "column";
                    height: "100%";
                };
            };
        }>;
        step: RuntimeFn<{
            direction: {
                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<{
            active: {
                true: {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                    color: `var(--${string})` | `var(--${string}, ${string})`;
                };
            };
            done: {
                true: {
                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                    color: `var(--${string})` | `var(--${string}, ${string})`;
                };
            };
        }>;
        separator: RuntimeFn<{
            direction: {
                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 { stepper };