src/app/components/Switch/index.css
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
background-color: #ccc;
transition: 0.4s;
}
.slider::before {
position: absolute;
bottom: 2px;
left: 2px;
width: 13px;
height: 13px;
content: "";
background-color: white;
transition: 0.4s;
}
input:checked + .slider {
background-color: var(--accent);
}
input:focus + .slider {
box-shadow: 0 0 1px var(--primary-dark); /* works ? */
}
input:checked + .slider::before {
transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
border-radius: 17px;
}
.slider.round::before {
border-radius: 50%;
}