@circle-radius: 18px;
@gap: 70px;
@gap-width: 2px;
@valid-width: 2px;

ul.sdc-wizard-step {
    padding: 0;
    margin: 0;

    li.step {
        position: relative;
        list-style: none;

        .step-wrapper {
            line-height: @circle-radius*2;
            height: @circle-radius*2;
            margin-bottom: @gap;

            button.step-index {
                ._w-sdc-wizard-step-btn(@circle-radius);
                z-index: 99;
                display: inline-block;

                &.valid {
                    display: inline-block;
                }

            }

            span.step-name {
                .b_7;
                line-height: @circle-radius;
                display: inline-block;
                word-wrap: break-word;
                width: calc(~"100%" - @circle-radius*2 + 4);
                vertical-align: middle;
                padding-left: 10px;
                white-space: normal;

                &.selected {
                    .a_7;
                    font-weight: bold;
                }

                &.disabled {
                    border: none;
                    background-color: transparent;
                }

            }
        }

        .step-seperator {
            border-right: @gap-width solid @color_n;
            height: @gap + @circle-radius*2;
            position: absolute;
            top: @circle-radius*2-@circle-radius;
            left: @circle-radius - @gap-width/2;
        }

    }

    li.step:last-child {
        .step-seperator {
            display: none;
        }
    }

}