.switch-wrapper {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
input {
opacity: 0;
width: 0;
height: 0;
&:checked + .slider {
background-color: #2563eb;
&:before {
transform: translateX(20px);
}
}
&:focus-visible + .slider {
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}
&:disabled + .slider {
opacity: 0.5;
cursor: not-allowed;
}
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #cbd5e1;
transition: background-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 180ms ease;
&:before {
position: absolute;
content: '';
height: 20px;
width: 20px;
left: 2px;
bottom: 2px;
background-color: #ffffff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12),
0 2px 4px rgba(15, 23, 42, 0.08);
transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
&.round {
border-radius: 999px;
&:before { border-radius: 50%; }
}
}
}
@media (prefers-reduced-motion: reduce) {
.switch-wrapper .slider,
.switch-wrapper .slider:before { transition: none; }
}