:root{--er-step-head-size: 36px;--er-step-vertical-space: 120px;--er-step-text-color: #999}:root .er-step--large{--er-step-head-size: 48px}:root .er-step--small{--er-step-head-size: 24px}.er-step{display:flex;padding:20px 0}.er-step-item{flex:1}.er-step-item__head{position:relative}.er-step-item__head:before,.er-step-item__head:after{content:"";position:absolute;top:calc(50% - 1px);width:50%;height:2px;background-color:var(--er-border)}.er-step-item__head:before{left:0}.er-step-item__head:after{right:0}.er-step-item__head.is-first:before{display:none}.er-step-item__head.is-last:after{display:none}.er-step-item__box{position:relative;width:var(--er-step-head-size);height:var(--er-step-head-size);line-height:calc(var(--er-step-head-size) - 4px);font-size:calc(var(--er-step-head-size) / 2);border:2px solid var(--er-border);border-radius:calc(var(--er-step-head-size) / 2);background:var(--er-white);box-sizing:border-box;z-index:1;margin:0 auto;color:var(--er-step-text-color);text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.er-step-item__text{text-align:center;color:var(--er-step-text-color)}.er-step-item__title{font-size:16px;margin-top:10px}.er-step-item__desc{font-size:12px;margin-top:5px}.er-step-item--active .er-step-item__head:before,.er-step-item--active .er-step-item__head:after{background-color:var(--er-primary)}.er-step-item--active .er-step-item__box{background-color:var(--er-primary);border-color:var(--er-primary);color:var(--er-white)}.er-step-item--active .er-step-item__title{color:var(--er-primary)}.er-step-item:first-child .er-step-item__head:before{display:none}.er-step-item:last-child .er-step-item__head:after{display:none}.er-step.is-vertical{flex-direction:column;align-items:self-start}.er-step.is-vertical .er-step-item{flex:none;height:var(--er-step-vertical-space);width:100%;display:flex;align-items:start}.er-step.is-vertical .er-step-item__head:after,.er-step.is-vertical .er-step-item__head:before{width:2px;height:calc(var(--er-step-vertical-space) / 2);left:calc(50% - 1px)}.er-step.is-vertical .er-step-item__head:before{top:calc(50% - var(--er-step-vertical-space) / 2)}.er-step.is-vertical .er-step-item__head:after{top:50%}.er-step.is-vertical .er-step-item__box{margin:0}.er-step.is-vertical .er-step-item__text{text-align:left;padding-left:10px}.er-step.is-vertical .er-step-item__title{margin-top:0}.er-step.is-vertical .er-step-item:last-child{height:auto}