    /* Copyright (C) 2016 NooBaa */

stepper {
    display: block;
    text-align: center;
    line-height: 3 * @gutter;
    font-size: @font-size4;
    color: rgb(var(--color17));

    > ol {
        .list-no-style();
        counter-reset: step;
        line-height: inherit;

        li + li {
            margin-left: 2 * @gutter;
        }
    }

    .stepper-step {
        @size: 26px;
        counter-increment: step;
        display: inline-block;
        text-transform: capitalize;
        line-height: @size;

        .step-label {
            display: inline-block;
            vertical-align: middle;
            margin-left: @gutter / 4;
        }

        .step-bullet {
            position: relative;
            width: @size + 2;
            height: @size + 2;
            display: inline-block;
            vertical-align: middle;
            font-weight: @font-regular;

            > .step-number, > .step-done {
                position: absolute;
                display: block;
                overflow: hidden;
                backface-visibility: hidden;
                width: @size;
                height: @size;
                border-radius: @size;
                transition:
                    transform 500ms linear,
                    background-color 250ms,
                    border-color 250ms;
            }

            .step-done {
                fill: rgb(var(--color11));
                margin-right: 1px;
            }

            .step-number {
                transform: rotateY(180deg);
                border: 1px solid rgb(var(--color09));
            }
        }

        &.selected {
            ~ .stepper-step {
                color: rgb(var(--color09));
            }

            .step-bullet > .step-number {
                color: rgb(var(--color02));
                border-color: rgb(var(--color20));
                background-color: rgb(var(--color20));
            }

            .step-bullet, ~ .stepper-step .step-bullet {
                > .step-number {
                    transform: rotateY(0deg);
                }

                > .step-done {
                    transform: rotateY(180deg);
                }
            }
        }

    }
}
