input[type="checkbox"] {
    height: 22px;
    width: 22px;
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    /* Not removed via appearance */
    outline: none;
    display: inline-flex;
    align-content: center;
    justify-content: center;
    vertical-align: middle;
    position: static; /* DAFUQ - why global absolute? */
    margin-left: 0; /* DAFUQ - why global margin -20? */

    &:focus {
        outline: none;
    }
    &::before {
        cursor: pointer;
        content: "";
        background: url("../../../../img/icon/checkbox/unchecked-ec43dd0742896d0c1397d99121e97e2a.svg") left bottom no-repeat;
        background-size: 22px 22px;
        height: 22px;
        width: 22px;
    }
    &:hover::before {
        content: "";
        background: url("../../../../img/icon/checkbox/hover-adf2a50993690924d64bc9cec28abad3.svg") left bottom no-repeat;
        background-size: 22px 22px;
        height: 22px;
        width: 22px;
    }

    &:checked::before {
        content: "";
        background: url("../../../../img/icon/checkbox/checked-c416dd81d43eadb62a558de119a47ab1.svg") left top no-repeat;
        background-size: 22px 22px;
        height: 22px;
        width: 22px;
        transform: translate(1px, -3px); /* To make it feel "middle aligned", compensating check mark */
    }
}

/** symfony forms applies a "checkbox" class to the div-tag surrounding the form widget */
div.checkbox {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    label {
        font-weight: 400;
        font-style: initial;
        &:hover {
            cursor: pointer;

            /** make the checkbox show its hover effect when hovering the label */
            input[type="checkbox"]::before:not(input[type="checkbox"]:checked) {
                content: "";
                background: url("../../../../img/icon/checkbox/hover-adf2a50993690924d64bc9cec28abad3.svg") left bottom no-repeat;
                background-size: 22px 22px;
                height: 22px;
                width: 22px;
            }
        }
    }
}