Radio by 3bdel3ziz-T

1section {
2  --col-orange: #d17842;
3  --col-dark: #0c0f14;
4  --col-darkGray: #52555a;
5  --col-gray: #aeaeae;
6
7  width: fit-content;
8  display: flex;
9  align-items: center;
10  justify-content: space-evenly;
11  background-color: var(--col-dark);
12  border-radius: 30px;
13}
14.label {
15  padding: 8px 18px;
16  transition: all 200ms;
17  display: inline-block;
18}
19
20.label input[type="radio"] {
21  display: none;
22}
23.label > svg {
24  transition: all 200ms;
25  fill: var(--col-gray);
26  width: 14px;
27}
28.label:hover:not(:has(input:checked)) > svg {
29  fill: #d17842;
30  opacity: 0.6;
31}
32.label::before {
33  content: "";
34  display: block;
35  width: 0%;
36  height: 2px;
37  border-radius: 5px;
38  position: relative;
39  left: 50%;
40  top: 20px;
41  background: var(--col-orange);
42  transition: all 200ms;
43}
44.label > svg {
45  transition: 300ms;
46  fill: var(--col-darkGray);
47  margin-top: 0;
48}
49.label:has(input:checked) > svg {
50  fill: var(--col-orange);
51  scale: 1.2;
52  margin-top: -5px;
53}
54
55.label:has(input:checked)::before {
56  width: 100%;
57  left: 0;
58  top: 25px;
59}
60