.stepper {
    --circle-size: 3rem;
    --spacing: 0.5rem;
    display: flex;
    flex-wrap: wrap;
}

.step {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;

    &:before {
        --size: 3rem;
        content: attr(data-step);
        align-content: center;
        color: white;
        position: relative;
        z-index: 1;
        display: block;
        width: var(--circle-size);
        height: var(--circle-size);
        background-color: #e0e0e0;
        border-radius: 50%;
        margin: 0 auto 1rem;
        font-size: 20px;
    }
    &:not(:last-child):after {
        content: "";
        position: relative;
        top: calc(var(--circle-size) / 2);
        width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
        left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
        height: 2px;
        background-color: #e0e0e0;
        order: -1;
    }
}

.step.active {  
    &:before {
        color: #027BC6;
        border: 3px solid #027BC6;
    }
}

.step.incomplete {
    color: #ffb52a;
    &:before {
        content: '\2713';
        background-color: #ffb52a;
        font-size: 30px;
    }
}

.step.complete {
    color: #4caf50;
    &:before {
        content: '\2713';
        background-color: #4caf50;
        font-size: 30px;
    }
}

.step-content .content {
    display: none;
}

.step-content .content.active {
    display: block;
}