┌─ SCSS ────────────────────────────────────────────────────────────────────[ COPY ]─┐
│ .switch {                                                                          │
│   cursor: pointer;                                                                 │
│   white-space: pre;                                                                │
│                                                                                    │
│   input {                                                                          │
│     position: absolute;                                                            │
│     opacity: 0;                                                                    │
│     width: 1px;                                                                    │
│     height: 1px;                                                                   │
│     margin: 0;                                                                     │
│     pointer-events: none;                                                          │
│   }                                                                                │
│                                                                                    │
│   .switch-mark::before {                                                           │
│     content: "[ off ]";                                                            │
│     color: var(--ink-soft);                                                        │
│   }                                                                                │
│   input:checked + .switch-mark::before {                                           │
│     content: "[ ON  ]";                                                            │
│     color: var(--paper);                                                           │
│     background: var(--ink);                                                        │
│     font-weight: 700;                                                              │
│   }                                                                                │
│                                                                                    │
│   input:focus-visible + .switch-mark {                                             │
│     outline: 1px dashed var(--ink);                                                │
│     outline-offset: 1px;                                                           │
│   }                                                                                │
│                                                                                    │
│   &:hover:not(:has(input:disabled)) {                                              │
│     text-decoration: underline;                                                    │
│     text-underline-offset: 3px;                                                    │
│   }                                                                                │
│                                                                                    │
│   &:has(input:disabled) {                                                          │
│     color: var(--ink-soft);                                                        │
│     opacity: 0.55;                                                                 │
│     cursor: not-allowed;                                                           │
│   }                                                                                │
│ }                                                                                  │
└────────────────────────────────────────────────────────────────────────────────────┘

┌─ SCSS ──────────────────────────────[ COPY ]─┐
│ .switch {                                    │
│   cursor: pointer;                           │
│   white-space: pre;                          │
│                                              │
│   input {                                    │
│     position: absolute;                      │
│     opacity: 0;                              │
│     width: 1px;                              │
│     height: 1px;                             │
│     margin: 0;                               │
│     pointer-events: none;                    │
│   }                                          │
│                                              │
│   .switch-mark::before {                     │
│     content: "[ off ]";                      │
│     color: var(--ink-soft);                  │
│   }                                          │
│   input:checked + .switch-mark::before {     │
│     content: "[ ON  ]";                      │
│     color: var(--paper);                     │
│     background: var(--ink);                  │
│     font-weight: 700;                        │
│   }                                          │
│                                              │
│   input:focus-visible + .switch-mark {       │
│     outline: 1px dashed var(--ink);          │
│     outline-offset: 1px;                     │
│   }                                          │
│                                              │
│   &:hover:not(:has(input:disabled)) {        │
│     text-decoration: underline;              │
│     text-underline-offset: 3px;              │
│   }                                          │
│                                              │
│   &:has(input:disabled) {                    │
│     color: var(--ink-soft);                  │
│     opacity: 0.55;                           │
│     cursor: not-allowed;                     │
│   }                                          │
│ }                                            │
└──────────────────────────────────────────────┘