input[type="checkbox"] {
    /* default width and height */
    width: 13px;
    height: 13px;
}

:not(.dark) {
    input[type="checkbox"][disabled] {
        filter: invert(20%);
    }

    input[type="checkbox"][disabled][checked] {
        filter: invert(97%) brightness(2);
    }
}

:is(.dark) {
    input[type="checkbox"][disabled],
    input[type="checkbox"][disabled][checked] {
        filter: invert(100%) brightness(5);
    }
}
