Я не могу полностью центрировать элемент ⇐ CSS

[Гость]

У меня есть дизайн радиовхода с кругом посередине и псевдоэлементом ::before

Но когда я делаю размер ввода нечетным, он не полностью центрируется

В меньших размерах оно выглядит лучше

.input-radio { дисплей: гибкий; разрыв: 10 пикселей; высота: подходящее содержание; } .input-радио-кнопка { --Основной цвет:#07f; дисплей: блок; --размер: 15 пикселей; ширина: var(--size,10px); высота: var(--size,10px); размер шрифта: 13 пикселей; соотношение сторон: 1; граница: var(--border-length,calc(var(--size,10px) / 7)) var(--Primary-color,#07f) Solid; радиус границы: 50%; курсор: указатель; положение: относительное; фон: нет; гибкий рост: 0; гибкое сжатие: 0; } .input-radio-button::before { содержание: ""; ширина: 100%; соотношение сторон: 1; радиус границы: 50%; фон: var(--Primary-color); дисплей: блок; позиция: абсолютная; осталось: 50%; верх: 50%; семейство шрифтов: Fontawesome; размер шрифта: 1.2em; цвет: var(--Основной-цвет); перевести: -50%-50%; переход: масштаб .2с .1с; банан