@use '~flux/components/css/mixin';

.stepperStep {
    position: relative;
}

.stepperSteps {
    position: relative;
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: space-between;
    background: inherit;
    z-index: 0;

    &::before,
    &::after {
        --margin: 15px;
        --max: calc(100% - var(--margin) * 2);

        position: absolute;
        display: block;
        top: calc(50% - 2px);
        left: 0;
        margin-left: var(--margin);
        margin-right: var(--margin);
        height: 4px;
        content: '';
        z-index: -1;
    }

    &::before {
        width: var(--max);
        background: var(--gray-100);
    }

    &::after {
        width: calc(min(1, var(--progress)) * var(--max));
        background: var(--primary-600);
        transition: width 300ms var(--swift-out);
    }
}

.stepperStepsItem {
    @include mixin.text(small);

    position: relative;
    display: flex;
    height: 33px;
    width: 33px;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border: 0;
    border-radius: var(--radius-full);
    color: var(--foreground);
    cursor: default;
    font-weight: 700;
    outline: 6px solid transparent;
    outline-offset: -2px;
    transition: 300ms var(--swift-out);
    transition-property: background, border, color, outline;

    .icon {
        overflow: visible;
        scale: .8;

        :is(path) {
            stroke: currentColor;
            stroke-width: 54px;
        }
    }
}

.stepperStepsItemComplete {
    composes: stepperStepsItem;

    background: var(--primary-600);
    border-color: var(--primary-600);
    color: var(--primary-25);
}

.stepperStepsItemCurrent {
    composes: stepperStepsItem;

    background: var(--gray-100);
    color: var(--foreground-prominent);
    outline-color: var(--primary-600);
    outline-width: 2px;
    transition-delay: 75ms;
}

.stepperStepsItemIdle {
    composes: stepperStepsItem;

    outline-color: var(--gray-25);
}