input[type="radio"] {
    width: 24px;
    height: 24px;
    position: relative;
    appearance: none;
    border: none;
    background-color: transparent;

    &:before {
        content: "";
        width: 22px;
        height: 22px;
        position: absolute;
        left: 0px;
        top: 0px;
        background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='14' height='14' fill='white'/%3E%3Crect x='4' y='2' width='4' height='2' fill='%23808080'/%3E%3Crect x='14' y='2' width='4' height='2' fill='%23808080'/%3E%3Crect x='8' width='6' height='2' fill='%23808080'/%3E%3Crect x='2' y='8' width='4' height='2' transform='rotate(-90 2 8)' fill='%23808080'/%3E%3Crect x='2' y='18' width='4' height='2' transform='rotate(-90 2 18)' fill='%23808080'/%3E%3Crect y='14' width='6' height='2' transform='rotate(-90 0 14)' fill='%23808080'/%3E%3Crect x='4' y='18' width='4' height='2' fill='white'/%3E%3Crect x='14' y='18' width='4' height='2' fill='white'/%3E%3Crect x='8' y='20' width='6' height='2' fill='white'/%3E%3Crect x='20' y='14' width='6' height='2' transform='rotate(-90 20 14)' fill='white'/%3E%3Crect x='18' y='8' width='4' height='2' transform='rotate(-90 18 8)' fill='white'/%3E%3Crect x='18' y='18' width='4' height='2' transform='rotate(-90 18 18)' fill='white'/%3E%3Crect x='8' y='18' width='6' height='2' fill='%23DEDEDE'/%3E%3Crect x='4' y='16' width='4' height='2' fill='%23DEDEDE'/%3E%3Crect x='14' y='16' width='4' height='2' fill='%23DEDEDE'/%3E%3Crect x='18' y='14' width='6' height='2' transform='rotate(-90 18 14)' fill='%23DEDEDE'/%3E%3Crect x='16' y='6' width='2' height='2' fill='%23DEDEDE'/%3E%3Crect x='16' y='14' width='2' height='2' fill='%23DEDEDE'/%3E%3Crect x='14' y='4' width='4' height='2' fill='black'/%3E%3Crect x='4' y='4' width='4' height='2' fill='black'/%3E%3Crect x='8' y='2' width='6' height='2' fill='black'/%3E%3Crect x='2' y='14' width='6' height='2' transform='rotate(-90 2 14)' fill='black'/%3E%3Crect x='4' y='14' width='2' height='2' fill='black'/%3E%3Crect x='4' y='6' width='2' height='2' fill='black'/%3E%3C/svg%3E%0A");
    }
    
    &:focus {
        outline: none;
    }

    &:checked {
        accent-color: var(--color-white);
        &:after {
            content: "";
            width: 8px;
            height: 8px;
            background-color: var(--color-white);
            background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 0H2V2L0 2V6H2V8H6V6H8V2L6 2V0Z' fill='black'/%3E%3C/svg%3E%0A");
            background-repeat: no-repeat;
            background-position: center;
            display: block;
            position: absolute;
            top: 7px;
            left: 7px;
        }
    }
    &:disabled {
        &:before {
            background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='14' height='14' fill='%23C3C3C3'/%3E%3Crect x='4' y='2' width='4' height='2' fill='%23808080'/%3E%3Crect x='14' y='2' width='4' height='2' fill='%23808080'/%3E%3Crect x='8' width='6' height='2' fill='%23808080'/%3E%3Crect x='2' y='8' width='4' height='2' transform='rotate(-90 2 8)' fill='%23808080'/%3E%3Crect x='2' y='18' width='4' height='2' transform='rotate(-90 2 18)' fill='%23808080'/%3E%3Crect y='14' width='6' height='2' transform='rotate(-90 0 14)' fill='%23808080'/%3E%3Crect x='4' y='18' width='4' height='2' fill='white'/%3E%3Crect x='14' y='18' width='4' height='2' fill='white'/%3E%3Crect x='8' y='20' width='6' height='2' fill='white'/%3E%3Crect x='20' y='14' width='6' height='2' transform='rotate(-90 20 14)' fill='white'/%3E%3Crect x='18' y='8' width='4' height='2' transform='rotate(-90 18 8)' fill='white'/%3E%3Crect x='18' y='18' width='4' height='2' transform='rotate(-90 18 18)' fill='white'/%3E%3Crect x='8' y='18' width='6' height='2' fill='%23DEDEDE'/%3E%3Crect x='4' y='16' width='4' height='2' fill='%23DEDEDE'/%3E%3Crect x='14' y='16' width='4' height='2' fill='%23DEDEDE'/%3E%3Crect x='18' y='14' width='6' height='2' transform='rotate(-90 18 14)' fill='%23DEDEDE'/%3E%3Crect x='16' y='6' width='2' height='2' fill='%23DEDEDE'/%3E%3Crect x='16' y='14' width='2' height='2' fill='%23DEDEDE'/%3E%3Crect x='14' y='4' width='4' height='2' fill='black'/%3E%3Crect x='4' y='4' width='4' height='2' fill='black'/%3E%3Crect x='8' y='2' width='6' height='2' fill='black'/%3E%3Crect x='2' y='14' width='6' height='2' transform='rotate(-90 2 14)' fill='black'/%3E%3Crect x='4' y='14' width='2' height='2' fill='black'/%3E%3Crect x='4' y='6' width='2' height='2' fill='black'/%3E%3C/svg%3E%0A");
        }
        &:checked:after {
            width: 9px;
            height: 9px;
            background-image: url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 1H3V3L1 3V7H3V9H7V7H9V3L7 3V1Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 0H2V2L0 2V6H2V8H6V6H8V2L6 2V0Z' fill='%23808080'/%3E%3C/svg%3E%0A");
        }
    }
}