/* ===========================================================================
 * dP elektronik — Bildlaufleisten
 * ERZEUGTE DATEI. Nicht von Hand bearbeiten.
 * Quelle: packages/tokens/build.mjs  ·  Neu erzeugen: npm run build -w @dp/tokens
 * ===========================================================================
 *
 * Einbinden zusaetzlich zu den Tokens:
 *
 *   import '@dp/tokens/css';
 *   import '@dp/tokens/scrollbars';
 *
 * Warum der `*`-Selektor und nicht eine einzelne Regel auf der Wurzel — beides
 * nachgemessen, nicht vermutet:
 *
 *   scrollbar-width   wird gar nicht vererbt. Auf der Wurzel allein bekaeme
 *                     nur die Seite selbst eine schmale Leiste, jeder
 *                     Behaelter darin aber die 17 Pixel des Systems.
 *   scrollbar-color   wird vererbt, aber als fertig ausgerechneter Wert. Ein
 *                     Bereich, der das Schema lokal wechselt — ein
 *                     `data-dp-theme="dark"` mitten in einer hellen Seite —
 *                     erbt dann die Farbe der Wurzel, obwohl die Variablen um
 *                     ihn herum laengst andere sind.
 *
 * Ueber `*` loest jedes Element beide Werte in seinem eigenen Kontext auf.
 * Das ist der einzige Weg, der auch dort stimmt, wo Schemata verschachtelt
 * sind. Die Eigenschaften kosten nichts bei Elementen, die nicht scrollen.
 *
 * Die Komponenten aus @dp/ui setzen dieselben Werte zusaetzlich in sich selbst.
 * Sie sehen deshalb auch dann richtig aus, wenn diese Datei nicht eingebunden
 * ist. Diese Datei ergaenzt alles, was ausserhalb der Komponenten scrollt: die
 * Seite selbst, eigene Behaelter, fremde Bauteile.
 */

* {
  scrollbar-width: var(--dp-scrollbar-width);
  scrollbar-color: var(--dp-color-scrollbar-thumb) var(--dp-color-scrollbar-track);
}

/*
 * Rueckfallebene fuer WebKit-Browser ohne `scrollbar-color` — Safari vor 18.2.
 * Dort ersetzt das Gestalten der Pseudo-Elemente die schwebende Leiste durch
 * eine dauerhaft sichtbare. Das ist der Preis; neuere Browser gehen den Weg
 * oben und bleiben unberuehrt.
 */
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar {
    width: var(--dp-scrollbar-size);
    height: var(--dp-scrollbar-size);
  }
  ::-webkit-scrollbar-track {
    background: var(--dp-color-scrollbar-track);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--dp-color-scrollbar-thumb);
    border-radius: var(--dp-radius-full);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--dp-color-scrollbar-thumb-hover);
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
}