1.radio-input {
2  display: flex;
3  box-shadow: inset 0px 0px 10px 1px #ffffff;
4  border-radius: 25px;
5  border: 5px solid#000000;
6  overflow: hidden;
7}
8
9.radio-input:has(input:nth-child(1):checked) {
10  background: conic-gradient(from 300deg at 18% 50%, #e5719e, #7af4ec, #1a3271, #101a2e, #a859a0);
11}
12
13.radio-input:has(input:nth-child(2):checked) {
14  background: conic-gradient(from 300deg at 51% 50%, #e5719e, #7af4ec, #1a3271, #101a2e, #a859a0);
15}
16
17.radio-input:has(input:nth-child(3):checked) {
18  background: conic-gradient(from 300deg at 84% 50%, #e5719e, #7af4ec, #1a3271, #101a2e, #a859a0);
19}
20
21.radio-input input[type="radio"] {
22  appearance: none;
23  backdrop-filter: blur(16px);
24  background-color: transparent;
25  width: 3em;
26  height: 3em;
27  border-radius: 50%;
28  transform: translateY(-0.075em);
29  display: grid;
30  place-content: center;
31  margin: 10px;
32}
33
34.radio-input input[type="radio"]::before {
35  content: "";
36  width: 0.5em;
37  height: 0.5em;
38  border-radius: 50%;
39  /* transform: scale(0); */
40  transition: 120ms transform ease-in-out;
41  background-color: transparent;
42  box-shadow: 0px 0px 10px 1px #ffffff;
43  border: 1px solid #0000005d;
44}
45
46.radio-input input[type="radio"]:hover::before {
47  background-color: #7af4ec;
48  box-shadow: 0px 0px 10px 1px #7af4ec;
49}
50
51.radio-input input[type="radio"]:checked {
52  background: conic-gradient(from 300deg at 50% 50%, #e5719e, #7af4ec, #1a3271, #101a2e, #a859a0);
53}
54
55.radio-input input[type="radio"]:checked::before {
56  /* transform: scale(1); */
57  width: 1em;
58  height: 1em;
59  background-color: #1e4ada94;
60  box-shadow: 0px 0px 30px 20px #a35a99;
61}