@use '../../scss/config.scss' as *;

$size: 20px;

.stepper {
    --border: var(--w-stepper-color-border, var(--w-color-primary-50));
    --active: var(--w-stepper-color-active, var(--w-color-info));
    --complete: var(--w-stepper-color-complete, var(--w-color-success));

    @include layout(flex, default, column);
    @include spacing(0);
    @include size('w100%');

    list-style-type: none;

    &:not(.borderless) .number {
        border: 2px solid var(--border);
    }

    li {
        @include layout(flex, sm, v-center);
        @include typography(normal);
        @include spacing(m0);

        flex: 1;

        &.connect {
            @include position(relative);

            &::before {
                @include position(absolute, l16px);
                @include background(var(--border));
                @include size(w2px);

                top: -50%;
                bottom: calc(50% + $size);

                content: '';
            }

            &.completed::before,
            &.active::before {
                @include background(var(--complete));
            }
        }

        &.active .number {
            border-color: var(--active);
            color: var(--active);
        }

        &.completed .number {
            border-color: var(--complete);
            color: var(--complete);
        }

        .number {
            @include size($size);
            @include border-radius(max);
            @include layout(flex, center);
            @include spacing(p-md);
            @include typography(bold, md);

            svg {
                @include position(absolute);
            }
        }

        .container {
            @include layout(flex, column);
        }

        .muted {
            @include typography(primary-20, md);
        }
    }
}

@include media(xs) {
    .stepper:not(.vertical) {
        @include layout(row);

        li {
            @include layout(column, xs, v-center);

            &.connect::before {
                @include size(h2px);

                width: auto;
                top: 16px;
                left: calc(-50%);
                right: calc(50% + $size);
            }

            .container {
                @include layout(v-center);
            }
        }
    }
}