/* Toggle Button — WowVendor DS. Кнопка-сегмент для элемента управления
   Button Group (переключатель).

   Оси component set (805:38338): Size(sm/md) × State(default/hover/active/
   disabled) × Accent(off/on). Interaction в Figma один — Default.

   Семантика Accent: различие Off/On проявляется ТОЛЬКО в Hover и Active.
     - Default  — прозрачный фон, текст gray-900 (Off и On одинаковы).
     - Hover    — фон gray-0; текст gray-900 (Off) / accent-600 (On).
     - Active   — «выбран»: Off = белый чип + shadow-12; On = заливка
                  accent-400, текст gray-0, shadow-4.
     - Disabled — прозрачный, текст gray-200 (Off и On одинаковы).

   Значения — только токены. Радиус 6px = --radius-6 (заведён в tokens.css под
   этот компонент — в Figma был захардкожен без переменной). Типографика —
   utility-классами в разметке (.text-body-14m у md / .text-body-12m у sm).
   Badge — переиспользованный под-компонент badge (green primary sm), опц.
   оверлей снизу-по-центру. */

.tgl {
  /* Переменные состояния — дефолт (State=Default) */
  --tgl-bg: transparent;
  --tgl-fg: var(--color-gray-900);
  --tgl-shadow: none;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  border: none;
  border-radius: var(--radius-6);
  background: var(--tgl-bg);
  color: var(--tgl-fg);
  box-shadow: var(--tgl-shadow);
  font-family: var(--font-family-base);
  white-space: nowrap;
  cursor: pointer;
}

.tgl__label { color: inherit; }

/* ---- Размеры ---- */
.tgl--md { padding: var(--spacing-8) var(--spacing-16); }
.tgl--sm { padding: var(--spacing-4) var(--spacing-8); }

/* ==== Состояния (статичные модификаторы для showcase/сверки) ==== */
/* Hover: белый фон; у Accent=On текст синий accent-600 */
.tgl--hover            { --tgl-bg: var(--color-gray-0); }
.tgl--hover.tgl--on    { --tgl-fg: var(--color-accent-600); }

/* Active (выбран): Off — белый чип с подъёмом shadow-12;
   On — синяя заливка accent-400, белый текст, shadow-4 */
.tgl--active           { --tgl-bg: var(--color-gray-0); --tgl-shadow: var(--shadow-12); }
.tgl--active.tgl--on   { --tgl-bg: var(--color-accent-400); --tgl-fg: var(--color-gray-0); --tgl-shadow: var(--shadow-4); }

/* Disabled: прозрачный, приглушённый текст */
.tgl--disabled         { --tgl-bg: transparent; --tgl-fg: var(--color-gray-200); --tgl-shadow: none; cursor: default; }

/* ---- Badge-оверлей (снизу по центру, свисает за нижнюю грань) ---- */
.tgl__badge {
  position: absolute;
  left: calc(50% + 0.5px);
  top: var(--spacing-32);
  transform: translateX(-50%);
}

/* ==== Живое демо (реальные :hover / клик) ==== */
/* Базовый вид «невыбран»; при наведении — белый фон. Hover НЕ применяется к уже
   выбранному сегменту (aria-pressed=true) — иначе у Accent=On текст перекрывался
   на синий accent-600 поверх синей заливки active. */
.tgl--live:not(:disabled):not([aria-pressed="true"]):hover { --tgl-bg: var(--color-gray-0); }
.tgl--live.tgl--on:not(:disabled):not([aria-pressed="true"]):hover { --tgl-fg: var(--color-accent-600); }
.tgl--live:disabled { --tgl-bg: transparent; --tgl-fg: var(--color-gray-200); --tgl-shadow: none; cursor: default; }
/* Выбранный сегмент (aria-pressed=true) — состояние Active */
.tgl--live[aria-pressed="true"] { --tgl-bg: var(--color-gray-0); --tgl-shadow: var(--shadow-12); }
.tgl--live.tgl--on[aria-pressed="true"] { --tgl-bg: var(--color-accent-400); --tgl-fg: var(--color-gray-0); --tgl-shadow: var(--shadow-4); }
.tgl--live:focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: 2px; }