/**
 * Pause Animations block
 *
 * A plain, link-like button so it sits naturally in a footer, like Cookie
 * Preferences. Any color / background / border / spacing the author sets via
 * block supports is emitted as inline styles and wins over these defaults.
 *
 * html.oi-reduce-motion is set by inc/motion-control.php's <head> script while
 * the visitor has animations paused.
 */

.wp-block-oechsli-motion-toggle {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wp-block-oechsli-motion-toggle:hover {
    opacity: 0.8;
}

.wp-block-oechsli-motion-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* One label at a time. */
.oi-motion-toggle__play,
html.oi-reduce-motion .oi-motion-toggle__pause {
    display: none;
}

html.oi-reduce-motion .oi-motion-toggle__play {
    display: inline;
}

/* The device's own "reduce motion" setting already stops everything, so the
   link would do nothing. Front end only (.oi-motion-toggle isn't on the
   editor copy), so authors can still see and edit it. */
@media (prefers-reduced-motion: reduce) {
    .oi-motion-toggle {
        display: none;
    }
}

/* Paused by the visitor: finish CSS animations/transitions at once. 1ms, not 0,
   so transitionend/animationend still fire for scripts waiting on them. */
html.oi-reduce-motion {
    scroll-behavior: auto;
}

html.oi-reduce-motion *,
html.oi-reduce-motion *::before,
html.oi-reduce-motion *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}