.checkbox-basic {
    --_accent: #e74c3c;
    --_mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="3" stroke="%23000" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path d="M5 12l5 5l10 -10"/></svg>');

    appearance: none;
    aspect-ratio: 1;
    background: var(--_bg, Field);
    border: 2px solid rgba(154, 167, 182, 0.4);
    box-sizing: border-box;

    font-size: 1.5em;
    height: 1em;
    position: relative;
    width: 1em;
    
    cursor: pointer;
}

.checkbox-basic:checked {
    --_bg: var(--_bg--checked, var(--_accent));
    --_bga: var(--_bga--checked, Field);
}

.checkbox-basic::after {
    background: var(--_bga, transparent);
    content: "";
    inset: 0;
    position: absolute;
    mask: var(--_mask) no-repeat center / contain;
    -webkit-mask: var(--_mask) no-repeat center / contain;
}