/* ─── Action Toast ──────────────────────────────────────────────────────────────
   Values: site/tokens.css — новых токенов нет.
     --ds-type-body-2c-* и --ds-type-body-1c-* у счётчика — из типографической шкалы, которая с
     2026-09-17 объявлена в site/tokens.css (84 имени). До того источников было два и шкала жила в
     site/css/typography.css (реестр TOKENS-DEFINED-OUTSIDE-TOKENS-CSS); этот файл удалён 2026-09-22
     (TYPOGRAPHY-MOVE-LEAVES-DEAD-FILE-AND-LINKS).
   Primary consumers: site/preview/action-toast.html + src/components/ActionToast/ActionToast.tsx
   Figma: Components isVYOT7tW0RTaIofg7FAqM, страница «↳ Action Toast» 2548:30308,
     набор 2548:33637 — 4 варианта, оси Type Icon|Text · Size SM|MD, слоты Items icons / Items text
   Поведение: 03_Components/ActionToast/source/*.pdf (владелец, 2026-09-15)
   States: data-attributes only (появление и уход — data-leaving ставит React)

   Размеры заданы в вариантах Size переменными L1 - Dimensions напрямую (замер Plugin API
   2026-09-15); локальная коллекция «❖ Action Toast» 2548:33451 пуста и ни к чему не привязана.

   Цвета — привязки макета и их токены (обратный поиск по значениям всех 4 мод):
     Static/Surface/Neutral/Overlay      → --ds-surface-neutral-overlay
     Static/Border/Neutral-Blue/Low      → --ds-stroke-low
     Shadow/lg (две тени 0 8 16 и 0 16 48) → --ds-shadow-lg
     Static/Text/Neutral-Blue/Tertiary   → --ds-text-tertiary
   Кнопки, разделители и меню «Ещё» — готовые Button / Divider / DropdownMenu со своими
   цветами. Все токены сами переключаются по темам, включая инверт.
   ─────────────────────────────────────────────────────────────────────────── */

.ds-action-toast {
  /* SM */
  --_radius:      calc(var(--ds-comp-unit) * 3);     /* Radius/rad-150 — 12 */
  --_gap:         var(--ds-comp-unit);               /* Gap/gap-50 — 4 */
  --_count-pad:   calc(var(--ds-comp-unit) * 2);     /* Padding/pad-100 — 8 */
  --_count-fs:    var(--ds-type-body-2c-size);       /* ✦ Body 2 compact — 14 */
  --_count-lh:    var(--ds-type-body-2c-lh);         /* 16 */
  --_offset:      calc(var(--ds-comp-unit) * 4);     /* отступ снизу — 16 */
  /* Рамка — внутренней тенью: обводка макета внутренняя, высоту 48 / 56 не прибавляет. */
  --_frame:       inset 0 0 0 1px var(--ds-stroke-low);

  display:        inline-flex;
  align-items:    center;
  box-sizing:     border-box;
  padding:        calc(var(--ds-comp-unit) * 2);     /* Padding/pad-100 — 8, у обеих ступеней */
  border-radius:  var(--_radius);
  background:     var(--ds-surface-neutral-overlay);
  box-shadow:     var(--_frame), var(--ds-shadow-lg);
  font-family:    var(--ds-font);
  outline:        none;
  animation:      ds-action-toast-in var(--ds-dur-2) var(--ds-ease);
}

.ds-action-toast[data-size='md'] {
  --_radius:      calc(var(--ds-comp-unit) * 4);     /* Radius/rad-200 — 16 */
  --_gap:         calc(var(--ds-comp-unit) * 1.5);   /* Gap/gap-75 — 6 */
  --_count-pad:   calc(var(--ds-comp-unit) * 2.5);   /* Description/Padding — 10 */
  --_count-fs:    var(--ds-type-body-1c-size);       /* ✦ Body 1 compact — 16 */
  --_count-lh:    var(--ds-type-body-1c-lh);         /* 20 */
}

/* Слот действий. Кнопки задают высоту ряда (32 / 40). */
.ds-action-toast__items {
  display:        flex;
  align-items:    center;
  gap:            var(--_gap);
}
/* Иконки в кнопках — толщина токеном кнопки по её размеру (❖ Button Icon/Stroke). button.css
   даёт её только [data-lucide] и шеврону; у встроенных «Ещё» и крестика и у иконок действий,
   которые передаёт потребитель, атрибута нет — без правила толщина 1 (замер витрины
   2026-09-15: 1px при 16 и 20 против 2.25 / 2.4). Спиннер загрузки — кольцо из рамки, не svg. */
