@use '../../variables' as *;

$b: '.steps';

#{$b} {
    overflow: hidden;
    position: relative;

    &::before {
        background-image: linear-gradient(-90deg, rgba($content-bg, 0%), $content-bg);
        content: none;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 4px * 8;
        z-index: 1;

        .content_fill_grey &,
        .content__block_fill_grey & {
            background-image: linear-gradient(-90deg, rgba($content-bg-grey, 0%), $content-bg-grey);
        }
    }

    &::after {
        background-image: linear-gradient(90deg, rgba($content-bg, 0%), $content-bg);
        content: '';
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 4px * 8;
        z-index: 1;

        @media (--tablet-landscape-up) {
            content: none;
        }

        .content_fill_grey &,
        .content__block_fill_grey & {
            background-image: linear-gradient(90deg, rgba($content-bg-grey, 0%), $content-bg-grey);
        }
    }

    &_1 {
    }

    &_2 {
        &::before {
            content: '';

            @media (--tablet-landscape-up) {
                content: none;
            }
        }
    }

    &_3 {
        &::before {
            content: '';

            @media (--tablet-landscape-up) {
                content: none;
            }
        }
    }

    &__list {
        counter-reset: index;
        display: flex;
        position: relative;

        #{$b}_1 & {
            left: 0;
        }

        #{$b}_2 & {
            left: -25%;

            @media (--tablet-landscape-up) {
                left: 0;
            }
        }

        #{$b}_3 & {
            left: -50%;

            @media (--tablet-landscape-up) {
                left: 0;
            }
        }
    }

    &__item {
        align-items: center;
        display: flex;

        &:not(:first-child) {
            margin-left: 4px * 2;
        }

        &:last-child {
            &::after {
                content: none;
            }
        }

        &::before {
            align-items: center;
            background-color: $steps-item-number-bg;
            border: $steps-item-number-border-width solid $steps-item-number-border-color;
            border-radius: 50%;
            color: $steps-item-number-color;
            content: counter(index);
            counter-increment: index;
            display: flex;
            flex-shrink: 0;
            height: 4px * 6;
            justify-content: center;
            width: 4px * 6;
        }

        &::after {
            border-bottom: 2px solid $steps-item-arrow-bg;
            border-right: 2px solid $steps-item-arrow-bg;
            content: '';
            height: 4px * 1.5;
            margin-left: 4px * 1.5;
            transform: rotate(-45deg);
            width: 4px * 1.5;
        }

        &_active {
            &::before {
                background-color: $steps-item-active-number-bg;
                color: $steps-item-active-number-color;

                @include dark-border-disable;
            }

            &::after {
                border-bottom-color: $steps-item-active-arrow-bg;
                border-right-color: $steps-item-active-arrow-bg;
            }
        }
    }

    &__label {
        color: $steps-label-color;
        margin-left: 4px * 2;
        white-space: nowrap;

        @include font($steps-label-font);
    }
}