Radio by LightAndy1

1.wrapper {
2  --font-color-dark: #323232;
3  --font-color-light: #fff;
4  --bg-color: #fff;
5  --main-color: #323232;
6  --secondary-color: #505050;
7  position: relative;
8  width: 250px;
9  height: 36px;
10  background-color: var(--bg-color);
11  border: 2px solid var(--main-color);
12  border-radius: 34px;
13  display: flex;
14  flex-direction: row;
15  box-shadow: 4px 4px var(--main-color);
16}
17
18.option {
19  margin-right: 5px;
20  width: 80.5px;
21  height: 28px;
22  position: relative;
23  top: 2px;
24  left: 2px;
25  border-radius: 34px;
26  transition: 0.25s cubic-bezier(0, 0, 0, 1);
27}
28
29.option:last-child {
30  margin-right: 4px;
31}
32
33.option:hover {
34  background-color: var(--secondary-color);
35}
36
37.option:hover .span {
38  color: var(--font-color-light);
39}
40
41.input {
42  width: 100%;
43  height: 100%;
44  position: absolute;
45  left: 0;
46  top: 0;
47  appearance: none;
48  cursor: pointer;
49}
50
51.btn {
52  width: 100%;
53  height: 100%;
54  border-radius: 50px;
55  display: flex;
56  justify-content: center;
57  align-items: center;
58}
59
60.span {
61  color: var(--font-color-dark);
62}
63
64.input:checked + .btn {
65  background-color: var(--main-color);
66  transition: 0.2s cubic-bezier(0, 0, 0, 1);
67}
68
69.input:checked + .btn .span {
70  color: var(--font-color-light);
71  transition: 0.25s cubic-bezier(0, 0, 0, 1);
72}
73