input[type="checkbox"].toggle {
    opacity: 0;
    position: absolute;
    left: -9000px;
    top: -9000px;
}

input[type="checkbox"].toggle + label {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 4em;
    cursor: pointer; 
}

input[type="checkbox"].toggle + label::before {
    content: "";
    width: 2em;
    height: 1em;
    background-color: #111;
    border-radius: 1em;
    margin-right: 0.25em;
    transition: background-color 200ms ease-in-out;
}

input[type="checkbox"].toggle + label::after {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0.2em;
    content: "\2715";
    font-size: .5em;
    width: 1.8em;
    height: 1.8em;
    background-color: #fff;
    color: #222;
    border-radius: 1em;
    transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
    animation: check-fade 200ms ease-in-out reverse;
}

input[type="checkbox"].toggle:focus + label::before {
    outline: 1px solid red;
}

input[type="checkbox"].toggle:checked + label::after {
    transform: translateX(1.8em); 
    content: "\2713";
    color: #fff;
    background-color: #222;
    animation: check-fade 200ms ease-in-out forwards;
}

input[type="checkbox"].toggle:checked + label::before {
    background-color: #999;
}

input[type="checkbox"].toggle:checked + label {
    color: red;
}

@keyframes check-fade {
    0% {
   opacity: 1;
   content: "\2715" ;
    }
    50% {
        opacity: 0;
        content: "\2715" ;
    }
    100% {
        opacity: 1;
        content: "\2713" ;
    }
}

input[type="checkbox"].toggle:disabled + label {
    color: #777;
    cursor: not-allowed;
}

input[type="checkbox"].toggle:disabled + label::before {
    background-color: #777;
}

input[type="checkbox"].toggle:disabled + label::after {
    background-color: #ccc;
    color: #999;
}