.switch {
cursor: pointer;
position: relative;
}
.switch-input {
border: 0px;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
width: 1px;
margin: -1px;
padding: 0px;
overflow: hidden;
white-space: nowrap;
position: absolute;
}
.switch-track {
position: relative;
transition: background 0.1s ease;
background: var(--gray600);
border-radius: 999px;
transition: transform 0.1s ease-out;
}
.switch-input:focus-visible + .switch-track {
outline: 1px solid #fff;
outline-offset: 1px;
}
.switch[data-enabled="true"] .switch-track {
background: white;
}
.switch-dot {
background: white;
border-radius: 50%;
position: absolute;
top: 1px;
transition: transform 0.1s ease-out;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
}
.switch[data-enabled="true"] .switch-dot {
background: var(--black);
}