.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;
    margin: 0;
}

.cf-checkout-breadcrumb {
    counter-increment: cf-breadcrumb-counter;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    min-width: 60px;
    --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;
        align-items: center;
    
        &::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: var(--cf-spacing-large);
            height: var(--cf-spacing-large);
            line-height: var(--cf-spacing-large);
            border-radius: var(--cf-spacing-large);
            margin-block-end: var(--cf-spacing-tiny);
        }
    }

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

    &:not(:last-child) {
        position: relative;

        &::after {
            content: "";
            position: absolute;
            top: var(--cf-spacing);
            height: 2px;
            background-color: var(--cf-checkout-breadcrumb-item-after--background-color, var(--cf-color-success));
            // ADD 2 EXTRA PIXELS FROM THE BORDER
            width: calc(100% - var(--cf-spacing-large) - 2px);
            left: 0;
        }

        &::after {
            left: calc(50% + (var(--cf-spacing-large) / 2) + 1px);
        }
    }
}