1.radio {
2  --input_size: 1.8em;
3  --rotor_size: calc(var(--input_size) + 0.5em);
4    /* 2em = 0.5em, 4em = 1em, 6em = 1.5em, 8em = 2em*/
5  --rotor_border_size: 0.3em;
6  --theme_color: #000;
7  display: flex;
8  flex-direction: column;
9  justify-content: start;
10}
11
12@media(prefers-color-scheme: dark) {
13  .radio {
14    --theme_color: #fff;
15  }
16}
17
18.radio label {
19  display: flex;
20  flex-direction: row;
21  align-items: center;
22  margin: 5px 0;
23  font-size: calc(var(--input_size) * 0.8);
24}
25
26.radio label span {
27  font-family: monospace;
28  text-transform: uppercase;
29  font-weight: 600;
30  letter-spacing: normal;
31  word-spacing: 0.1em;
32  color: var(--theme_color);
33}
34
35.radio input {
36  z-index: 1;
37  width: var(--input_size);
38  height: var(--input_size);
39  cursor: pointer;
40  transition: all 0.3s ease-out;
41}
42
43/* The rotor is all the circles rotating at the input */
44.radio .rotor {
45  position: absolute;
46  display: flex;
47  justify-content: center;
48  align-items: center;
49  width: var(--rotor_size);
50  height: var(--rotor_size);
51  margin: 0 -14px;
52  transform: scale(0.3) rotate(-180deg);
53  opacity: 0;
54  transition: all 0.6s ease-out;
55}
56
57.radio input:checked ~ .rotor {
58  opacity: 1;
59  transform: scale(1) rotate(0deg);
60}
61
62.radio label input ~ span {
63  position: relative;
64  top: 10px;
65  padding: 0.5em 1em;
66  border: calc(var(--rotor_border_size) / 2) solid transparent;
67  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
68  transition: all 0.3s ease-out;
69}
70
71.radio input:checked ~ span {
72  border: calc(var(--rotor_border_size) / 2) solid var(--theme_color);
73  background-size: cover;
74  background-blend-mode: difference;
75  font-style: italic;
76  filter: drop-shadow(0px 0px 0.2em #fdfdfd);
77}
78
79.radio .rotor span:first-child {
80  position: absolute;
81  width: 100%;
82  height: 100%;
83  border-radius: 50%;
84  border: var(--rotor_border_size) dashed var(--theme_color);
85  animation: rotate 2s linear infinite;
86  filter: drop-shadow(0px 0px 0.2em #fdfdfd);
87}
88
89.radio .rotor span:nth-child(2) {
90  position: absolute;
91  width: 80%;
92  height: 80%;
93  border-radius: 50%;
94  border: var(--rotor_border_size) dashed #7d008b;
95  border-top: var(--rotor_border_size) solid #7d008b;
96  border-bottom: var(--rotor_border_size) solid #7d008b;
97  animation-name: rotate;
98  animation-iteration-count: infinite;
99  animation-timing-function: cubic-bezier(0.31, 1.84, 0.67, -0.44);
100  animation-duration: 2.35s;
101}
102
103.radio .rotor span:last-child {
104  position: absolute;
105  width: 60%;
106  height: 60%;
107  border-radius: 50%;
108  border: var(--rotor_border_size) dashed #d303ea;
109  border-top: var(--rotor_border_size) solid #d303ea;
110  border-bottom: var(--rotor_border_size) solid #d303ea;
111  filter: drop-shadow(0px 0px 0.2em #e600ff);
112  animation-name: rotate;
113  animation-iteration-count: infinite;
114  animation-timing-function: cubic-bezier(0.22, 0.94, 0.44, -0.33);
115  animation-duration: 1.35s;
116}
117
118@keyframes rotate {
119  0% {
120    transform: rotate(0deg);
121  }
122
123  100% {
124    transform: rotate(360deg);
125  }
126}