input[type="radio"] {
    height: 30px;
    width: 25px;
    /* 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: relative; /* DAFUQ - why global absolute? */
    margin-left: 0; /* DAFUQ - why global margin -20? */

    &:focus {
        outline: none;
    }
    &::before {
        cursor: pointer;
        content: "";
        background: url("../../../../img/icon/radio/unselected-6b56ffd483ec19988a8cc0a43e5557ef.svg") left bottom no-repeat;
        background-size: 25px 25px;
        height: 25px;
        width: 25px;
    }

    &:hover:not([checked])::before {
        content: "";
        background: url("../../../../img/icon/radio/selected-af52203c30f4cdffe2a8c79cdf009e40.svg") left bottom no-repeat;
        background-size: 25px 25px;
        height: 25px;
        width: 25px;
        opacity: .5;
    }

    &:checked::before {
        content: "";
        background: url("../../../../img/icon/radio/selected-af52203c30f4cdffe2a8c79cdf009e40.svg") left top no-repeat;
        background-size: 25px 25px;
    }

    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus,
    &[disabled]:hover::before,
    &[disabled]::before:hover {
        cursor: not-allowed;
        user-select: none;
        opacity: 90%;
        box-shadow: none;
        filter: saturate(20%);
        pointer-events: none;
        opacity: 1;
    }
}

/** symfony forms applies a "radio" class to the div-tag surrounding the form widget */
div.radio {
    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="radio"]::before:not(input[type="radio"]:checked) {
                content: "";
                background: url(../../../../img/icon/radio/hover.svg) left bottom no-repeat;
                background-size: 22px 22px;
                height: 22px;
                width: 22px;
            }
        }
    }
}