@use "sass:map";
@use "./steps.config" as config;
@use "../../01-core/external" as *;
@use "../../01-core/prefix" as *;

@mixin ss-steps {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    overflow: hidden;
    counter-reset: ss-step;
}

@mixin ss-steps-vertical {
    display: inline-grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;

    // Vertical: marker beside its label, connector from this marker's
    // centre down to the next one's.
    > .#{$ss-prefix-module}-step {
        grid-template-rows: auto;
        grid-template-columns: map.get(config.$ss-steps-config, marker-row-height) 1fr;
        place-items: center start;
        gap: map.get(config.$ss-steps-config, label-gap);
        min-height: map.get(config.$ss-steps-config, marker-row-height);
        padding-inline: 0;
        text-align: start;

        &::before {
            grid-column-start: 1;
        }

        > * {
            grid-row-start: 1;
            padding-top: 0;
        }

        &::after {
            top: 50%;
            inset-inline-start: calc(
                #{map.get(config.$ss-steps-config, marker-row-height)} / 2 -
                    #{map.get(config.$ss-steps-config, connector-height)} / 2
            );
            inset-inline-end: auto;
            width: map.get(config.$ss-steps-config, connector-height);
            height: 100%;
        }
    }
}


@mixin ss-step {
    position: relative;
    display: grid;
    grid-template-rows: map.get(config.$ss-steps-config, marker-row-height) 1fr;
    place-items: center;
    text-align: center;
    min-width: map.get(config.$ss-steps-config, min-width);
    padding-inline: map.get(config.$ss-steps-config, label-gap);


    counter-increment: ss-step;

    &::before {
        content: counter(ss-step);
        z-index: 1;
        grid-row-start: 1;
        place-self: center;

        display: grid;
        place-items: center;
        width: map.get(config.$ss-steps-config, marker-size);
        height: map.get(config.$ss-steps-config, marker-size);
        border-radius: 50%;
        background: map.get(config.$ss-steps-config, marker-bg);
        color: map.get(config.$ss-steps-config, marker-fg);
        font-weight: 600;
    }
    &::after {
        content: "";
        position: absolute;
        // Runs from this marker's centre to the next one's (behind both).
        top: calc(
            #{map.get(config.$ss-steps-config, connector-top)} -
                #{map.get(config.$ss-steps-config, connector-height)} / 2
        );
        inset-inline-start: 50%;
        inset-inline-end: -50%;
        height: map.get(config.$ss-steps-config, connector-height);
        background: map.get(config.$ss-steps-config, connector-bg);
    }
    &:last-child::after { display: none; }
    > * {
        grid-row-start: 2;
        padding-top: map.get(config.$ss-steps-config, label-padding-top);
    }
}

@mixin ss-step-variant($bg, $fg) {
    &::before { background: $bg; color: $fg; }
    &::after { background: $bg; }
}