/* Option générale d'arrêt des animations et son ruban du menu de session (exvae #54-intensite-pages).
   Sous l'attribut que pose gbl_animation.js, les boucles de décor s'arrêtent sur leur image du moment ;
   les effets du curseur s'arrêtent par leurs scripts. Rien d'autre ne change : transitions, carrousel,
   dépliants, apparitions et survols des vignettes gardent leur mouvement. */

@layer tokens {
    :root {
        --local-color-decor-session-strip: #000;
        --local-color-decor-session-strip-ink: #fff;
        --local-radius-session-strip: 12px;
    }
}

@layer page {
    .animation-strip {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        z-index: 2;
        display: none;
        justify-content: flex-end;
        gap: 4px;
        box-sizing: border-box;
        padding: 6px;
    }

    /* Au bureau, le bouton s'aligne sur le bord droit du contenu de l'en-tête, sous l'icône de session :
       le contenu du panneau a la largeur de celui de l'en-tête, centré ; les pourcentages du remplissage
       lisent la largeur du panneau. */
    .header-dropdown .animation-strip {
        padding-inline: max(6px, calc((100% - max(530px, min(80vw, 1000px))) / 2 - 10px));
    }

    .header-dropdown[data-header-mode="session"] .animation-strip,
    .header-drawer-session .animation-strip {
        display: flex;
    }

    .header-drawer-session .animation-strip {
        top: 64px;
        padding-inline: 12px;
    }

    .header-dropdown[data-header-mode="session"] .header-dropdown-session {
        padding-top: 58px;
    }

    .header-drawer-session .header-drawer-session-content {
        padding-top: 136px;
    }

    .animation-strip-pause,
    .animation-strip-resume {
        width: 18px;
        height: 18px;
    }

    .animation-strip-resume,
    :root[data-motion="off"] .animation-strip-pause {
        display: none;
    }

    :root[data-motion="off"] .animation-strip-resume {
        display: block;
    }

    .animation-strip {
        border-radius: var(--local-radius-session-strip);
        background-color: var(--local-color-decor-session-strip);
    }

    .animation-strip-pause,
    .animation-strip-resume {
        color: var(--local-color-decor-session-strip-ink);
    }

    /* Boucles de décor : les bulles d'À propos, la lueur des titres des listes, le fond changeant du
       portail, le dégradé tournant au survol de la discussion. */
    :root[data-motion="off"] .bubbles-item--1,
    :root[data-motion="off"] .bubbles-item--2,
    :root[data-motion="off"] .bubbles-item--3,
    :root[data-motion="off"] .bubbles-item--4,
    :root[data-motion="off"] .listing-card .listing-card-title,
    :root[data-motion="off"] .backdrop,
    :root[data-motion="off"] .chat-suggestion:hover::before,
    :root[data-motion="off"] .chat-compose:hover::before {
        animation-play-state: paused;
    }
}