/* Переключатель (toggle switch) — отдельный компонент, как select.js.
   Построен на переменных темы из app.css, поэтому поддерживает и светлую,
   и тёмную тему: трек в выключенном состоянии — инсет-поверхность
   (--surface-solid) с рамкой --line, ручка выключенного — приглушённый
   текст --muted, включённого — белая. Во включённом состоянии тёмная тема
   берёт акцент --brand, светлая — собственные цвета (см. блок ниже). */

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

.toggle-track {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  border-radius: 13px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.toggle-track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.18s ease, background 0.18s ease;
}

.toggle-input:checked + .toggle-track {
  background: var(--brand);
  border-color: var(--brand);
}

/* Светлая тема: включённый трек — мятный (#3ca695), рамка того же тона,
   ручка выключенного — тоже мятная; ручка включённого остаётся белой,
   иначе она сливается с треком одного цвета. */
:root:not([data-theme="dark"]) .toggle-input:checked + .toggle-track {
  background: #3ca695;
  border-color: #3ca695;
}

:root:not([data-theme="dark"]) .toggle-track::before {
  background: #3ca695;
}

:root:not([data-theme="dark"]) .toggle-input:checked + .toggle-track::before {
  background: #fff;
}

.toggle-input:checked + .toggle-track::before {
  transform: translateX(18px);
  background: #fff;
}

/* Фокус — как у прочих контролов: рамка акцента + мягкое кольцо
   (цвет кольца разный в светлой/тёмной теме, см. app.css). */
.toggle-input:focus-visible + .toggle-track,
.toggle-input:focus + .toggle-track {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15, 106, 90, 0.15);
}

:root[data-theme="dark"] .toggle-input:focus-visible + .toggle-track,
:root[data-theme="dark"] .toggle-input:focus + .toggle-track {
  box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
}

.toggle-input:disabled + .toggle-track {
  opacity: 0.45;
}

.toggle.is-disabled {
  cursor: not-allowed;
}

.toggle-label {
  font-size: 0.9rem;
  color: var(--muted);
}

.toggle-input:checked ~ .toggle-label {
  color: var(--ink);
}