@use "sass:map";
@use "./steps.config" as config;
@use "../../01-core/external" 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;
}

@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);

    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;
        top: map.get(config.$ss-steps-config, connector-top);
        inset-inline: 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; }
}