.Hylia-o-stepper {
    width: 100%;

    &__navigation {
        display: flex;
        align-items: center;
        padding: 0 2rem;
        border-bottom: 0.2rem solid @minion;
    }

    &__content {
        padding: 3rem;
        background-color: @stormtrooper;
    }

    &__step {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 4.5rem;
        margin-bottom: -0.2rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding: 0.5rem 1rem;
        background-color: @acolyte;
        border: 0.1rem solid @minion;
        border-bottom-width: 0.2rem;
        font-size: 1.2rem;
        color: @knight;

        &:not(:last-child) {
            position: relative;

            &:before {
                content: "";
                position: absolute;
                top: 50%;
                right: -0.5rem;
                display: block;
                width: 0.8rem;
                height: 0.8rem;
                margin-top: -0.4rem;
                background-color: @acolyte;
                border: 0.1rem solid @minion;
                border-bottom: none;
                border-left: none;
                transform: rotate(45deg);
            }
        }

        @media screen and (min-width: @md) {
            flex: 1 100%;
            padding-right: 2rem;
            padding-left: 2rem;
            font-size: 1.4rem;
        }

        &__indicator {
            flex-shrink: 0;
            width: 2.4rem;
            height: 2.4rem;
            line-height: 2.4rem;
            border-radius: 50%;
            border: 0.1rem solid @knight;
            text-align: center;
        }

        &__label {
            display: none;
            margin-left: 0.8rem;

            @media screen and (min-width: @md) {
                display: block;
            }
        }

        &--active {
            flex-grow: 1;
            background-color: @stormtrooper;
            border-bottom-color: transparent;
            color: @terran;

            &:not(:last-child):before {
                background-color: @stormtrooper;
            }

            .Hylia-o-stepper__step__indicator {
                border-color: @terran;
            }

            .Hylia-o-stepper__step__label {
                display: block;
            }
        }

        &--completed {
            background-color: @stormtrooper;
            color: @vader;

            &:not(:last-child):before {
                background-color: @stormtrooper;
            }

            .Hylia-o-stepper__step__indicator {
                border-color: @vader;
            }
        }
    }

    &__step + &__step {
        border-left: none;
    }
}