body frml-stepper,body frml-step,body frml-step-progress{display:block}body frml-stepper{display:block;--steps-icon-size: 28px;--progress-radius: 3px}body frml-stepper nav.steps{background:var(--color-surface-xlight);box-sizing:border-box;display:flex;padding:var(--space-l);width:100%}body frml-stepper nav.steps frml-step{align-items:center;box-sizing:border-box;display:grid;gap:var(--space-xxxs);grid-template-columns:auto var(--steps-icon-size) auto;grid-template-rows:auto auto;width:100%}body frml-stepper nav.steps frml-step button{align-items:center;background:var(--color-primary);border:3px solid var(--color-primary);border-radius:100px;display:flex;height:var(--steps-icon-size);justify-content:center;padding:0;width:var(--steps-icon-size)}body frml-stepper nav.steps frml-step button frml-icon{margin:0;width:calc(var(--steps-icon-size)/2)}body frml-stepper nav.steps frml-step button frml-icon svg{fill:#fff}body frml-stepper nav.steps frml-step button.locked{cursor:default}body frml-stepper nav.steps frml-step frml-step-progress{background:var(--color-primary);border-radius:var(--progress-radius);height:5px;width:100%}body frml-stepper nav.steps frml-step frml-step-progress:first-of-type{border-bottom-left-radius:0;border-top-left-radius:0}body frml-stepper nav.steps frml-step frml-step-progress:last-of-type{border-bottom-right-radius:0;border-top-right-radius:0}body frml-stepper nav.steps frml-step label{grid-column:1/-1;padding-top:var(--space-xxs);text-align:center}body frml-stepper nav.steps frml-step:first-child{grid-template-columns:var(--steps-icon-size) auto;width:50%}body frml-stepper nav.steps frml-step:first-child frml-step-progress:first-of-type{border-bottom-left-radius:var(--progress-radius);border-top-left-radius:var(--progress-radius)}body frml-stepper nav.steps frml-step:first-child label{text-align:left}body frml-stepper nav.steps frml-step:last-child{grid-template-columns:auto var(--steps-icon-size);width:50%}body frml-stepper nav.steps frml-step:last-child frml-step-progress:last-of-type{border-bottom-right-radius:var(--progress-radius);border-top-right-radius:var(--progress-radius)}body frml-stepper nav.steps frml-step:last-child label{text-align:right}body frml-stepper nav.steps frml-step.current button{background:none}body frml-stepper nav.steps frml-step.current button span.number{display:none}body frml-stepper nav.steps frml-step.current button frml-icon{display:none}body frml-stepper nav.steps frml-step.current label{font-weight:700}body frml-stepper nav.steps frml-step.current frml-step-progress.post{background:var(--color-surface-xdark)}body frml-stepper nav.steps frml-step.done button span.number{display:none}body frml-stepper nav.steps frml-step.todo button{background:none;border-color:var(--color-surface-xdark)}body frml-stepper nav.steps frml-step.todo button span.number{display:none}body frml-stepper nav.steps frml-step.todo button frml-icon{display:none}body frml-stepper nav.steps frml-step.todo frml-step-progress{background:var(--color-surface-xdark)}body frml-stepper nav.steps frml-step.todo label{color:var(--color-ink-xlight)}body frml-stepper nav.steps.steps-count-1{max-width:400px}body frml-stepper nav.steps.steps-count-2{max-width:400px}body frml-stepper nav.steps.steps-count-3{max-width:600px}body frml-stepper nav.steps.steps-count-4{max-width:800px}