.checkbox input { opacity: 0; position: absolute; z-index: -1; }
.checkbox span { display: inline-flex; height: var(--ch-size); width: 1.2em; height: 1.5em; box-sizing: border-box; border: 2px solid #777; color: #FFF; border-radius: .25em; line-height: var(--ch-size); align-items: center; justify-content: center; font: bold 1em sans-serif; transition: .2s; }
.checkbox input:focus ~ span { border-color: var(--col-blue); }
.checkbox span:first-of-type { border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; background: #777; }
.checkbox input:checked + span { background: #FFF; border-color: var(--col-blue); }
.checkbox span:last-of-type { border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; background: #FFF; }
.checkbox input:checked + span + span { background: var(--col-blue); border-color: var(--col-blue); }