1.rad-label {
2  display: flex;
3  padding: 14px 16px;
4  margin: 10px 0;
5  border-radius: 100px;
6  cursor: pointer;
7  transition: 0.3s;
8}
9
10.rad-label:hover, .rad-label:focus-within {
11  background: hsla(0, 0%, 40%, .14);
12}
13
14.rad-input {
15  position: absolute;
16  left: 0;
17  top: 0;
18  width: 1px;
19  height: 1px;
20  opacity: 0;
21  z-index: -1;
22}
23
24.rad-design {
25  width: 22px;
26  height: 22px;
27  border-radius: 100px;
28  background: linear-gradient(to right bottom, hsl(172, 97%, 62%), hsl(251, 97%, 62%));
29  position: relative;
30}
31
32.rad-design::before {
33  content: '';
34  display: inline-block;
35  width: inherit;
36  height: inherit;
37  border-radius: inherit;
38  background: hsl(0, 0%, 80%);
39  transform: scale(1.1);
40  transition: .3s;
41}
42
43.rad-input:checked+.rad-design::before {
44  transform: scale(0);
45}
46
47.rad-text {
48  color: hsl(0, 0%, 60%);
49  margin-left: 14px;
50  letter-spacing: 3px;
51  text-transform: uppercase;
52  font-size: 18px;
53  font-weight: 900;
54  transition: .3s;
55}
56
57.rad-input:checked~.rad-text {
58  color: hsl(0, 0%, 40%);
59}