/* Barres de defilement ultra-fines, partout dans l'application (natives, pas de JS).
   - verticales : 3px de large
   - horizontales : 2px de haut
   Chrome/Edge/Safari/Android WebView : pseudo-elements ::-webkit-scrollbar.
   NB : dans Chrome recent, declarer scrollbar-width / scrollbar-color desactive
   ::-webkit-scrollbar ; ces proprietes ne sont donc donnees qu'a Firefox
   (qui ne connait pas ::-webkit-scrollbar), ou "thin" est le minimum possible. */

*::-webkit-scrollbar {
  width: 3px;
  height: 2px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.32);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

@supports (-moz-appearance: none) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.32) transparent;
  }
}

@media (prefers-color-scheme: dark) {
  *::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.32);
  }
  *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }
  @supports (-moz-appearance: none) {
    * {
      scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
    }
  }
}

[data-theme="dark"] *::-webkit-scrollbar-thumb,
[data-theme="dark"]::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.32);
}
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover,
[data-theme="dark"]::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
@supports (-moz-appearance: none) {
  [data-theme="dark"], [data-theme="dark"] * {
    scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
  }
}