nav-step {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: calc(var(--u-smallester) / 1.5);
    height: var(--u-small);
    color: var(--color-black);
}

nav-step > * {
    cursor: pointer;
    transition: transform 0.1s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
}

nav-step > *:not(i):active {
    transform: scale(0.98) translateY(2px);
}

nav-step > :first-child {
    font-size: 2rem;
    margin-right: auto;
}

nav-step > *:not(:first-child) {
    height: 100%;
}

nav-step > *.on {
    color: var(--color-blue);
}

nav-step > *.on ~ * {
    pointer-events: none;
    color: var(--color-gray);
}

nav-step > *:not(:first-child):not(i):hover {
    color: var(--color-blue);
}

nav-step > *.on:after,
nav-step > *:hover:not(:first-child):not(i):after {
    content: "";
    position: absolute;
    top: calc(50% + 1.25rem / 2 + 0.5rem);
    width: 100%;
    height: 2px;
    background: var(--color-blue);
    border-radius: 2px;
}