┌─ SCSS ────────────────────────────────────────────────────────────────────[ COPY ]─┐
│ .theme-toggle {                                                                    │
│   appearance: none;                                                                │
│   background: transparent;                                                         │
│   border: 0;                                                                       │
│   padding: 0;                                                                      │
│   margin: 0;                                                                       │
│   font: inherit;                                                                   │
│   color: var(--ink);                                                               │
│   cursor: pointer;                                                                 │
│   white-space: pre;                                                                │
│   letter-spacing: 0;                                                               │
│                                                                                    │
│   &:hover .theme-toggle-icon {                                                     │
│     text-decoration: underline;                                                    │
│     text-underline-offset: 3px;                                                    │
│   }                                                                                │
│                                                                                    │
│   &:focus-visible {                                                                │
│     outline: 1px dashed var(--ink);                                                │
│     outline-offset: 1px;                                                           │
│   }                                                                                │
│ }                                                                                  │
│                                                                                    │
│ [data-theme="dark"] .theme-toggle-icon {                                           │
│   display: inline-block;                                                           │
│   transform: rotate(180deg);                                                       │
│ }                                                                                  │
└────────────────────────────────────────────────────────────────────────────────────┘

┌─ SCSS ──────────────────────────────[ COPY ]─┐
│ .theme-toggle {                              │
│   appearance: none;                          │
│   background: transparent;                   │
│   border: 0;                                 │
│   padding: 0;                                │
│   margin: 0;                                 │
│   font: inherit;                             │
│   color: var(--ink);                         │
│   cursor: pointer;                           │
│   white-space: pre;                          │
│   letter-spacing: 0;                         │
│                                              │
│   &:hover .theme-toggle-icon {               │
│     text-decoration: underline;              │
│     text-underline-offset: 3px;              │
│   }                                          │
│                                              │
│   &:focus-visible {                          │
│     outline: 1px dashed var(--ink);          │
│     outline-offset: 1px;                     │
│   }                                          │
│ }                                            │
│                                              │
│ [data-theme="dark"] .theme-toggle-icon {     │
│   display: inline-block;                     │
│   transform: rotate(180deg);                 │
│ }                                            │
└──────────────────────────────────────────────┘