CSS
.tg-md {
display: inline-flex;
align-items: center;
gap: 14px;
cursor: pointer;
font-family: "Roboto", "Google Sans", sans-serif;
font-size: 14px;
color: #e6e0e9;
user-select: none;
}
.tg-md-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-md-track {
position: relative;
width: 52px;
height: 32px;
background: #49454f;
border: 2px solid #79747e;
border-radius: 999px;
transition: background 0.2s ease, border-color 0.2s ease;
box-sizing: border-box;
}
.tg-md-thumb {
position: absolute;
top: 50%;
left: 6px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #cac4d0;
transform: translateY(-50%);
transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
width 0.15s ease,
height 0.15s ease,
background 0.2s ease;
}
.tg-md-input:checked ~ .tg-md-track {
background: #d0bcff;
border-color: #d0bcff;
}
.tg-md-input:checked ~ .tg-md-track .tg-md-thumb {
/* Inner width is 48px (52 - 2px border × 2). Thumb grows to 24px
on-state, so max left value that keeps the thumb fully inside the
border is 48 - 24 = 24px, minus 2px breathing room = 22px. */
left: 22px;
width: 24px;
height: 24px;
background: #381e72;
}
.tg-md-input:focus-visible ~ .tg-md-track {
outline: 2px solid #d0bcff;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.tg-md-track,
.tg-md-thumb { transition: none; }
}