import styled, { css } from "styled-components";
import { component, mergeConfig } from "../../../../engines";
import { addFocus } from "../../../../mixins";
import { classes, tokens } from "../../Steps.tokens";
import { spinnerConfig, spinnerTokens } from "../../../Spinner";
const mergedConfig = mergeConfig(spinnerConfig);
const Spinner = component(mergedConfig);
export const SpinnerStyled = styled(Spinner).withConfig({
    displayName: "StepItem.styles__SpinnerStyled",
    componentId: "sc-78a948c9-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-78a948c9-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-78a948c9-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-78a948c9-3"
})([
    `display:flex;align-items:center;box-sizing:content-box;flex:0;width:100%;&.`,
    `{min-height:var(`,
    `);}&:not(.`,
    `){min-height:var(`,
    `);}&:not(.`,
    `).`,
    `{padding-right:var(`,
    `);}&.`,
    `{flex-direction:column;align-items:center;&.`,
    `{min-width:var(`,
    `);}&:not(.`,
    `){min-width:var(`,
    `);}}&.`,
    `{justify-content:center;}`
], classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.simple, classes.verticalOrientation, tokens.verticalContentPaddingLeft, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.centered);
export const BulletSlot = styled.div.withConfig({
    displayName: "StepItem.styles__BulletSlot",
    componentId: "sc-78a948c9-4"
})([
    `display:flex;align-items:center;justify-content:center;flex-shrink:0;.`,
    ` &{}`
], classes.hasIndicator);
export const BulletIndicator = styled.button.withConfig({
    displayName: "StepItem.styles__BulletIndicator",
    componentId: "sc-78a948c9-5"
})([
    `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;}`
], 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.125rem',
    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.25rem',
    outlineSize: '0.0625rem',
    outlineRadius: '50%',
    outlineColor: `var(${tokens.focusColor})`
}), classes.inactive, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorBackground);
export const Bullet = styled(BulletIndicator).withConfig({
    displayName: "StepItem.styles__Bullet",
    componentId: "sc-78a948c9-6"
})([
    `width:var(`,
    `);height:var(`,
    `);border:var(`,
    `,var(`,
    `)) solid var(`,
    `,var(`,
    `,transparent));background:var(`,
    `,var(`,
    `));&.`,
    `{width:var(`,
    `);height:var(`,
    `);border:var(`,
    `,var(`,
    `)) var(`,
    `,var(`,
    `));background:var(`,
    `,var(`,
    `));}&.`,
    `{color:var(`,
    `);background:var(`,
    `,var(`,
    `));border:var(`,
    `,var(`,
    `)) solid var(`,
    `,transparent);}`
], tokens.bulletSize, tokens.bulletSize, tokens.bulletBorderThickness, tokens.dividerThickness, tokens.completedBulletBorder, tokens.completedIndicatorBorder, tokens.completedBulletBackground, tokens.completedIndicatorBackground, classes.active, tokens.activeBulletSize, tokens.activeBulletSize, tokens.activeBulletBorderThickness, tokens.dividerThickness, tokens.bulletActiveIndicatorBorder, tokens.activeIndicatorBorder, tokens.bulletActiveBackground, tokens.activeIndicatorBackground, classes.inactive, tokens.inactiveIndicatorColor, tokens.inactiveBulletBackground, tokens.inactiveIndicatorBackground, tokens.bulletBorderThickness, tokens.dividerThickness, tokens.inactiveBulletBorder);
export const StepItemDivider = styled.div.withConfig({
    displayName: "StepItem.styles__StepItemDivider",
    componentId: "sc-78a948c9-7"
})([
    `flex:1;width:100%;height:var(`,
    `);background:var(`,
    `);&.`,
    `{background:var(`,
    `,var(`,
    `));}&.`,
    `{background:var(`,
    `,var(`,
    `));}.`,
    `{&.`,
    `{background:var(`,
    `,var(`,
    `));background-size:200% 100%;background-position:0% 0%;}&.`,
    `{background:var(`,
    `,var(`,
    `));background-size:200% 100%;background-position:0% 0%;}}&.`,
    `{background:var(`,
    `,var(`,
    `));background-size:200% 100%;background-position:100% 0%;}&.`,
    `{width:var(`,
    `);background:var(`,
    `);&.`,
    `{background:var(`,
    `,var(`,
    `));}&.`,
    `{background:var(`,
    `,var(`,
    `));}}&.`,
    `{background:var(`,
    `);&.`,
    `{background:var(`,
    `,var(`,
    `));}&.`,
    `.`,
    `{background:var(`,
    `,var(`,
    `));}}&.`,
    `{opacity:var(`,
    `);cursor:not-allowed;}&.`,
    `{background:transparent;opacity:0;}`
], tokens.dividerThickness, tokens.dividerColor, classes.activeItem, tokens.dividerActiveGradientColor, tokens.dividerColor, classes.nextActive, tokens.dividerGradientColor, tokens.dividerColor, classes.centered, classes.nextActive, tokens.dividerGradientColor, tokens.dividerColor, classes.activeItem, tokens.dividerActiveGradientColor, tokens.dividerColor, classes.prevCompleted, tokens.dividerGradientColor, tokens.dividerColor, classes.verticalOrientation, tokens.dividerThickness, tokens.dividerColor, classes.nextActive, tokens.dividerVerticalGradientColor, tokens.dividerColor, classes.activeItem, tokens.dividerActiveVerticalGradientColor, tokens.dividerColor, classes.inactive, tokens.inactiveIndicatorBackground, classes.activeItem, tokens.dividerActiveGradientColor, tokens.inactiveIndicatorBackground, classes.verticalOrientation, classes.activeItem, tokens.dividerActiveVerticalGradientColor, tokens.inactiveIndicatorBackground, classes.disabled, tokens.disabledOpacity, classes.transparentDivider);
export const StepItemCenteredDivider = styled.div.withConfig({
    displayName: "StepItem.styles__StepItemCenteredDivider",
    componentId: "sc-78a948c9-8"
})([
    `flex:1;width:100%;height:var(`,
    `);background:var(`,
    `);.`,
    ` &.`,
    `{background:var(`,
    `,var(`,
    `));background-size:200% 100%;background-position:0% 0%;}&.`,
    `{background:var(`,
    `,var(`,
    `));background-size:200% 100%;background-position:100% 0%;}&.`,
    `{width:var(`,
    `);}&.`,
    `{background:var(`,
    `);}&.`,
    `{opacity:var(`,
    `);cursor:not-allowed;}&.`,
    `{background:transparent;opacity:0;}`
], tokens.dividerThickness, tokens.dividerColor, classes.centered, classes.nextActive, tokens.dividerGradientColor, tokens.dividerColor, classes.prevCompleted, tokens.dividerGradientColor, tokens.dividerColor, classes.verticalOrientation, tokens.dividerThickness, classes.inactive, tokens.inactiveIndicatorBackground, classes.disabled, tokens.disabledOpacity, classes.transparentDivider);
export const StepItemContentWrapper = styled.div.withConfig({
    displayName: "StepItem.styles__StepItemContentWrapper",
    componentId: "sc-78a948c9-9"
})([
    `&.`,
    `{`,
    `{padding-top:0;}}&.`,
    `{width:100%;`,
    `{padding-right:0;}`,
    `{padding-top:var(`,
    `);padding-bottom:var(`,
    `);padding-right:0;}}&.`,
    `.`,
    `{`,
    `{padding-top:0;}}`
], classes.noTitle, StepItemContent, classes.verticalOrientation, StepItemTitle, StepItemContent, tokens.contentVerticalPadding, tokens.contentVerticalPadding, classes.verticalOrientation, classes.noTitle, StepItemContent);
export const base = css([
    `position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:1;color:var(`,
    `);&.`,
    `.`,
    `{flex:0 0 auto;}&.`,
    `{flex-direction:row;align-items:stretch;&.`,
    `{`,
    `.`,
    `,`,
    `{margin-top:calc((var(`,
    `) - var(`,
    `)) / 2);}& `,
    `.`,
    `{flex:unset;height:calc(100% - (var(`,
    `) - var(`,
    `)) / 2 - var(`,
    `));}& `,
    `{padding-top:calc((var(`,
    `) - var(`,
    `)) / 2);}}&:not(.`,
    `){`,
    `.`,
    `,`,
    `{margin-top:calc((var(`,
    `) - var(`,
    `)) / 2);}& `,
    `.`,
    `{flex:unset;height:calc(100% - (var(`,
    `) - var(`,
    `)) / 2 - var(`,
    `));}& `,
    `{padding-top:0;margin-top:calc((var(`,
    `) - var(`,
    `)) / 2);}}}`,
    `{color:var(`,
    `,`,
    `);}&.`,
    `{`,
    `{cursor:default;}`,
    `{color:var(`,
    `);}}&.`,
    `{color:var(`,
    `);`,
    `{color:var(`,
    `);}}&: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(`,
    `,var(`,
    `)) solid var(`,
    `,var(`,
    `,transparent));}}&.`,
    `{> `,
    ` > `,
    `{color:var(`,
    `);}> `,
    ` `,
    `{color:var(`,
    `);background:var(`,
    `);border:none;}> `,
    ` `,
    `{color:var(`,
    `);background:var(`,
    `,var(`,
    `));border:var(`,
    `,var(`,
    `)) solid var(`,
    `,transparent);}}> `,
    `{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, classes.verticalLastItem, classes.verticalOrientation, classes.hasIndicator, BulletIndicator, classes.active, SpinnerStyled, tokens.indicatorSize, tokens.activeIndicatorSize, StepItemDivider, classes.nextActive, tokens.activeIndicatorSize, tokens.indicatorSize, tokens.indicatorSize, StepItemTitle, tokens.indicatorSize, tokens.titleLineHeight, classes.hasIndicator, Bullet, classes.active, SpinnerStyled, tokens.bulletSize, tokens.activeBulletSize, StepItemDivider, classes.nextActive, tokens.activeBulletSize, tokens.bulletSize, tokens.bulletSize, StepItemTitle, tokens.bulletSize, tokens.titleLineHeight, StepItemTitle, tokens.completedTitleColor, tokens.activeTitleColor, classes.active, BulletIndicator, StepItemTitle, tokens.activeTitleColor, classes.inactive, tokens.inactiveIndicatorColor, StepItemTitle, tokens.inactiveTitleColor, 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, StepItemContentWrapper, StepItemTitle, tokens.completedTitleColorHover, BulletIndicatorWrapper, BulletIndicator, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackgroundHover, tokens.dividerThickness, tokens.completedIndicatorBorderHover, BulletIndicatorWrapper, Bullet, tokens.completedBulletBackground, tokens.completedIndicatorColorHover, tokens.completedBulletBackgroundHover, tokens.completedIndicatorBackgroundHover, tokens.bulletBorderThickness, tokens.dividerThickness, tokens.completedBulletBorderHover, tokens.completedIndicatorBorderHover, classes.inactive, StepItemContentWrapper, StepItemTitle, tokens.inactiveTitleColorHover, BulletIndicatorWrapper, BulletIndicator, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackgroundHover, BulletIndicatorWrapper, Bullet, tokens.inactiveIndicatorColorHover, tokens.inactiveBulletBackgroundHover, tokens.inactiveIndicatorBackgroundHover, tokens.bulletBorderThickness, tokens.dividerThickness, tokens.inactiveBulletBorder, BulletIndicatorWrapper, classes.centered, StepItemContentWrapper, tokens.contentSidePadding, tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, classes.disabled, tokens.disabledOpacity, BulletIndicator, Bullet);
