/* ─── Scrollbar — shared component styles ─────────────────────────────────────
   Single source of truth for component CSS.
   Values: site/tokens.css (--ds-nba-30 · --ds-nba-soft-pressed · --ds-surface-nb-low)
   Primary consumers: site/preview/scrollbar.html + src/components/Scrollbar/Scrollbar.tsx
   Naming: ds-scroll prefix
   States: data-attributes only
     data-context='overlay|table'   — Figma ось Context
     data-size='md|lg'              — Figma коллекция переменных «❖ Scrollbar»

   ЧТО ЭТО ЗА КОМПОНЕНТ. Не виджет, а ОФОРМЛЕНИЕ прокручиваемого контейнера:
   класс вешается на элемент с overflow, своей разметки у него нет. Так он уже
   и живёт в системе — те же правила скопированы в textarea.css:557 и
   dropdown-menu.css:37; этот файл делает их одним источником.

   ГРАУНД-ТРУС, снят Plugin API 2026-08-31 с набора Scrollbar 795:52 (8 вариантов):
     оси          Orientation (Vertical|Horizontal) × State (Default|Hover) × Context (Overlay|Table)
     толщина      6px во всех восьми вариантах канвы
     бегунок      длина 40 из 80, радиус 999 (пилюля)
     дорожка      ТОЛЬКО при Context=Table, радиус 0, во всю длину
     Overlay      дорожки нет вовсе — бегунок висит над контентом

   ЦВЕТА — сверены по всем 4 темам, все три токена уже были в системе:
     бегунок покой     Fill/Neutral-Blue/Soft/Default  → --ds-nba-30           (4 из 4)
     бегунок наведение Fill/Neutral-Blue/Soft/Pressed  → --ds-nba-soft-pressed (4 из 4)
     дорожка           Static/Surface/Neutral-Blue/1-Low → --ds-surface-nb-low (4 из 4)

   Наведение стоит на РОЛЕВОМ токене, а не на ступени лесенки, и это не придирка:
   --ds-nba-40 даёт 0.40 только в светлых (в тёмных 0.60), --ds-nba-50 — 0.80
   только в тёмных (в светлых 0.50). Ни одна ступень не отвечает роли Soft/Pressed
   по всем четырём модам, о чём прямо сказано в tokens.css:681. Существующие копии
   в textarea.css:573 берут --ds-nba-40 — это дрейф, он сводится вместе с копиями.

   РАЗМЕРЫ. Коллекция переменных «❖ Scrollbar» несёт одну величину Width-Height:
   MD = 6 (Width-Height/dim-75), LG = 8 (Width-Height/dim-100). Спека компонента
   (03_Components/Scrollbar/Scrollbar.md) говорит «SM 4px и MD 8px», комментарий
   в tokens.css:606 — «SM=6px / LG=8px». Три разных названия одних размеров;
   источником взят макет, расхождение вынесено владельцу.

   ГРАНИЦА, которую нельзя обойти CSS-ом: толщину скроллбара в пикселях умеет
   задавать только WebKit (::-webkit-scrollbar). Стандартное свойство
   scrollbar-width принимает auto|thin|none и числа не берёт, поэтому в Firefox
   обе величины выглядят как thin, а data-size там не работает.

   И ЭТИ ДВА СПОСОБА НЕЛЬЗЯ ПИСАТЬ ВМЕСТЕ. Современный Chrome понимает оба, и,
   увидев стандартное scrollbar-width, он ИГНОРИРУЕТ ::-webkit-scrollbar целиком
   — не сливает, а отбрасывает. Замерено прямо в браузере 2026-08-31 на одном и
   том же правиле `::-webkit-scrollbar{width:20px}`: без scrollbar-width полоса
   выходит 20px, вместе с ним — 11px. Первая редакция этого файла ставила оба, и
   ось размера не работала вовсе: md и lg давали одинаковые 13px. Поэтому
   стандартные свойства убраны под @supports и достаются только тем браузерам,
   которые ::-webkit-scrollbar не знают.

   ТО ЖЕ САМОЕ есть в двух уже отгруженных местах — textarea.css:559 и
   dropdown-menu.css:28 ставят scrollbar-width рядом с ::-webkit-scrollbar, то
   есть их --ds-scrollbar-width в Chrome не действует. Правится отдельно, вместе
   со сведением копий сюда. */

.ds-scroll {
  /* MD — базовый размер; --ds-scrollbar-width заведён под него и уже используется
     соседями, поэтому здесь он, а не литерал. LG идёт от мастер-сетки: правило
     never-do запрещает хардкод размерностей контрола, 8px = две единицы. */
  --_sb-size:  var(--ds-scrollbar-width);
  --_sb-track: transparent;

  overflow: auto;
}

/* Только для браузеров БЕЗ ::-webkit-scrollbar (Firefox). В Chrome и Safari эти
   строки не должны появляться никогда — там они отменяют всё, что ниже. */
@supports not selector(::-webkit-scrollbar) {
  .ds-scroll {
    scrollbar-width: thin;                                  /* чисел не принимает */
    scrollbar-color: var(--ds-nba-30) var(--_sb-track);
  }
}

.ds-scroll[data-size='lg'] {
  --_sb-size: calc(var(--ds-comp-unit) * 2);                /* = 8px, Width-Height LG */
}

/* Context=Table — дорожка видима. Overlay остаётся прозрачным (значение по умолчанию
   выше), поэтому отдельного правила у него нет: отсутствие дорожки — это и есть
   Overlay, а не забытая ветка. */
.ds-scroll[data-context='table'] {
  --_sb-track: var(--ds-surface-nb-low);
}

.ds-scroll::-webkit-scrollbar {
  width:  var(--_sb-size);
  height: var(--_sb-size);                                  /* горизонтальная ось */
}

.ds-scroll::-webkit-scrollbar-track {
  background:    var(--_sb-track);
  border-radius: 0;                                         /* Figma: дорожка без скругления */
}

.ds-scroll::-webkit-scrollbar-thumb {
  background:    var(--ds-nba-30);
  border-radius: var(--ds-scrollbar-r);
}

.ds-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--ds-nba-soft-pressed);
}

/* Угол на пересечении двух полос — красим как дорожку, иначе браузер рисует там
   свой светлый квадрат, который в тёмной теме светится. */
.ds-scroll::-webkit-scrollbar-corner {
  background: var(--_sb-track);
}

/* Скрыть полосу, оставив прокрутку. Отдельная роль, а не размер: применяется там,
   где полосу заменяет другой индикатор (в системе так делает .ds-tabs-list). */
.ds-scroll[data-hidden]::-webkit-scrollbar {
  display: none;
}
/* Стандартное свойство — снова только там, где нет вебкитовского псевдоэлемента.
   Написанное рядом, scrollbar-width:none отменило бы всё вебкитовское оформление
   у остальных вариантов — та же ловушка, что абзацем выше. */
@supports not selector(::-webkit-scrollbar) {
  .ds-scroll[data-hidden] {
    scrollbar-width: none;
  }
}