1.wrapper {
2  --font-color-dark: #323232;
3  --font-color-light: #FFF;
4  --bg-color: #fff;
5  --main-color: #323232;
6  position: relative;
7  width: 250px;
8  height: 36px;
9  background-color: var(--bg-color);
10  border: 2px solid var(--main-color);
11  border-radius: 34px;
12  display: flex;
13  flex-direction: row;
14  box-shadow: 4px 4px var(--main-color);
15}
16
17.option {
18  width: 80.5px;
19  height: 28px;
20  position: relative;
21  top: 2px;
22  left: 2px;
23}
24
25.input {
26  width: 100%;
27  height: 100%;
28  position: absolute;
29  left: 0;
30  top: 0;
31  appearance: none;
32  cursor: pointer;
33}
34
35.btn {
36  width: 100%;
37  height: 100%;
38  background-color: var(--bg-color);
39  border-radius: 50px;
40  display: flex;
41  justify-content: center;
42  align-items: center;
43}
44
45.span {
46  color: var(--font-color-dark);
47}
48
49.input:checked + .btn {
50  background-color: var(--main-color);
51}
52
53.input:checked + .btn .span {
54  color: var(--font-color-light);
55}