.s_announcement_scroll {
    overflow-x: clip;
    font-size: clamp(40px, calc(var(--marquee-item-font-size, 80) * .05vw), 200px);

    .s_announcement_scroll_marquee_item {
        white-space: preserve nowrap;
        caret-color: transparent; // o_not_editable doesn't hide the caret on Firefox

        @media (prefers-reduced-motion: reduce) {
            & {
                animation: none !important;
            }
        }
    }

    // Item options
    .s_announcement_scroll_heading_family .s_announcement_scroll_marquee_item {
        font-family: $o-theme-headings-font;
        font-weight: $headings-font-weight;
    }
    &.s_announcement_scroll_direction_right {
        --marquee-animation: o-marquee-scroll-right;
    }
    &.s_announcement_scroll_direction_none {
        --marquee-animation: none;
    }

    // Animation states, only when ready
    &.s_announcement_scroll_ready {

        // Base behavior: once the snippet is ready, the animation is going in
        // the base direction.
        .s_announcement_scroll_marquee_item {
            --marquee-animation-time: calc((25s - var(--marquee-animation-speed) * 2) * var(--marquee-item-size) * .001);

            animation-composition: add;
            animation:
                var(--marquee-animation, o-marquee-scroll-left) linear infinite var(--marquee-animation-time),
                var(--marquee-animation, o-marquee-scroll-left) linear infinite calc(var(--marquee-animation-time) * var(--marquee-animation-hover-multiplier, 1)) reverse paused;
        }
        &.s_announcement_scroll_hover_slow .s_announcement_scroll_marquee_item {
            --marquee-animation-hover-multiplier: 2;
        }

        // Hover effects, only when not scrolling and on devices that support
        // hover.
        @media (hover: hover) {
            &:where(:hover:not(.s_announcement_scroll_page_scrolling)) {
                &.s_announcement_scroll_hover_pause .s_announcement_scroll_marquee_item {
                    animation-play-state: paused;
                }
                &.s_announcement_scroll_hover_slow .s_announcement_scroll_marquee_item {
                    animation-play-state: running;
                }
                &.s_announcement_scroll_hover_direction .s_announcement_scroll_marquee_item {
                    animation-play-state: paused, running;
                }
            }
        }

        // Parallax effects: disabling the CSS animation while scrolling
        &:where(.s_announcement_scroll_page_scrolling) {
            &.s_announcement_scroll_parallax .s_announcement_scroll_marquee_item {
                animation-play-state: paused;
            }
        }
    }
}

@keyframes o-marquee-scroll-left {
    to {
        transform: translateX(-100%);
    }
}
@keyframes o-marquee-scroll-right {
    from {
        transform: translateX(-100%);
    }
}