.var-steps{width:100%;display:flex;justify-content:space-between;overflow:hidden}:root{--step-tag-size: 20px;--step-tag-background: #9e9e9e;--step-tag-font-size: var(--font-size-md);--step-tag-color: var(--color-on-primary);--step-tag-active-color: var(--color-primary);--step-tag-margin: 4px 0;--step-tag-icon-size: var(--font-size-lg);--step-content-font-size: var(--font-size-md);--step-content-color: rgba(0, 0, 0, .38);--step-content-active-color: #000;--step-line-background: #000;--step-line-gap: 8px;--step-vertical-tag-margin: 0 4px;--step-vertical-min-height: 50px}.var-step-tag{width:var(--step-tag-size);height:var(--step-tag-size);background:var(--step-tag-background);display:flex;font-size:var(--step-tag-font-size);align-items:center;justify-content:center;border-radius:50%;color:var(--step-tag-color);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.3s var(--cubic-bezier)}.var-step-content{font-size:var(--step-content-font-size);color:var(--step-content-color);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.3s var(--cubic-bezier)}.var-step{position:relative;flex:1;-webkit-tap-highlight-color:transparent}.var-step:last-child .var-step__horizontal-line{width:0}.var-step:last-child .var-step__vertical-line{height:0}.var-step__horizontal{display:flex;flex-direction:column;align-items:center}.var-step__horizontal-tag{margin:var(--step-tag-margin);width:var(--step-tag-size);height:var(--step-tag-size);background:var(--step-tag-background);display:flex;font-size:var(--step-tag-font-size);align-items:center;justify-content:center;border-radius:50%;color:var(--step-tag-color);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.3s var(--cubic-bezier)}.var-step__horizontal-tag--active{background:var(--step-tag-active-color)}.var-step__horizontal-content{font-size:var(--step-content-font-size);color:var(--step-content-color);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.3s var(--cubic-bezier)}.var-step__horizontal-content--active{color:var(--step-content-active-color)}.var-step__horizontal-line{position:absolute;top:calc(calc(var(--step-tag-size) + var(--step-line-gap)) / 2);left:calc(50% + calc(var(--step-tag-size) + var(--step-line-gap)) / 2);width:calc(100% - calc(var(--step-tag-size) + var(--step-line-gap)));height:1px;transform:scaleY(.5);background:var(--step-line-background)}.var-step__vertical{display:flex;height:100%;min-height:var(--step-vertical-min-height)}.var-step__vertical-tag{flex-shrink:0;margin:var(--step-vertical-tag-margin);width:var(--step-tag-size);height:var(--step-tag-size);background:var(--step-tag-background);display:flex;font-size:var(--step-tag-font-size);align-items:center;justify-content:center;border-radius:50%;color:var(--step-tag-color);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.3s var(--cubic-bezier)}.var-step__vertical-tag--active{background:var(--step-tag-active-color)}.var-step__vertical-content{font-size:var(--step-content-font-size);color:var(--step-content-color);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.3s var(--cubic-bezier)}.var-step__vertical-content--active{color:var(--step-content-active-color)}.var-step__vertical-line{position:absolute;height:calc(100% - calc(var(--step-tag-size) + var(--step-line-gap)));left:calc(calc(var(--step-tag-size) + var(--step-line-gap)) / 2);top:calc(calc(var(--step-tag-size) + var(--step-line-gap)) - var(--step-line-gap) / 2);width:1px;transform:scaleX(.5);background:var(--step-line-background)}.var-step__icon[var-step-cover]{font-size:var(--step-tag-icon-size)}