.checkbox input { height: 0; width: 0; display: none; } .checkbox span { font-size: 0.875rem; color: var(--colour-2); margin-left: 4px; } .checkbox label:after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 5px; width: 20px; height: 20px; background: var(--blur-border); border-radius: 90px; transition: 0.33s; } .checkbox input + label:after, .checkbox input:checked + label { background: var(--colour-3); } .checkbox input + label, .checkbox input:checked + label:after { background: var(--blur-border); } .checkbox input:checked + label:after { left: calc(100% - 5px - 20px); } @media screen and (max-width: 990px) { .checkbox label { width: 25px; height: 15px; } .checkbox label:after { left: 2px; width: 10px; height: 10px; } .checkbox input:checked + label:after { left: calc(100% - 2px - 10px); } }