.stepper{align-items:center;display:flex}.stepper__step{border-radius:var(--radius-compact);box-sizing:border-box;z-index:1;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;display:flex;position:relative}.stepper__step--done{background-color:var(--surface-action-stepper-done);border:var(--border-width-3) solid var(--border-action-stepper-done);box-shadow:0 0 0 var(--border-width-3) var(--border-action-stepper-done)}.stepper__step--active{background-color:var(--surface-action-stepper-active);border:var(--border-width-1) solid var(--border-action-stepper-active);box-shadow:0 0 0 var(--border-width-3) var(--border-action-stepper-ring-active)}.stepper__step--pending{background-color:var(--surface-action-stepper-pending);border:var(--border-width-1) solid var(--border-action-stepper-pending)}.stepper__step--clickable{cursor:pointer;padding:0}.stepper__connector{flex:1;height:1px}.stepper__connector--done{background-color:var(--surface-action-stepper-connector-active);box-shadow:0 0 0 var(--border-width-3) var(--border-action-stepper-ring-active)}.stepper__connector--pending{background-color:var(--surface-action-stepper-connector-pending)}.stepper--labeled{padding-bottom:var(--space-24)}.stepper__item{display:flex;position:relative}.stepper__label{top:calc(100% + var(--space-8));font-family:var(--font-family-secondary), sans-serif;font-size:var(--font-size-caption);line-height:var(--line-height-20);color:var(--text-body);white-space:nowrap;position:absolute;left:50%;transform:translate(-50%)}.stepper>.contents:first-child .stepper__label{left:0;transform:none}.stepper>.contents:last-child .stepper__label{left:auto;right:0;transform:none}.stepper__label--active{color:var(--text-strong);font-weight:600}@media (max-width:767px){.stepper__label--done,.stepper__label--pending{display:none}}