/* +++++++++++++++++++++++++++++++ *\
            PROGRESS-BAR
\* +++++++++++++++++++++++++++++++ */

.progress-container {
    position: relative;
    --color-step: #d9e9f8;
    display: none;
}
.progress-container::before {
    content: '';
    height: 4px;
    width: var(--progress-width);
    background-color: var(--color-step);
    position: absolute;
    top: calc(var(--step-size) / 2);
    left: 50%;
    transform: translate(-50%, -50%);
}
.progress-container ol {
    list-style-type: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    counter-reset: step-number;
    position: relative;
    z-index: 3;
    padding: 0;
}
.progress-container li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--color-step);
    font-size: 12px;
}
.progress-container li::before {
    counter-increment: step-number;
    content: counter(step-number);
    background-color: var(--color-step);
    width: var(--step-size);
    height: var(--step-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color_primary);
    transition: .3s linear .3s;
}
.progress-container li:where(.done, .current) {
    color: var(--color_primary);
}
.progress-container li.done:before {
    background-color: var(--color_primary);
    color: var(--color_white);
}
.progress-container li.current:before {
    background-color: var(--color_secondary);
    color: var(--color_white);
}
.progress-container .progress {
    height: 4px;
    width: var(--progress-width);
    background-color: var(--color_primary);
    position: absolute;
    top: calc(var(--step-size) / 2);
    left: 50%;
    translate: -50% -50%;
    z-index: 2;
    transform: scaleX(50%);
    transform-origin: left;
    transition: 0.3s;
}
/* +++++++++++++++++++++++++++++++ *\
               CONTROLS
\* +++++++++++++++++++++++++++++++ */
.controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 16px;
    padding-inline: 8px;
}


/* +++++++++++++++++++++++++++++++ *\
               STEPS
\* +++++++++++++++++++++++++++++++ */
.steps-container {
    display: flex;
    overflow: hidden;
}
.step {
    flex: 1 0 100%;
    
    padding: 24px 8px;
    transition: 0.3s;
    height: fit-content;
}
.step h3 {
    margin-bottom: 2rem;
}
/* .field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}




 */

.step {
    transition: transform .3s ease, opacity .3s ease;
    /* position: absolute;
    width: 100%;
    top: 0;
    left: 0; */
}

.step.hidden {
    display: none;
}

.step.animate-scale-out {
    transform: scale(0.8);
    opacity: 0;
}

.step.animate-slide-in-right {
    transform: translateX(100%);
    /* opacity: 0; */
}

.step.animate-slide-in-right.active {
    transform: translateX(0);
    /* opacity: 1; */
}

.step.animate-slide-out-left {
    transform: translateX(-100%);
    /* opacity: 0; */
}

.step.animate-slide-in-left {
    transform: translateX(100%);
    /* opacity: 0; */
}

.step.animate-slide-in-left.active {
    transform: scale(1);
    /* opacity: 1; */
}