import styled from "@emotion/styled";
import { classes, tokens } from "../../Steps.tokens";
import { component, mergeConfig } from "../../../../engines";
import { spinnerConfig, spinnerTokens } from "../../../Spinner";
import { addFocus } from "../../../../mixins";
var mergedConfig = mergeConfig(spinnerConfig);
var Spinner = component(mergedConfig);
export var SpinnerStyled = /*#__PURE__*/ styled(Spinner, {
    target: "e1q6cqk30",
    label: "SpinnerStyled"
})(spinnerTokens.size, ":", function(param) {
    var hasIndicator = param.hasIndicator;
    return hasIndicator ? "var(".concat(tokens.activeIndicatorSize, ")") : "var(".concat(tokens.activeBulletSize, ")");
}, ";", spinnerTokens.color, ":var(", tokens.loaderSpinnerColor, ",var(", tokens.activeIndicatorColor, "));");
export var StepItemTitle = /*#__PURE__*/ styled("div", {
    target: "e1q6cqk31",
    label: "StepItemTitle"
})("padding-top:var(", tokens.titlePaddingTop, ");padding-right:var(", tokens.contentSidePadding, ");font-family:var(", tokens.titleFontFamily, ");font-size:var(", tokens.titleFontSize, ");font-style:var(", tokens.titleFontStyle, ");font-weight:var(", tokens.titleFontWeight, ");letter-spacing:var(", tokens.titleLetterSpacing, ");line-height:var(", tokens.titleLineHeight, ");word-break:break-word;");
export var StepItemContent = /*#__PURE__*/ styled("div", {
    target: "e1q6cqk32",
    label: "StepItemContent"
})("padding-top:var(", tokens.contentPaddingTop, ");padding-right:var(", tokens.contentSidePadding, ");font-family:var(", tokens.contentFontFamily, ");font-size:var(", tokens.contentFontSize, ");font-style:var(", tokens.contentFontStyle, ");font-weight:var(", tokens.contentFontWeight, ");letter-spacing:var(", tokens.contentLetterSpacing, ");line-height:var(", tokens.contentLineHeight, ");word-break:break-word;color:var(", tokens.contentColor, ");");
export var BulletIndicatorWrapper = /*#__PURE__*/ styled("div", {
    target: "e1q6cqk33",
    label: "BulletIndicatorWrapper"
})("display:flex;align-items:center;box-sizing:content-box;&:not(.", classes.simple, "){flex:0;&.", classes.hasIndicator, "{width:100%;min-height:var(", tokens.activeIndicatorSize, ");}&:not(.", classes.hasIndicator, "){width:100%;min-height:var(", tokens.activeBulletSize, ");}&.", classes.verticalOrientation, "{padding-right:var(", tokens.verticalContentPaddingLeft, ");}}&.", classes.simple, "{flex:0;justify-content:center;&.", classes.hasIndicator, "{width:var(", tokens.activeIndicatorSize, ");}&:not(.", classes.hasIndicator, "){width:var(", tokens.activeBulletSize, ");}}&.", classes.verticalOrientation, "{flex-direction:column;align-items:center;justify-content:center;&.", classes.hasIndicator, "{min-width:var(", tokens.activeIndicatorSize, ");}&:not(.", classes.hasIndicator, "){min-width:var(", tokens.activeBulletSize, ");}}&.", classes.centered, "{justify-content:center;}");
export var BulletIndicator = /*#__PURE__*/ styled("button", {
    target: "e1q6cqk34",
    label: "BulletIndicator"
})("display:flex;align-items:center;justify-content:center;width:var(", tokens.indicatorSize, ");height:var(", tokens.indicatorSize, ");border-radius:50%;box-sizing:border-box;position:relative;outline:none;padding:0;margin:0;border:var(", tokens.dividerThickness, ") solid var(", tokens.completedIndicatorBorder, ",transparent);cursor:pointer;color:var(", tokens.completedIndicatorColor, ");background:var(", tokens.completedIndicatorBackground, ");font-family:var(", tokens.indicatorFontFamily, ");font-size:var(", tokens.indicatorFontSize, ");font-style:var(", tokens.indicatorFontStyle, ");font-weight:var(", tokens.indicatorFontWeight, ");letter-spacing:var(", tokens.indicatorLetterSpacing, ");line-height:var(", tokens.indicatorLineHeight, ");", addFocus({
    outlineOffset: '-0.0625rem',
    outlineSize: '0.0625rem',
    outlineRadius: '50%',
    outlineColor: "var(".concat(tokens.focusColor, ")")
}), "    &.", classes.active, "{width:var(", tokens.activeIndicatorSize, ");height:var(", tokens.activeIndicatorSize, ");border:var(", tokens.dividerThickness, ") var(", tokens.activeIndicatorBorder, ");font-family:var(", tokens.activeIndicatorFontFamily, ");font-size:var(", tokens.activeIndicatorFontSize, ");font-style:var(", tokens.activeIndicatorFontStyle, ");font-weight:var(", tokens.activeIndicatorFontWeight, ");letter-spacing:var(", tokens.activeIndicatorLetterSpacing, ");line-height:var(", tokens.activeIndicatorLineHeight, ");color:var(", tokens.activeIndicatorColor, ");background:var(", tokens.activeIndicatorBackground, ");", addFocus({
    outlineOffset: '-0.1875rem',
    outlineSize: '0.0625rem',
    outlineRadius: '50%',
    outlineColor: "var(".concat(tokens.focusColor, ")")
}), "}&.", classes.inactive, "{color:var(", tokens.inactiveIndicatorColor, ");background:var(", tokens.inactiveIndicatorBackground, ");border:none;&.", classes.simple, "{&:before,&:after{background:var(", tokens.dividerColor, ");}}}");
export var Bullet = /*#__PURE__*/ styled(BulletIndicator, {
    target: "e1q6cqk35",
    label: "Bullet"
})("width:var(", tokens.bulletSize, ");height:var(", tokens.bulletSize, ");border:var(", tokens.dividerThickness, ") solid\n        var(", tokens.completedBulletBorder, ",var(", tokens.completedIndicatorBorder, ",transparent));background:var(", tokens.completedBulletBackground, ",var(", tokens.completedIndicatorBackground, "));&.", classes.active, "{width:var(", tokens.activeBulletSize, ");height:var(", tokens.activeBulletSize, ");border:var(", tokens.dividerThickness, ")\n            var(", tokens.bulletActiveIndicatorBorder, ",var(", tokens.activeIndicatorBorder, "));background:var(", tokens.bulletActiveBackground, ",var(", tokens.activeIndicatorBackground, "));}&.", classes.inactive, "{color:var(", tokens.inactiveIndicatorColor, ");background:var(", tokens.inactiveIndicatorBackground, ");border:none;&.", classes.simple, "{&:before,&:after{background:var(", tokens.dividerColor, ");}}}");
export var StepItemDivider = /*#__PURE__*/ styled("div", {
    target: "e1q6cqk36",
    label: "StepItemDivider"
})("flex:1;width:100%;height:var(", tokens.dividerThickness, ");background:var(", tokens.dividerColor, ");&.", classes.nextActive, "{background:var(", tokens.dividerGradientColor, ",var(", tokens.dividerColor, "));}&.", classes.verticalOrientation, "{width:var(", tokens.dividerThickness, ");height:100%;background:var(", tokens.dividerColor, ");&.", classes.nextActive, "{background:var(", tokens.dividerVerticalGradientColor, ",var(", tokens.dividerColor, "));}}&.", classes.inactive, "{background:var(", tokens.inactiveIndicatorBackground, ");}&.", classes.disabled, "{opacity:var(", tokens.disabledOpacity, ");}&.", classes.transparentDivider, "{background:transparent;}&.", classes.indentDivider, "{height:", function(param) {
    var indentToken = param.indentToken;
    return indentToken || '';
}, ";min-height:", function(param) {
    var indentToken = param.indentToken;
    return indentToken || '';
}, ";max-height:", function(param) {
    var indentToken = param.indentToken;
    return indentToken || '';
}, ";&.", classes.simple, "{height:auto;max-height:none;}&.", classes.verticalOrientation, ".", classes.active, "{background:var(", tokens.dividerVerticalIndentColor, ",var(", tokens.dividerColor, "));}}");
export var StepItemContentWrapper = /*#__PURE__*/ styled("div", {
    target: "e1q6cqk37",
    label: "StepItemContentWrapper"
})("&.", classes.verticalOrientation, "{width:100%;", StepItemTitle, "{padding-top:var(", tokens.contentVerticalPadding, ");padding-right:0;}", StepItemContent, "{padding-top:var(", tokens.contentVerticalPadding, ");padding-bottom:var(", tokens.contentVerticalPadding, ");padding-right:0;}}");
export var StepItemStyled = /*#__PURE__*/ styled("div", {
    target: "e1q6cqk38",
    label: "StepItemStyled"
})("position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:1;color:var(", tokens.activeIndicatorColor, ");&.", classes.verticalOrientation, "{flex-direction:row;align-items:stretch;", StepItemDivider, "{width:var(", tokens.dividerThickness, ");height:100%;}}", StepItemTitle, "{color:var(", tokens.completedTitleColor, ",", tokens.activeTitleColor, ");}&.", classes.active, "{", BulletIndicator, "{cursor:default;}", StepItemTitle, "{color:var(", tokens.activeTitleColor, ");}}&.", classes.inactive, "{color:var(", tokens.inactiveIndicatorColor, ");", StepItemTitle, "{color:var(", tokens.inactiveTitleColor, ");}}&.", classes.simple, "{flex:0;align-items:center;justify-content:center;flex-direction:row;height:100%;&.", classes.hasIndicator, "{min-width:var(", tokens.activeIndicatorSize, ");min-height:var(", tokens.activeIndicatorSize, ");}&:not(.", classes.hasIndicator, "){width:var(", tokens.activeBulletSize, ");min-height:var(", tokens.activeBulletSize, ");}&.", classes.inactive, ",&:not(.", classes.active, "){&:before,&:after{content:'';display:block;width:calc((var(", tokens.activeIndicatorSize, ") - var(", tokens.indicatorSize, ")) / 2);height:var(", tokens.dividerThickness, ");background:var(", tokens.dividerColor, ");}&:not(.", classes.hasIndicator, "){&:before,&:after{width:calc((var(", tokens.activeBulletSize, ") - var(", tokens.bulletSize, ")) / 2);}}&.", classes.verticalOrientation, "{flex-direction:column;&:before,&:after{width:var(", tokens.dividerThickness, ");height:calc((var(", tokens.activeIndicatorSize, ") - var(", tokens.indicatorSize, ")) / 2);margin:0 auto;align-self:auto;}&:not(.", classes.hasIndicator, "){&:before,&:after{height:calc((var(", tokens.activeBulletSize, ") - var(", tokens.bulletSize, ")) / 2);}}&:after{margin:0 auto;}}&.isFirst{&:before{background:transparent;}}&.isLast{&:after{background:transparent;}}}&.", classes.inactive, "{&:after,&:before{background:var(", tokens.inactiveIndicatorBackground, ");}}&.isPrevInactive{&:before{background:var(", tokens.inactiveIndicatorBackground, ");}}&.isNextInactive{&:after{background:var(", tokens.inactiveIndicatorBackground, ");}}&.", classes.disabled, "{&:before,&:after{background:var(", tokens.inactiveIndicatorBackground, ");opacity:1;}}&.", classes.transparentDivider, "{&:before,&:after{background:transparent;}}}&:not(.", classes.simple, "):not(.", classes.verticalOrientation, "){&.isNextActive{", BulletIndicatorWrapper, "{width:calc(100% - (var(", tokens.activeIndicatorSize, ") - var(", tokens.indicatorSize, ")) / 2);}}&.", classes.active, "{", BulletIndicatorWrapper, "{margin-left:calc((var(", tokens.activeIndicatorSize, ") - var(", tokens.indicatorSize, ")) / -2);width:calc(100% + (var(", tokens.activeIndicatorSize, ") - var(", tokens.indicatorSize, ")) / 2);}}}&.", classes.hovered, "{&:not(.", classes.active, "){", StepItemTitle, "{cursor:pointer;color:var(", tokens.completedTitleColorHover, ");}", BulletIndicator, "{color:var(", tokens.completedIndicatorColorHover, ");background:var(", tokens.completedIndicatorBackgroundHover, ");border:var(", tokens.dividerThickness, ") solid var(", tokens.completedIndicatorBorderHover, ",transparent);}", Bullet, "{color:var(", tokens.completedBulletBackground, ",var(", tokens.completedIndicatorColorHover, "));background:var(\n                    ", tokens.completedBulletBackgroundHover, ",var(", tokens.completedIndicatorBackgroundHover, ")\n                );border:var(", tokens.dividerThickness, ") solid var(", tokens.completedBulletBorderHover, ",transparent);}}&.", classes.inactive, "{", StepItemTitle, "{color:var(", tokens.inactiveTitleColorHover, ");}", BulletIndicator, ",", Bullet, "{color:var(", tokens.inactiveIndicatorColorHover, ");background:var(", tokens.inactiveIndicatorBackgroundHover, ");border:none;}}", BulletIndicatorWrapper, "{cursor:pointer;}}&.", classes.centered, "{align-items:center;", StepItemContentWrapper, "{display:flex;flex-direction:column;align-items:center;padding-left:calc(var(", tokens.contentSidePadding, ") / 2);padding-right:calc(var(", tokens.contentSidePadding, ") / 2);", StepItemTitle, "{width:100%;}", StepItemTitle, ",", StepItemContent, "{padding-right:0;text-align:center;}}}&.", classes.disabled, "{cursor:default;opacity:var(", tokens.disabledOpacity, ");}");
