import { __makeTemplateObject } from "tslib";
import styled, { css } from "styled-components";
import { StepItemHorizontal, StepItemVertical } from "./components/StepItem/styles";
export var StepWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  gap: 16px;\n  flex: 1;\n\n  ", ";\n\n  ", ":last-child {\n    flex: 0.75 3 auto;\n    min-width: 0;\n    max-width: max-content;\n  }\n\n  ", ":last-child {\n    flex: 0;\n  }\n"], ["\n  display: flex;\n  gap: 16px;\n  flex: 1;\n\n  ", ";\n\n  ", ":last-child {\n    flex: 0.75 3 auto;\n    min-width: 0;\n    max-width: max-content;\n  }\n\n  ", ":last-child {\n    flex: 0;\n  }\n"])), function (_a) {
    var direction = _a.direction, width = _a.width, height = _a.height;
    return direction === "horizontal"
        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          flex-direction: row;\n          width: ", ";\n        "], ["\n          flex-direction: row;\n          width: ", ";\n        "])), width ? width : "100%") : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          flex-direction: column;\n          height: ", ";\n        "], ["\n          flex-direction: column;\n          height: ", ";\n        "])), height ? height : "100%");
}, StepItemHorizontal, StepItemVertical);
var templateObject_1, templateObject_2, templateObject_3;
