.elodin-smooth-scroller {
    --elodin-smooth-scroller-gap: 2rem;
    --elodin-smooth-scroller-speed: 55;
    --elodin-smooth-scroller-duration: 28s;
    --elodin-smooth-scroller-distance: 0px;
    --elodin-smooth-scroller-start-offset: 0px;
    --elodin-smooth-scroller-viewport-size: auto;
    --elodin-smooth-scroller-translate-from-x: calc( -1 * var(--elodin-smooth-scroller-start-offset) );
    --elodin-smooth-scroller-translate-to-x: calc(
        -1 * (
            var(--elodin-smooth-scroller-start-offset) +
            var(--elodin-smooth-scroller-distance)
        )
    );
    --elodin-smooth-scroller-translate-from-y: 0px;
    --elodin-smooth-scroller-translate-to-y: 0px;
    box-sizing: border-box;
    display: block;
    flex: 0 0 100%;
    max-width: 100%;
    overflow: visible;
    width: 100%;
}

.elodin-smooth-scroller.is-overflow-hidden {
    overflow-x: hidden;
    overflow-y: visible;
}

.elodin-smooth-scroller.is-overflow-hidden[data-elodin-scroll-direction="up"],
.elodin-smooth-scroller.is-overflow-hidden[data-elodin-scroll-direction="down"] {
    overflow-x: visible;
    overflow-y: hidden;
}

.elodin-smooth-scroller__track {
    align-items: center;
    animation: elodin-smooth-scroller-scroll var(--elodin-smooth-scroller-duration) linear infinite;
    display: flex;
    gap: var(--elodin-smooth-scroller-gap);
    transform: translate3d( 0, 0, 0 );
    width: max-content;
    will-change: transform;
}

.elodin-smooth-scroller[data-elodin-scroll-direction="up"],
.elodin-smooth-scroller[data-elodin-scroll-direction="down"] {
    height: var(
        --elodin-smooth-scroller-vertical-height,
        var(--elodin-smooth-scroller-viewport-size)
    );
    --elodin-smooth-scroller-translate-from-x: 0px;
    --elodin-smooth-scroller-translate-to-x: 0px;
    --elodin-smooth-scroller-translate-from-y: calc( -1 * var(--elodin-smooth-scroller-start-offset) );
    --elodin-smooth-scroller-translate-to-y: calc(
        -1 * (
            var(--elodin-smooth-scroller-start-offset) +
            var(--elodin-smooth-scroller-distance)
        )
    );
}

.elodin-smooth-scroller[data-elodin-scroll-direction="up"] .elodin-smooth-scroller__track,
.elodin-smooth-scroller[data-elodin-scroll-direction="down"] .elodin-smooth-scroller__track {
    flex-direction: column;
    height: max-content;
    width: 100%;
}

.elodin-smooth-scroller__group {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: var(--elodin-smooth-scroller-gap);
}

.elodin-smooth-scroller__group > * {
    flex: 0 0 auto;
    margin: 0;
}

.elodin-smooth-scroller.is-direction-right .elodin-smooth-scroller__track {
    animation-direction: reverse;
}

.elodin-smooth-scroller[data-elodin-scroll-direction="up"] .elodin-smooth-scroller__group,
.elodin-smooth-scroller[data-elodin-scroll-direction="down"] .elodin-smooth-scroller__group {
    flex-direction: column;
    width: 100%;
}

.elodin-smooth-scroller[data-elodin-scroll-direction="right"] .elodin-smooth-scroller__track,
.elodin-smooth-scroller[data-elodin-scroll-direction="down"] .elodin-smooth-scroller__track {
    animation-direction: reverse;
}

.elodin-smooth-scroller.is-pause-on-hover:hover .elodin-smooth-scroller__track {
    animation-play-state: paused;
}

@keyframes elodin-smooth-scroller-scroll {
    from {
        transform: translate3d(
            var(--elodin-smooth-scroller-translate-from-x),
            var(--elodin-smooth-scroller-translate-from-y),
            0
        );
    }

    to {
        transform: translate3d(
            var(--elodin-smooth-scroller-translate-to-x),
            var(--elodin-smooth-scroller-translate-to-y),
            0
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .elodin-smooth-scroller__track {
        animation: none;
        transform: none;
    }
}

@media (max-width: 767px) {
    .elodin-smooth-scroller[data-elodin-scroll-direction="up"],
    .elodin-smooth-scroller[data-elodin-scroll-direction="down"] {
        height: var(
            --elodin-smooth-scroller-vertical-height-mobile,
            var(
                --elodin-smooth-scroller-vertical-height,
                var(--elodin-smooth-scroller-viewport-size)
            )
        );
    }
}