1.radio-button {
2  display: flex;
3  gap: 10px;
4  justify-content: center;
5  margin: 10px;
6  position: relative;
7  align-items: center;
8}
9
10.radio-button input[type="radio"] {
11  position: absolute;
12  opacity: 0;
13}
14
15.radio {
16  position: relative;
17  display: inline-block;
18  width: 24px;
19  height: 24px;
20  border-radius: 50%;
21  border: 2px solid #ccc;
22  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
23  transform: translateZ(-25px);
24  transition: all 0.3s ease-in-out;
25}
26
27.radio::before {
28  position: absolute;
29  content: '';
30  width: 10px;
31  height: 10px;
32  top: 5px;
33  left: 5px;
34  border-radius: 50%;
35  background-color: #fff;
36  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
37  opacity: 0;
38  transition: all 0.3s ease-in-out;
39}
40
41.radio-button input[type="radio"]:checked + .radio {
42  border-color: #5cb85c;
43  transform: translateZ(0px);
44  background-color: #fff;
45}
46
47.radio-button input[type="radio"]:checked + .radio::before {
48  opacity: 1;
49}
50