:root {
    --dot-diameter: 20px;
}

@media only screen and (min-width: 1257px) {
    .bar {
        background-color: var(--grey-outline);
        display: flex;
        flex-grow: 1;
        height: 4px;
        border-radius: 20px;
        margin-left: calc(var(--dot-diameter) / -2);
        margin-right: calc(var(--dot-diameter) / -2);
    }

    .mobile-step {
        display: none !important;
    }

}

@media only screen and (max-width: 1257px) {
    .bar {
        background-color: var(--grey-outline);
        display: flex;
        flex-grow: 1;
        height: 8px;
        border-radius: 20px;
    }

    .desktop-step {
        display: none !important;
    }

}

.dot {
    height: var(--dot-diameter);
    width: var(--dot-diameter);
    background-color: var(--grey-outline);
    border-radius: 50%;
    display: flex;
    z-index: 1;

    cursor: pointer;
}



.step {
    display: flex;
    flex: 0 0 auto;
    flex-grow: 1;
    flex-direction: column;
    gap: 12px;
}

/* if you see .align-center then there is an additional --dot-diameter amount of margin on the center labels */
/* since this is missing from the first label (because that is not needed to be centered) we need to add */
/* additional padding to have equal sized flex-boxes in order to flex-grow 1 work properly i.e. the bars have equal length */
.first-label-alignment {
    padding-right: 20px;
}

.last-step {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 12px;
    max-width: var(--dot-diameter);
}

.active {
    background-color: var(--interaction-pink);
}

.step-label {
    font-size: 18px;
    font-weight: 500;
    width: 50px;
    text-wrap: nowrap;
}

.step-label-bold {
    font-weight: 700;
}

.align-center {
    display: flex;
    justify-content: center;
    margin-left: calc(-50% + var(--dot-diameter));
}

.align-right {
    display: flex;
    justify-content: flex-end;
    margin-left: -100%;
    margin-right: calc(-1 * var(--dot-diameter));
}