Невозможно центрировать большую точку внутри переключателя

Question

Я пытаюсь центрировать точку внутри радиокнопки, и это отчасти утомительная работа, потому что я не могу понять, что именно делать.

Моя последняя работа должна выглядеть примерно так:

И вот что у меня есть что-то вроде:

Мой код:

input[type='radio'] {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  outline: none;
  border: 1px solid #99AFC1;
}

input[type='radio']:before {
  content: '';
  display: block;
  height: 95%;
  border-radius: 50%;
  line-height: 14px;
}

input[type="radio"]:checked:before {
  background: #00AEEF;
}

input[type="radio"]:checked {
  border-color: #00AEEF;
}

<input type="radio" id="r1" name="rr" />
<label for="r1">Radio Button 1</label>

Что мне здесь не хватает? Я знаю, что я почти там

Answer 1

Вот более простая идея с меньшим количеством кода и только фоновой окраской:

input[type='radio'] {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  outline: none;
  border: 1px solid #99AFC1;
  padding:2px; /* Control the space between border and background */
}

input[type="radio"]:checked {
  border-color: #00AEEF;
  background: #00AEEF content-box; /* Don't color the padding area */
}

<input type="radio" id="r1" name="rr" />
<label for="r1">Radio Button 1</label>