/**
 * @file toggle-switch.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The toggle switch: on or off.
 *   Reads only the tokens in theme.css. The rules are theme.css's, moved unchanged and in order.
 * @usage Linked from public/spa.html right after theme.css, in the order theme.css held these rules
 *   (the shell block), and from every standalone page that links theme.css.
 * @version-history
 *   v1.0.0 — 2026-09-24 — Moved unchanged from css/theme.css (lines 1611-1626), so theme.css
 *     holds tokens only (UI consolidation, a move).
 */

/* ── Toggle Switch (canonical /components/ToggleSwitch.js, #14) ── */
.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: relative; display: inline-block; width: 44px; height: 24px;
  background: var(--border); border-radius: 12px; transition: background 0.2s;
}
.toggle-slider::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle-input:checked + .toggle-slider { background: var(--success); }
.toggle-input:checked + .toggle-slider::after { transform: translateX(20px); }
.toggle-label { font-size: var(--text-note); color: var(--text); }