step-progress {
    display: block;
    container-type: inline-size;
    --step-progress-pending-bg  : #888888;
    --step-progress-pending-ink : #ffffff;
    --step-progress-on-ink      : #ffffff;
    --step-progress-arrow       : clamp(8px, 1.85cqw, 18px);
    --step-progress-gap         : 0px;
    --step-progress-label-size  : 17px;
    --step-progress-num-size    : clamp(17px, 6cqw, 35px);
    --step-progress-pad-y       : clamp(6px, 1cqw, 10px);
    font-family                 : "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing      : antialiased;
    --step-progress-margin-x    : clamp(0px, 5.5cqw, 100px);
    margin                      : 0 var(--step-progress-margin-x) 10px;
}

step-progress * {
    box-sizing: border-box;
}

.sp-steps {
    list-style: none;
    margin      : 0;
    padding     : 0;
    width       : 100%;
    display     : flex;
    align-items : stretch;
    gap         : var(--step-progress-gap);
}

.sp-step {
    flex            : 1 1 0;
    min-width       : 0;
    margin-left     : calc(-1.15 * var(--step-progress-arrow));
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : clamp(3px, 0.6cqw, 9px);
    padding         : var(--step-progress-pad-y) calc(var(--step-progress-arrow) + 0.9cqw) var(--step-progress-pad-y) calc(var(--step-progress-arrow) + 0.7cqw);
    background      : var(--step-progress-pending-bg);
    color           : var(--step-progress-pending-ink);
    clip-path: polygon(
        0 0,
        calc(100% - var(--step-progress-arrow)) 0,
        100% 50%,
        calc(100% - var(--step-progress-arrow)) 100%,
        0 100%,
        var(--step-progress-arrow) 50%
    );
    min-height      : clamp(34px, 4.8cqw, 48px);
    transition      : background .18s ease, color .18s ease;
}

.sp-step[data-pos="first"] {
    border-radius: 10px;
    margin-left : 0;
    padding-left: clamp(8px, 1.2cqw, 16px);
    clip-path   : polygon(
        0 0,
        calc(100% - var(--step-progress-arrow)) 0,
        100% 50%,
        calc(100% - var(--step-progress-arrow)) 100%,
        0 100%
    );

    flex: 0.75 1 0;
}

.sp-step[data-pos="last"] {
    border-radius: 0 10px 10px 0;
    padding-right   : clamp(8px, 1.2cqw, 16px);
    clip-path       : polygon(
        0 0,
        100% 0,
        100% 100%,
        0 100%,
        var(--step-progress-arrow) 50%
    );

    flex: 0.65 1 0;
}


.sp-step-on {
    background      : var(--color-primario, #77aa45);
    color           : var(--step-progress-on-ink);

    z-index: 1;
}

.sp-step:not(.sp-step-on) {
    margin-top      : 2.5px;
    margin-bottom   : 2.5px;
    min-height      : calc(clamp(34px, 4.8cqw, 48px) - 5px);
    margin-left     : calc(-0.5 * var(--step-progress-arrow));
}

.sp-step-next {
    margin-left : calc(-1.1 * var(--step-progress-arrow)) !important;
    z-index: 0;
}

.sp-step-label {
    font-size       : var(--step-progress-label-size);
    font-weight     : 500;
    line-height     : 1.1;
    overflow-wrap   : anywhere;
    hyphens         : auto;
}

.sp-step-num {
    flex        : none;
    font-size   : var(--step-progress-num-size);
    font-weight : 700;
    line-height : 1;
    white-space : nowrap;
    margin      : -15px 0;
}

@media (prefers-reduced-motion: reduce) {
    .sp-step {
        transition: none;
    }
}

@media (max-width: 837px) {
    step-progress {
        --step-progress-margin-x    : 8px;
        --step-progress-label-size  : clamp(6.5px, 1.75cqw, 17px);
    }
}