CSS
.tg-out {
display: inline-flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-family: "Inter", "Segoe UI", system-ui, sans-serif;
font-size: 14px;
color: #f0eeff;
user-select: none;
}
.tg-out-input {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.tg-out-track {
position: relative;
width: 56px;
height: 28px;
background: transparent;
border: 1px solid #6a6a7a;
border-radius: 999px;
transition: border-color 0.2s ease;
box-sizing: border-box;
}
.tg-out-thumb {
position: absolute;
top: 50%;
left: 3px;
width: 20px; height: 20px;
border-radius: 50%;
background: transparent;
border: 1px solid #6a6a7a;
transform: translateY(-50%);
transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
background 0.2s ease,
border-color 0.2s ease;
}
.tg-out-input:checked ~ .tg-out-track {
border-color: #7c6cff;
}
.tg-out-input:checked ~ .tg-out-track .tg-out-thumb {
/* Inner width: 56 - 2 = 54. Thumb 20. Max left: 54-20-3 = 31. */
left: 31px;
background: #7c6cff;
border-color: #7c6cff;
}
.tg-out-input:focus-visible ~ .tg-out-track {
outline: 2px solid #7c6cff;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.tg-out-track,
.tg-out-thumb { transition: none; }
}