.stepper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100px;
    font-size: 1rem;

    &-item {
        $self: &;
        position: relative;
        width: 100%;
        text-align: center;

        &-bar {
            position: absolute;
            height: 4px;
            width: 100%;
            background-color: $stepper-bg;

            &-number {
                font-size: 1em;
                height: 40px;
                width: 40px;
                line-height: 32px;
                border-radius: 50%;
                background-color: $light;
                position: relative;
                margin: 0 auto;
                top: -18px;
                border: 4px solid $stepper-bg;
                z-index: 2;
                font-weight: 500;
                color: $grey;
            }
        }

        &.completed,
        &.current {
            #{ $self }-bar-number {
                border: 4px solid $brand-primary;
                color: $brand-primary;
            }
        }

        &.completed {
            #{ $self }-bar-number {
                color: $white;
                background-color: $brand-primary;
            }

            #{ $self }-name {
                color: $dark;
            }
        }

        &.current {
            #{ $self }-name {
                color: $brand-primary;
            }
        }

        &-name {
            font-size: 1em;
            font-weight: 500;
            position: absolute;
            top: 28px;
            transform: translateX(-50%);
            width: 100%;
            color: $grey;
        }

        &:first-child {
            #{ $self }-bar {
                right: 0;
                width: 50%;

                &-number {
                    margin-left: -20px;
                }
            }
        }

        &:last-child {
            #{ $self }-bar {
                left: 0;
                width: 50%;

                &-number {
                    margin-right: -20px;
                }

            }

            &.completed,
            &.current {
                #{ $self }-bar {

                    &:after {
                        left: -100% !important;
                        width: 200% !important;
                    }
                }
            }
        }

        &:not(:first-child) {

            &.completed,
            &.current {
                #{ $self }-bar {
                    &:after {
                        content: "";
                        display: block;
                        width: 100%;
                        position: absolute;
                        bottom: 0;
                        left: -50%;
                        z-index: 1;
                        border-bottom: 4px solid $brand-primary;
                    }
                }
            }
        }
    }
}

@media(max-width: 767px) {
    .stepper {
        font-size: 0.75rem;

        &-item {
            &-bar {
                &-number {
                    height: 32px;
                    width: 32px;
                    line-height: 24px;
                    top: -12px;
                }
            }

            &-name {
                display: none;
            }
        }

    }
}