1.radio-input label {
2  position: relative;
3  display: flex;
4  border-radius: 99999px;
5  margin: 8px;
6  width: 3em;
7  height: 3em;
8  margin-top: -35px;
9}
10
11.radio-input input {
12  position: absolute;
13  border-radius: 50%;
14  appearance: unset;
15  inset: 0.95em;
16  margin: 0;
17  cursor: pointer;
18  background-color: rgb(74, 156, 233);
19  filter: drop-shadow(0 0 10px rgb(74, 156, 233));
20}
21
22.radio-input input:checked {
23  transition: .9s linear;
24  background-color: #fff;
25  z-index: 500;
26}
27
28.radio-input .container {
29  width: 100%;
30  height: 100%;
31  display: flex;
32  align-items: center;
33  justify-content: center;
34}
35
36.radio-input .container .loader {
37  height: 25px;
38  width: 25px;
39  border-radius: 50%;
40  border: 1px solid;
41  position: absolute;
42  bottom: -25px;
43  left: 10.5px;
44  transform-origin: 50% 60%;
45  transform: perspective(200px) rotateX(66deg);
46  z-index: -1;
47  background: linear-gradient(315deg, #cacaca, #f0f0f0);
48  box-shadow: -6px -6px 11px #c1c1c1,
49             6px 6px 11px #ffffff;
50}
51
52#value-1[type='radio']:checked:after {
53  content: '';
54  position: absolute;
55  width: 10px;
56  height: 10px;
57  background: #fff;
58  border-radius: 50%;
59  top: 23px;
60  animation: 2.2s  lua infinite ease-in-out;
61  animation-timing-function: linear;
62}
63
64#value-2[type='radio']:checked:after {
65  content: '';
66  position: absolute;
67  width: 10px;
68  height: 10px;
69  background: rgba(19, 219, 226, 0.719);
70  border-radius: 50%;
71  top: 23px;
72  animation: 2.2s  lua infinite ease-in-out;
73  animation-timing-function: linear;
74}
75
76#value-3[type='radio']:checked:after {
77  content: '';
78  position: absolute;
79  width: 10px;
80  height: 10px;
81  background: rgba(29, 29, 23, 0.979);
82  border-radius: 50%;
83  top: 23px;
84  animation: 2.2s lua  infinite ease-in-out;
85  animation-timing-function: linear;
86}
87
88@keyframes lua {
89  0% {
90    z-index: 5;
91  }
92
93  50% {
94    transform: translateX(1.5em) translateY(-2.5em);
95  }
96
97  100% {
98    z-index: -5;
99    background: none;
100  }
101}