@property --xyloon-offset {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

.elementor-widget-xyloon_multicolor_divider {
    width: 100%;
}

.xyloon-mcd-outer {
    position: relative;
    width: 100%;
    overflow: visible;
}

.xyloon-mcd-outer.is-full-width {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.xyloon-mcd-bar-wrap {
    width: 100%;
    transform-origin: center;
    overflow: hidden;
}

.xyloon-mcd-bar {
    --xyloon-stripe: 24px;
    --xyloon-pattern-angle: 135deg;
    --xyloon-offset: 0px;
    --xyloon-c1: #F2A93B;
    --xyloon-c2: #FF6B4A;
    --xyloon-c3: #2FD9B8;
    --xyloon-c4: #FF4FA3;
    --xyloon-c5: #3FC1FF;
    --xyloon-c6: #9B6BFF;

    width: 100%;
    height: 10px;

    /*
     * Le dégradé se répète directement sur toute la largeur.
     * Aucun background-size n'est utilisé : il n'y a donc plus de
     * tuiles juxtaposées ni de raccord visible entre les morceaux.
     */
    background-image: repeating-linear-gradient(
        var(--xyloon-pattern-angle),
        var(--xyloon-c1) var(--xyloon-offset)
            calc(var(--xyloon-offset) + var(--xyloon-stripe)),
        var(--xyloon-c2) calc(var(--xyloon-offset) + var(--xyloon-stripe))
            calc(var(--xyloon-offset) + var(--xyloon-stripe) + var(--xyloon-stripe)),
        var(--xyloon-c3) calc(var(--xyloon-offset) + var(--xyloon-stripe) + var(--xyloon-stripe))
            calc(var(--xyloon-offset) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe)),
        var(--xyloon-c4) calc(var(--xyloon-offset) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe))
            calc(var(--xyloon-offset) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe)),
        var(--xyloon-c5) calc(var(--xyloon-offset) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe))
            calc(var(--xyloon-offset) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe)),
        var(--xyloon-c6) calc(var(--xyloon-offset) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe))
            calc(var(--xyloon-offset) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe))
    );

    background-repeat: no-repeat;
}

.xyloon-mcd-bar.is-animated {
    animation-name: xyloon-mcd-scroll-left;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: --xyloon-offset;
}

.xyloon-mcd-bar.is-animated.direction-right {
    animation-name: xyloon-mcd-scroll-right;
}

.xyloon-mcd-bar.pause-hover:hover {
    animation-play-state: paused;
}

/*
 * Le déplacement correspond exactement à un cycle de six couleurs.
 * Le début et la fin de l'animation sont donc strictement identiques.
 */
@keyframes xyloon-mcd-scroll-left {
    from {
        --xyloon-offset: 0px;
    }
    to {
        --xyloon-offset: calc(
            0px - var(--xyloon-stripe) - var(--xyloon-stripe) - var(--xyloon-stripe)
            - var(--xyloon-stripe) - var(--xyloon-stripe) - var(--xyloon-stripe)
        );
    }
}

@keyframes xyloon-mcd-scroll-right {
    from {
        --xyloon-offset: 0px;
    }
    to {
        --xyloon-offset: calc(
            var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe)
            + var(--xyloon-stripe) + var(--xyloon-stripe) + var(--xyloon-stripe)
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .xyloon-mcd-bar.is-animated {
        animation: none !important;
    }
}