Slider checkbox

[quartertone]

input[type="checkbox"].slider {

--offborder: #888; --onborder: #55c; --offslider: #ccc; --onslider: #55c; --offbg: #777; --onbg: #ddd;

appearance:none; display:inline-block; width: 3em; height: 1.5em; padding:0.5em; line-height: 1em; vertical-align: middle; position:relative; border: 0.1em solid var(--offborder); border-radius: 1em; background: var(--offbg); transition: all 0.25s linear;

&:checked { background: var(--onbg); border-color: var(--onborder); }

&::after { content: ""; position:absolute; display:block; height: 1em; width: 1em; left:0.15em; top: 50%; transform: translate(0,-50%); border-radius:1em; background:var(--offslider); transition: all 0.15s linear;

}

&:checked::after { left:calc(100% - 1.15em); background:var(--onslider); }

}