#cfw-breadcrumb {
    list-style-type: none;
    margin: 0 0 1.5em 0;
    padding: 0;
    display: flex;

    li {
        display: flex;
        flex-direction: row;
        align-items: center;

        & > a {
            color: var(--cfw-breadcrumb-completed-text-color);
            font-size: 0.75em;
        }

        &.active ~ li {
            > a {
                color: var(--cfw-breadcrumb-next-text-color);
            }
        }

        &.active > a {
            color: var(--cfw-breadcrumb-current-text-color);
            text-decoration: none;
            font-weight: 500;
        }

        &:not(:last-child):after {
            content: " ";
            width: 12px;
            height: 12px;
            background: var(--cfw-breadcrumb-completed-accent-color);
            mask-image: url("../images/arrow-right.svg");
            mask-size: 12px;
            mask-repeat: no-repeat;
            mask-position: center;
            padding-left: 25px;

            @include media-breakpoint-down(md) {
                padding-left: 15px;
            }
        }

        &.active ~ li:not(:last-child):after {
            background: var(--cfw-breadcrumb-next-accent-color);
        }

        &.active:after {
            background: var(--cfw-breadcrumb-current-accent-color);
        }
    }

    @include media-breakpoint-down(lg) {
        justify-content: center;
    }
}