.checkbox {
    cursor:  pointer;
}

.checkbox input {
    display:  none;
}

.checkbox__trigger {
    width:  1.5rem;
    height:  1.5rem;
    background-color: transparent;
    border-radius:  0rem;
    box-shadow: inset 0px 0px 0px 0.1875rem var(--color__fill-1);
    transition: all ease 0.24s;
    background-repeat:  no-repeat;
    background-position: center .167rem;
    background-size: 1rem;
    border-radius: .25rem;
}

.checkbox__label {
    margin:  0rem;
    flex: 1;
    transition: all ease 0.32s;
    font-weight: 600;
}

.checkbox:hover .checkbox__label {
    opacity: .56;
}

.checkbox input:checked + * > .checkbox__label {
    color: var(--color__fill-1);
}

.checkbox input:checked + * > .checkbox__trigger {
    background-color: var(--color__fill-1);
    top: -.15rem;
}

.checkbox input:disabled + * > .checkbox__label {
    color: var(--color__black);
    opacity: 0.24;
    pointer-events: none;
}

.checkbox input:disabled + * > .checkbox__trigger {
    box-shadow: inset 0px 0px 0px 0.1875rem var(--color__dark);
    opacity: 0.24;
    pointer-events: none;
}

.checkbox:hover input:disabled + * > .checkbox__trigger {
    background-color: transparent;
}

.checkbox input:checked + * > .checkbox__trigger {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 5.33329L7.33333 16L2 10.6666' stroke='white' stroke-width='4'/%3E%3C/svg%3E%0A");
}