.steps {
    margin-bottom: map-get($spacers, 5);

    &-wrapper {
        display: flex;

        margin: {
            left: auto;
            right: auto;
        }
    }

    &-title {
        text-align: center;
        margin-bottom: 1em;
    }
}

.step {
    flex: 1;
    position: relative;

    &__label {
        display: block;
    }

    .steps--dots & {
        &::after,
        &::before {
            content: ' ';
            display: block;
            position: absolute;
        }

        &::before {
            background-color: rgba($primary, .3);
        }

        &::after {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: $white;
        }

        &.active::after {
            background-color: $secondary;
        }
    }

    .steps--images &__header {
        .step__index {
            bottom: -10px;
            left: 45%;
            width: 2rem;
            height: 2rem;
            color: $white;
            display: block;
            line-height: 2rem;
            text-align: center;
            border-radius: 50%;
            position: absolute;
            font-size: $font-size-lg;
            background-color: $secondary;
            transform: translateX(-100%);
        }

        img {
            height: 4rem;
            display: block;
        }
    }
}

@include media-breakpoint-up(lg) {
    .steps--dots {
        .steps-wrapper {
            max-width: 80%;
            justify-content: center;
            padding-top: map-get($spacers, 5);
        }
    }

    .step {
        .steps--dots & {
            &::before {
                left: 0;
                top: -50px;
                width: 100%;
                height: 24px;
            }
        
            &::after {
                left: 50%;
                top: -46px;
            }
    
            &:first-child::before {
                left: 50%;
                width: 50%;
                border-radius: 10rem 0 0 10rem;
            }
        
            &:first-child::after {
                transform: translateX(4px);
            }
        
            &:last-child::before {
                width: 50%;
                border-radius: 0 10rem 10rem 0;
            }
        
            &:last-child::after {
                transform: translateX(-20px);
            }
        }

        .steps--images &__label {
            color: $primary;
            font-size: $font-size-sm;
            
            padding: {
                left: map-get($spacers, 4);
                right: map-get($spacers, 4);
            }
        }

        .steps--images &__header {
            background-color: $gray-200;
            margin-bottom: map-get($spacers, 4);
    
            padding: {
                top: map-get($spacers, 3);
                bottom: map-get($spacers, 3);
            }
    
            > div {
                position: relative;
            }
    
            img {
                margin: 0 auto;
            }
        }

        .steps--images &:first-child &__header {
            border-radius: 10rem 0 0 10rem;
        }
    
        .steps--images &:last-child &__header {
            border-radius: 0 10rem 10rem 0;
        }

        &__label {
            text-align: center;
        }
    }
}

@include media-breakpoint-down(md) {
    .steps {
        &-wrapper {
            flex-direction: column;
        }
    }

    .step {
        .steps--dots & {
            padding: {
                top: map-get($spacers, 3);
                left: map-get($spacers, 5);
                bottom: map-get($spacers, 3);
            }
    
            &::after {
                top: 50%;
                left: 4px;
                transform: translateY(-50%);
            }
    
            &::before {
                top: 0;
                left: 0;
                width: 24px;
                height: 100%;
            }
    
            &:first-child::before {
                top: auto;
                bottom: 0;
                height: 70%;
                border-radius: 10rem 10rem 0 0;
            }
    
            &:first-child::after {
                top: 30%;
                transform: translateY(4px);
            }
    
            &:last-child::before {
                top: 0;
                height: 70%;
                border-radius: 0 0 10rem 10rem;
            }
    
            &:last-child::after {
                top: 70%;
                transform: translateY(-20px);
            }
        }

        .steps--images & {
            display: flex;
            align-items: center;
            
            &:not(:last-child) {
                margin-bottom: map-get($spacers, 5);
            }
        }

        .steps--images &__header {
            margin-right: map-get($spacers, 5);

            > div {
                position: relative;
            }
        }
    }
}