.cf-checkout-breadcrumbs {
    &__list {
        list-style: none;
        counter-reset: cf-breadcrumb-counter;
        padding-inline-start: 0;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: var(--cf-spacing)
    }
}

.cf-checkout-breadcrumb {
    counter-increment: cf-breadcrumb-counter;
    display: flex;
    gap: var(--cf-spacing-tiny);
    align-items: center;

    --cf-checkout-breadcrumb-item-after--background-color: var(--cf-color-success);

    &.is-active {
        --cf-checkout-breadcrumb-item-marker-before--color: var(--cf-color-text-inverted);
        --cf-checkout-breadcrumb-item-marker-before--background-color: var(--cf-color-success);
        --cf-checkout-breadcrumb-item-after--background-color: var(--cf-color-border);
    }

    &.is-active~* {
        --cf-checkout-breadcrumb-item-marker-before--color: var(--cf-color-text);
        --cf-checkout-breadcrumb-item-marker-before--background-color: var(--cf-color-background-light);
        --cf-checkout-breadcrumb-item-marker-before--border: var(--cf-border);
        --cf-checkout-breadcrumb-item-after--background-color: var(--cf-color-border);
    }

    &__marker {
        display: flex;
    
        &::before {
            content: counter(cf-breadcrumb-counter);
            border: var(--cf-checkout-breadcrumb-item-marker-before--border, 1px solid var(--cf-color-success));
            color: var(--cf-checkout-breadcrumb-item-marker-before--color, var(--cf-color-success));
            background-color: var(--cf-checkout-breadcrumb-item-marker-before--background-color);
            font-weight: bold;
            display: block;
            text-align: center;
            width: 2.5rem;
            height: 2.5rem;
            line-height: 2.5rem;
            border-radius: 2.5rem;
            margin-block-end: var(--cf-spacing-tiny);
        }
    }

    &__label {
        font-size: var(--cf-font-size-small);
        text-align: center;
    }
}