:root{--white:#f0f0f0;--light-grey:#e4e4e4;--black:#111;--dark-grey:#272727;--bg:var(--white);--txt:var(--black);--dark-opacity:0;--light-opacity:1}.checkbox{display:none}.label{display:flex;align-items:center;justify-content:space-between;position:relative;background:var(--txt);border-radius:5rem;padding:.35rem;height:2rem;width:4rem;font-size:1.15rem;transition:background .5s ease;cursor:pointer;z-index:1}.label .ball{position:absolute;background-color:var(--bg);border-radius:50%;top:.22rem;left:.22rem;height:1.55rem;width:1.55rem;transform:translateX(0);transition:transform .3s ease,background-color .5s ease}.checkbox:checked+.label{--bg:var(--black);--txt:var(--white);--dark-opacity:1;--light-opacity:0}.checkbox:checked+.label .ball{transform:translateX(1.95rem);background-color:var(--bg)}