.ds-action-toast .ds-btn[data-size='sm'] :is(.ds-btn-icon-left, .ds-btn-icon-right, .ds-btn-icon-content) svg {
  stroke-width:   var(--ds-btn-sm-stroke);
}
.ds-action-toast .ds-btn[data-size='md'] :is(.ds-btn-icon-left, .ds-btn-icon-right, .ds-btn-icon-content) svg {
  stroke-width:   var(--ds-btn-md-stroke);
}

.ds-action-toast__count {
  padding:        var(--_count-pad);
  font-size:      var(--_count-fs);
  line-height:    var(--_count-lh);
  font-weight:    400;                               /* Typography/Weight/regular */
  color:          var(--ds-text-tertiary);
  white-space:    nowrap;
}

/* ── Расположение ─────────────────────────────────────────────────────────── */
/* Оверлей по центру у нижнего края экрана. Слой — на единицу ниже модального окна: модалка,
   открытая действием панели, её перекрывает, уведомления (--ds-notification-z) лежат выше.
   Своего токена слоя нет — выражено отношением к модалке, а не отдельным числом. */
.ds-action-toast[data-floating] {
  position:       fixed;
  left:           50%;
  bottom:         var(--_offset);
  z-index:        calc(var(--ds-modal-z) - 1);
  transform:      translateX(-50%);
  /* ГРАНИЦА ШИРИНЫ панели. Плавающая панель вынута из потока и растёт по содержимому без
     предела — без этой строки она просто уезжает за край экрана. Предел — доступная ширина
     за вычетом двух отступов, тех же, что держат панель над нижним краем.
     ЧЕГО ЭТА СТРОКА НЕ ДЕЛАЕТ: автоперенос действий в «Ещё» она не включает и не выключает.
     Здесь стояло «без неё перенос мёртв по построению» и «замер считает именно от этой
     границы» — и то и другое неверно, снято приёмкой 2026-09-17. Состав ряда решает замер в
     ActionToast.tsx, и знаменатель он берёт сам, снаружи панели: clientWidth области
     просмотра минус два отступа. Величина близкая, но не эта — 100vw включает полосу
     прокрутки, clientWidth её исключает. */
  max-width:      calc(100vw - var(--_offset) * 2);
}

/* Ряд отступов из PDF «Расположение и адаптивность»: 16 · 24 · 32 · 40 · 48 · 56. */
.ds-action-toast[data-offset='24'] { --_offset: calc(var(--ds-comp-unit) * 6); }
.ds-action-toast[data-offset='32'] { --_offset: calc(var(--ds-comp-unit) * 8); }
.ds-action-toast[data-offset='40'] { --_offset: calc(var(--ds-comp-unit) * 10); }
.ds-action-toast[data-offset='48'] { --_offset: calc(var(--ds-comp-unit) * 12); }
.ds-action-toast[data-offset='56'] { --_offset: calc(var(--ds-comp-unit) * 14); }

/* ── Фокус панели ─────────────────────────────────────────────────────────── */
/* Панель получает фокус только в загрузке: запущенная кнопка выключается, и браузер снимает с
   неё фокус. Кольцо — поверх рамки и под тенью, чтобы фокус оставался видимым. */
.ds-action-toast:focus-visible {
  box-shadow:     var(--_frame), var(--ds-focus-ring), var(--ds-shadow-lg);
}

/* ── Движение ─────────────────────────────────────────────────────────────── */
/* Прозрачность и сдвиг через translate — отдельное свойство, поэтому translateX(-50%)
   плавающей панели не перебивается. Раскладку анимация не трогает. */
@keyframes ds-action-toast-in {
  from { opacity: 0; translate: 0 calc(var(--ds-comp-unit) * 2); }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes ds-action-toast-out {
  from { opacity: 1; translate: 0 0; }
  to   { opacity: 0; translate: 0 calc(var(--ds-comp-unit) * 2); }
}

/* forwards — без него на последнем кадре панель скачком вернулась бы на место, пока React её
   снимает; pointer-events: none — по уходящей панели нельзя кликнуть. */
.ds-action-toast[data-leaving] {
  animation:      ds-action-toast-out var(--ds-dur-2) var(--ds-ease) forwards;
  pointer-events: none;
}

/* Второй селектор не дубль: у правила ухода специфичность (0,2,0), и голый класс его бы не
   перебил — тот же случай, что пойман замером у notification.css. */
@media (prefers-reduced-motion: reduce) {
  .ds-action-toast,
  .ds-action-toast[data-leaving] {
    animation:    none;
  }
}