/* Barres natives : même géométrie au repos, au survol et au clavier.
 * Une seule feuille pour le document, les listes, panneaux et portails.
 * La piste est transparente : seule la poignée se voit, posée sur la matière qui défile
 * (plus de bande claire le long des plaques de verre). --defilement-piste reste le fond de
 * référence des paires de contraste de la poignée.
 * Les moteurs WebKit gardent leurs pseudo-éléments arrondis ; Firefox utilise
 * l'API standard. Aucun gestionnaire de roue, masque ou animation de position. */
:where(*) {
  scrollbar-width: thin;
  scrollbar-color: var(--defilement-poignee) transparent;
}

/* Réserver seulement les zones de défilement vertical : sur un SVG ou un texte tronqué
 * (overflow: hidden), stable rogne le dessin ou la place du libellé. */
:where(html, textarea, .bb-popover, .bb-surface__corps, .bb-dialogue, .bb-liste__options) {
  scrollbar-gutter: stable;
}

@media (hover: hover) and (pointer: fine) {
  :where(*:hover) {
    scrollbar-color: var(--defilement-survol) transparent;
  }
}

@supports selector(::-webkit-scrollbar) {
  /* Une valeur standard non auto masque les pseudo-éléments dans Chromium. */
  :where(*, *:hover) {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  ::-webkit-scrollbar {
    width: var(--defilement-largeur);
    height: var(--defilement-largeur);
  }

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--defilement-poignee);
    background-clip: padding-box;
    border: var(--defilement-marge) solid transparent;
    border-radius: var(--radius-capsule);
  }

  @media (hover: hover) and (pointer: fine) {
    ::-webkit-scrollbar-thumb:hover {
      background-color: var(--defilement-survol);
    }
  }

  ::-webkit-scrollbar-thumb:active {
    background-color: var(--foreground);
  }
}

@media (prefers-contrast: more) {
  :where(*) {
    scrollbar-width: auto;
    scrollbar-color: var(--foreground) var(--card-opaque);
  }
}

/* Laisser au système les couleurs et les dimensions en couleurs forcées. */
@media (forced-colors: active) {
  :where(*, *:hover) {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  ::-webkit-scrollbar,
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner,
  ::-webkit-scrollbar-thumb,
  ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:active {
    all: revert;
  }
}