import styled from "styled-components";
import { classes, tokens } from "../../Steps.tokens";
import { component, mergeConfig } from "../../../../engines";
import { spinnerConfig, spinnerTokens } from "../../../Spinner";
import { addFocus } from "../../../../mixins";
const mergedConfig = mergeConfig(spinnerConfig);
const Spinner = component(mergedConfig);
export const SpinnerStyled = styled(Spinner).withConfig({
    displayName: "StepItem.styles__SpinnerStyled",
    componentId: "sc-bb36c21e-0"
})([
    ``,
    `:`,
    `;`,
    `:var(`,
    `,var(`,
    `));`
], spinnerTokens.size, ({ hasIndicator })=>hasIndicator ? `var(${tokens.activeIndicatorSize})` : `var(${tokens.activeBulletSize})`, spinnerTokens.color, tokens.loaderSpinnerColor, tokens.activeIndicatorColor);
export const StepItemTitle = styled.div.withConfig({
    displayName: "StepItem.styles__StepItemTitle",
    componentId: "sc-bb36c21e-1"
})([
    `padding-top:var(`,
    `);padding-right:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);word-break:break-word;`
], tokens.titlePaddingTop, tokens.contentSidePadding, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight);
export const StepItemContent = styled.div.withConfig({
    displayName: "StepItem.styles__StepItemContent",
    componentId: "sc-bb36c21e-2"
})([
    `padding-top:var(`,
    `);padding-right:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);word-break:break-word;color:var(`,
    `);`
], tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.contentColor);
export const BulletIndicatorWrapper = styled.div.withConfig({
    displayName: "StepItem.styles__BulletIndicatorWrapper",
    componentId: "sc-bb36c21e-3"
})([
    `display:flex;align-items:center;box-sizing:content-box;&:not(.`,
    `){flex:0;&.`,
    `{width:100%;min-height:var(`,
    `);}&:not(.`,
    `){width:100%;min-height:var(`,
    `);}&.`,
    `{padding-right:var(`,
    `);}}&.`,
    `{flex:0;justify-content:center;&.`,
    `{width:var(`,
    `);}&:not(.`,
    `){width:var(`,
    `);}}&.`,
    `{flex-direction:column;align-items:center;justify-content:center;&.`,
    `{min-width:var(`,
    `);}&:not(.`,
    `){min-width:var(`,
    `);}}&.`,
    `{justify-content:center;}`
], classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, tokens.verticalContentPaddingLeft, classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.centered);
export const BulletIndicator = styled.button.withConfig({
    displayName: "StepItem.styles__BulletIndicator",
    componentId: "sc-bb36c21e-4"
})([
    `display:flex;align-items:center;justify-content:center;width:var(`,
    `);height:var(`,
    `);border-radius:50%;box-sizing:border-box;position:relative;outline:none;padding:0;margin:0;border:var(`,
    `) solid var(`,
    `,transparent);cursor:pointer;color:var(`,
    `);background:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);`,
    ` &.`,
    `{width:var(`,
    `);height:var(`,
    `);border:var(`,
    `) var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);color:var(`,
    `);background:var(`,
    `);`,
    `}&.`,
    `{color:var(`,
    `);background:var(`,
    `);border:none;&.`,
    `{&:before,&:after{background:var(`,
    `);}}}`
], tokens.indicatorSize, tokens.indicatorSize, tokens.dividerThickness, tokens.completedIndicatorBorder, tokens.completedIndicatorColor, tokens.completedIndicatorBackground, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, addFocus({
    outlineOffset: '-0.0625rem',
    outlineSize: '0.0625rem',
    outlineRadius: '50%',
    outlineColor: `var(${tokens.focusColor})`
}), classes.active, tokens.activeIndicatorSize, tokens.activeIndicatorSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, addFocus({
    outlineOffset: '-0.1875rem',
    outlineSize: '0.0625rem',
    outlineRadius: '50%',
    outlineColor: `var(${tokens.focusColor})`
}), classes.inactive, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorBackground, classes.simple, tokens.dividerColor);
export const Bullet = styled(BulletIndicator).withConfig({
    displayName: "StepItem.styles__Bullet",
    componentId: "sc-bb36c21e-5"
})([
    `width:var(`,
    `);height:var(`,
    `);border:var(`,
    `) solid var(`,
    `,var(`,
    `,transparent));background:var(`,
    `,var(`,
    `));&.`,
    `{width:var(`,
    `);height:var(`,
    `);border:var(`,
    `) var(`,
    `,var(`,
    `));background:var(`,
    `,var(`,
    `));}&.`,
    `{color:var(`,
    `);background:var(`,
    `);border:none;&.`,
    `{&:before,&:after{background:var(`,
    `);}}}`
], tokens.bulletSize, tokens.bulletSize, tokens.dividerThickness, tokens.completedBulletBorder, tokens.completedIndicatorBorder, tokens.completedBulletBackground, tokens.completedIndicatorBackground, classes.active, tokens.activeBulletSize, tokens.activeBulletSize, tokens.dividerThickness, tokens.bulletActiveIndicatorBorder, tokens.activeIndicatorBorder, tokens.bulletActiveBackground, tokens.activeIndicatorBackground, classes.inactive, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorBackground, classes.simple, tokens.dividerColor);
export const StepItemDivider = styled.div.withConfig({
    displayName: "StepItem.styles__StepItemDivider",
    componentId: "sc-bb36c21e-6"
})([
    `flex:1;width:100%;height:var(`,
    `);background:var(`,
    `);&.`,
    `{background:var(`,
    `,var(`,
    `));}&.`,
    `{width:var(`,
    `);height:100%;background:var(`,
    `);&.`,
    `{background:var(`,
    `,var(`,
    `));}}&.`,
    `{background:var(`,
    `);}&.`,
    `{opacity:var(`,
    `);cursor:not-allowed;}&.`,
    `{background:transparent;}&.`,
    `{height:`,
    `;min-height:`,
    `;max-height:`,
    `;&.`,
    `{height:auto;max-height:none;}&.`,
    `.`,
    `{background:var(`,
    `,var(`,
    `));}}`
], tokens.dividerThickness, tokens.dividerColor, classes.nextActive, tokens.dividerGradientColor, tokens.dividerColor, classes.verticalOrientation, tokens.dividerThickness, tokens.dividerColor, classes.nextActive, tokens.dividerVerticalGradientColor, tokens.dividerColor, classes.inactive, tokens.inactiveIndicatorBackground, classes.disabled, tokens.disabledOpacity, classes.transparentDivider, classes.indentDivider, ({ indentToken })=>indentToken || '', ({ indentToken })=>indentToken || '', ({ indentToken })=>indentToken || '', classes.simple, classes.verticalOrientation, classes.active, tokens.dividerVerticalIndentColor, tokens.dividerColor);
export const StepItemContentWrapper = styled.div.withConfig({
    displayName: "StepItem.styles__StepItemContentWrapper",
    componentId: "sc-bb36c21e-7"
})([
    `&.`,
    `{width:100%;`,
    `{padding-top:var(`,
    `);padding-right:0;}`,
    `{padding-top:var(`,
    `);padding-bottom:var(`,
    `);padding-right:0;}}`
], classes.verticalOrientation, StepItemTitle, tokens.contentVerticalPadding, StepItemContent, tokens.contentVerticalPadding, tokens.contentVerticalPadding);
export const StepItemStyled = styled.div.withConfig({
    displayName: "StepItem.styles__StepItemStyled",
    componentId: "sc-bb36c21e-8"
})([
    `position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:1;color:var(`,
    `);&.`,
    `{flex-direction:row;align-items:stretch;`,
    `{width:var(`,
    `);height:100%;}}`,
    `{color:var(`,
    `,`,
    `);}&.`,
    `{`,
    `{cursor:default;}`,
    `{color:var(`,
    `);}}&.`,
    `{color:var(`,
    `);`,
    `{color:var(`,
    `);}}&.`,
    `{flex:0;align-items:center;justify-content:center;flex-direction:row;height:100%;&.`,
    `{min-width:var(`,
    `);min-height:var(`,
    `);}&:not(.`,
    `){width:var(`,
    `);min-height:var(`,
    `);}&.`,
    `,&:not(.`,
    `){&:before,&:after{content:'';display:block;width:calc((var(`,
    `) - var(`,
    `)) / 2);height:var(`,
    `);background:var(`,
    `);}&:not(.`,
    `){&:before,&:after{width:calc((var(`,
    `) - var(`,
    `)) / 2);}}&.`,
    `{flex-direction:column;&:before,&:after{width:var(`,
    `);height:calc((var(`,
    `) - var(`,
    `)) / 2);margin:0 auto;align-self:auto;}&:not(.`,
    `){&:before,&:after{height:calc((var(`,
    `) - var(`,
    `)) / 2);}}&:after{margin:0 auto;}}&.isFirst{&:before{background:transparent;}}&.isLast{&:after{background:transparent;}}}&.`,
    `{&:after,&:before{background:var(`,
    `);}}&.isPrevInactive{&:before{background:var(`,
    `);}}&.isNextInactive{&:after{background:var(`,
    `);}}&.`,
    `{&:before,&:after{background:var(`,
    `);opacity:1;}}&.`,
    `{&:before,&:after{background:transparent;}}}&:not(.`,
    `):not(.`,
    `){&:not(.`,
    `).isNextActive{`,
    `{width:calc(100% - (var(`,
    `) - var(`,
    `)) / 2);}}&.`,
    `{`,
    `{margin-left:calc((var(`,
    `) - var(`,
    `)) / -2);width:calc(100% + (var(`,
    `) - var(`,
    `)) / 2);}}}&.`,
    `{&:not(.`,
    `){`,
    `{cursor:pointer;color:var(`,
    `);}`,
    `{color:var(`,
    `);background:var(`,
    `);border:var(`,
    `) solid var(`,
    `,transparent);}`,
    `{color:var(`,
    `,var(`,
    `));background:var( `,
    `,var(`,
    `) );border:var(`,
    `) solid var(`,
    `,transparent);}}&.`,
    `{`,
    `{color:var(`,
    `);}`,
    `,`,
    `{color:var(`,
    `);background:var(`,
    `);border:none;}}`,
    `{cursor:pointer;}}&.`,
    `{align-items:center;`,
    `{display:flex;flex-direction:column;align-items:center;padding-left:calc(var(`,
    `) / 2);padding-right:calc(var(`,
    `) / 2);`,
    `{width:100%;}`,
    `,`,
    `{padding-right:0;text-align:center;}}}&.`,
    `{cursor:not-allowed;opacity:var(`,
    `);`,
    `,`,
    `{cursor:not-allowed;}}`
], tokens.activeIndicatorColor, classes.verticalOrientation, StepItemDivider, tokens.dividerThickness, StepItemTitle, tokens.completedTitleColor, tokens.activeTitleColor, classes.active, BulletIndicator, StepItemTitle, tokens.activeTitleColor, classes.inactive, tokens.inactiveIndicatorColor, StepItemTitle, tokens.inactiveTitleColor, classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, tokens.activeBulletSize, classes.inactive, classes.active, tokens.activeIndicatorSize, tokens.indicatorSize, tokens.dividerThickness, tokens.dividerColor, classes.hasIndicator, tokens.activeBulletSize, tokens.bulletSize, classes.verticalOrientation, tokens.dividerThickness, tokens.activeIndicatorSize, tokens.indicatorSize, classes.hasIndicator, tokens.activeBulletSize, tokens.bulletSize, classes.inactive, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackground, classes.disabled, tokens.inactiveIndicatorBackground, classes.transparentDivider, classes.simple, classes.verticalOrientation, classes.centered, BulletIndicatorWrapper, tokens.activeIndicatorSize, tokens.indicatorSize, classes.active, BulletIndicatorWrapper, tokens.activeIndicatorSize, tokens.indicatorSize, tokens.activeIndicatorSize, tokens.indicatorSize, classes.hovered, classes.active, StepItemTitle, tokens.completedTitleColorHover, BulletIndicator, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackgroundHover, tokens.dividerThickness, tokens.completedIndicatorBorderHover, Bullet, tokens.completedBulletBackground, tokens.completedIndicatorColorHover, tokens.completedBulletBackgroundHover, tokens.completedIndicatorBackgroundHover, tokens.dividerThickness, tokens.completedBulletBorderHover, classes.inactive, StepItemTitle, tokens.inactiveTitleColorHover, BulletIndicator, Bullet, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackgroundHover, BulletIndicatorWrapper, classes.centered, StepItemContentWrapper, tokens.contentSidePadding, tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, classes.disabled, tokens.disabledOpacity, BulletIndicator, Bullet);
