1.radio-buttons {
2  display: flex;
3  flex-direction: column;
4}
5
6.radio-button {
7  display: flex;
8  align-items: center;
9  margin-bottom: 10px;
10  cursor: pointer;
11}
12
13.radio-button input[type="radio"] {
14  display: none;
15}
16
17.radio-circle {
18  width: 20px;
19  height: 20px;
20  border-radius: 50%;
21  border: 2px solid #aaa;
22  position: relative;
23  margin-right: 10px;
24}
25
26.radio-circle::before {
27  content: "";
28  display: block;
29  width: 12px;
30  height: 12px;
31  border-radius: 50%;
32  background-color: #ddd;
33  position: absolute;
34  top: 50%;
35  left: 50%;
36  transform: translate(-50%, -50%) scale(0);
37  transition: all 0.2s ease-in-out;
38}
39
40.radio-button input[type="radio"]:checked + .radio-circle::before {
41  transform: translate(-50%, -50%) scale(1);
42}
43
44.radio-button:nth-of-type(1) input[type="radio"]:checked + .radio-circle::before {
45  background-color: #ff6600;
46}
47
48.radio-button:nth-of-type(2) input[type="radio"]:checked + .radio-circle::before {
49  background-color: #ffffff;
50}
51
52.radio-button:nth-of-type(3) input[type="radio"]:checked + .radio-circle::before {
53  background-color: #26be00;
54}
55
56.radio-label {
57  font-size: 16px;
58  font-weight: bold;
59}
60
61.radio-button:hover .radio-circle {
62  border-color: #555;
63}
64
65.radio-button:hover input[type="radio"]:checked + .radio-circle::before {
66  background-color: #555;
67}
68