/* switch.css — ядерный design-system toggle-switch (pill `.ctgl`).
 *
 * Кликабельный inline-переключатель bool-полей в списках (см. component
 * `bool_toggle_cell` + ws-команда `inline_toggle`). На клик ядро шлёт
 * `Action::SetClass{ class:"ctgl-on", on:<value> }` на тот же узел → нативный
 * CSS-transition анимирует слайд thumb (без перерисовки DOM).
 *
 * ON-цвет — токен `--ds-switch-on` (дефолт охровый). Проект перекрашивает switch
 * одной строкой в своём tokens.css: `--switch-on: #6366F1;` — весь pill
 * (фон/точка/glow) пересчитается (прозрачности — через color-mix от токена).
 */

.ctgl {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  padding: 0;
  /* reset UA-фона <button> — иначе на зуме проступает серый артефакт */
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  outline: none;
  flex-shrink: 0;
}

.ctgl-on {
  background: linear-gradient(135deg,
    var(--ds-switch-on),
    color-mix(in srgb, var(--ds-switch-on) 80%, transparent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--ds-switch-on) 25%, transparent),
              inset 0 1px 1px rgba(255, 255, 255, .15);
}

.ctgl-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(145deg, #555, #3a3a3a);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ctgl-on .ctgl-thumb {
  left: 22px;
  background: linear-gradient(145deg, #fff, #e8e8e8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.ctgl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  transition: all .3s;
}

.ctgl-on .ctgl-dot {
  background: var(--ds-switch-on);
  box-shadow: 0 0 4px color-mix(in srgb, var(--ds-switch-on) 50%, transparent);
}