.VerticalSteps {
    --lineColor: var(--color-base-faintest-2);
    --lineGap: var(--gap-big);
    --bulletDiameter: 12px;

    display: flex;
    flex-direction: column;

    border-left: solid var(--lineColor) 1px;

    padding-left: var(--lineGap);

    & > .Item {
        position: relative;

        &:not(:first-child) {
            margin-top: var(--gap-bigger);
        }

        & > .content {
            display: flex;
            flex-direction: column;
            gap: var(--base-gap);
        }

        &::after {
            position: absolute;
            content: '';
            width: var(--bulletDiameter);
            height: var(--bulletDiameter);
            border-radius: 50%;
            left: calc(var(--lineGap) * -1 - var(--bulletDiameter) / 2);
            bottom: calc(var(--button-height) / 2 - var(--bulletDiameter) / 2);

            box-shadow: inset 0 0 0 1px var(--lineColor);
            background-color: var(--color-background);
        }

        &.faint {
            color: var(--color-base-faint);
        }
    }
}