.StepIndicator{display:flex;position:relative;justify-content:space-between;width:100%;--main-color: var(--c-saturn);--bg-color: var(--c-white);--circle-text-color: var(--c-white);--text-color: var(--c-pluton)}.StepIndicator_onSurface{--main-color: var(--c-white);--bg-color: var(--c-saturn);--circle-text-color: var(--c-uranus);--text-color: var(--c-uranus)}.StepIndicator__Step{display:flex;align-items:center;flex-direction:column;position:relative}.StepIndicator__Step_hasText{flex:1 1 auto}.StepIndicator:before{content:"";position:absolute;top:13px;width:100%;height:4px;background:var(--main-color);z-index:1}.StepIndicator__Step:first-child:before,.StepIndicator__Step:last-child:before{content:"";position:absolute;top:0;width:50%;height:100%;background:var(--bg-color);z-index:1}.StepIndicator__Step:first-child:before{left:0}.StepIndicator__Step:last-child:before{right:0}.StepIndicator__StepCircle{display:flex;align-items:center;justify-content:center;border-radius:50%;width:30px;height:30px;flex:0 0 30px;background:var(--main-color);color:var(--circle-text-color);font-size:18px;z-index:2}.StepIndicator__Step_active .StepIndicator__StepCircle{background:var(--c-brand-red);--circle-text-color: var(--c-white)}.StepIndicator__StepIcon{width:24px;height:24px}.StepIndicator__StepText{color:var(--text-color);text-align:center;margin-top:8px;opacity:40%;z-index:2;max-width:100px}.StepIndicator__Step_active .StepIndicator__StepText{--text-color: var(--c-pluton);opacity:100%}