input[type="radio"] {
 /* Disable the browser's default radio button styles */
 appearance: none;
 margin: 0;

 /* Recreate the circle container */
 border: 1px solid black;
 background: white;
 border-radius: 50%;

 /* Center our dot in the container */
 display: inline-grid;
 place-content: center;

 /* Use a pseudo-element to display our "dot" */
 &::before {
   content: "";
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 50%;
 }

 /* And display it when the radio button is checked */
 &:checked::before {
   background: black;
 }
}