:root {
    --svgCheckboxBackground: white;
    --svgCheckboxFill: white;
    --svgCheckboxStroke: gray;
    --svgCheckboxFillChecked: blue;
    --svgRadioBackground: white;
    --svgRadioFill: white;
    --svgRadioStroke: gray;
    --svgRadioFillChecked: blue;
    --svgWidth: 20px;
    --svgHeight: 20px;
    --svgCheckboxStrokeWidth: 1px;
    --svgRadioStrokeWidth: 1px;
    --svgRadioRadius: 5px;
    --svgDisplay: none;
    --inputDisplay: initial;
}

input[type='radio'], input[type='checkbox'] {
    display: var(--inputDisplay);
}

.svg_checkbox, .svg_radio {
    width: var(--svgWidth);
    height: var(--svgHeight);
    display: var(--svgDisplay);
}

.svg_radio_circle {
    r: var(--svgRadioRadius);
}

input[type='radio']:checked + label {
    --svgRadioFill: var(--svgRadioFillChecked);
}

input[type='checkbox']:checked + label {
    --svgCheckboxFill: var(--svgCheckboxFillChecked);
}