.radioButtonsContainer > div > div > div { display: flex; padding: 12px 4px; align-items: center; gap: 12px; } .radio { display: flex; align-items: center; cursor: pointer; gap: 8px; } .radio input { display: none; } .radio .custom { width: 20px; height: 20px; border: 2px solid #4b4f6d; border-radius: 50%; position: relative; background-color: #fff; } .radio .custom::after { content: ""; width: 10px; height: 10px; background: #5980f1; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); } .radio input:checked + .custom::after { transform: translate(-50%, -50%) scale(1); } .radio input:not(:checked) + .custom + span, .radio input:not(:checked) + .custom + * { color: #85869b; }