Zoom in and out changing the position of the radio button - css

Question

How can I fix the problem when zooming in and out(e.g. 80%) the checked radio button is slightly changing the position of the dot in the radio button?
Tried position fixed but it didn't help.Something to do with width and height probably but I can't figure out.
This is how it looks after zooming out
input[type="radio"] {
-webkit-appearance : none;
width : 20px;
height : 20px;
border-radius : 50%;
/* outline : none; */
border : 3px solid gray;
}
input[type="radio"]:before {
content : "";
display : block;
width : 60%;
height : 60%;
margin : 20% auto;
border-radius : 50%;
}
input[type="radio"]:checked:before {
background : green;
}
input[type="radio"]:checked {
border-color : green;
}
.role {
margin-right : 80px;
margin-left : 20px;
font-weight : normal;
}
.checkbox label {
margin-bottom : 20px !important;
}
.roles {
margin-bottom : 40px;
}
<div class="roles">
<input type="radio" name="role" value="ONE" id="one" />
<label class="role" for="one">ONE</label>
<input type="radio" name="role" value="TWO" id="two" />
<label class="role" for="two">TWO</label>
</div>

Answer 1

To achieve expected result, using display:flex for class roles and align-items:center for aligning vertically
Sample working code below and codepen- https://codepen.io/nagasai/pen/rNrgeOx for reference -
input[type="radio"] {
-webkit-appearance : none;
width : 20px;
height : 20px;
border-radius : 50%;
/* outline : none; */
border : 3px solid gray;
}
input[type="radio"]:before {
content : "";
display : block;
width : 60%;
height : 60%;
margin : 20% auto;
border-radius : 50%;
}
input[type="radio"]:checked:before {
background : green;
}
input[type="radio"]:checked {
border-color : green;
}
.role {
margin-right : 80px;
margin-left : 20px;
font-weight : normal;
}
.checkbox label {
margin-bottom : 20px !important;
}
.roles {
margin-bottom : 40px;
display: flex;
align-items: center;
}
<div class="roles">
<input type="radio" name="role" value="ONE" id="one" />
<label class="role" for="one">ONE</label>
<input type="radio" name="role" value="TWO" id="two" />
<label class="role" for="two">TWO</label>
</div>