.stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    &:focus-visible {
        box-shadow: var(--focus);
        border-radius: var(--size-100);
        outline: none;
    }
    &.vertical {
        flex-direction: column;
        .connector {
            min-height: 16px;
            width: 2px;
        }
    }
    & > .StepWrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        &:focus-within {
            .step {
                box-shadow: var(--focus);
                outline: none;
            }
        }
        &.dynamic:hover {
            cursor: pointer;
            .step {
                box-shadow: var(--focus);
            }
        }
    }
}

.step {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 24px;
    background-color: var(--white);
    color: var(--black);
    font-weight: bold;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 1px;
    svg {
        * {
            stroke-width: 1.25px;
        }
    }
}

.step.current {
    background-color: var(--background-primary);
    height: 40px;
    color: var(--black);
    border: 1px solid var(--foreground-neutral);
}

.step.completed {
    background-color: var(--background-primary);
    color: var(--black);
}

.connector {
    flex: 1;
    height: 2px;
    background-color: var(--border-neutral);
    width: 16px;
    border-radius: 2px;
}

.connector.current {
    background-color: var(--background-primary);
}

.connector.completed {
    background-color: var(--background-primary);
}