Radio by Yaya12085

1.radio-input input {
2  display: none;
3}
4
5.radio-input {
6  --container_width: 300px;
7  position: relative;
8  display: flex;
9  align-items: center;
10  border-radius: 9999px;
11  background-color: #fff;
12  color: #000000;
13  width: var(--container_width);
14  overflow: hidden;
15  border: 1px solid rgba(53, 52, 52, 0.226);
16}
17
18.radio-input label {
19  width: 100%;
20  padding: 10px;
21  cursor: pointer;
22  display: flex;
23  justify-content: center;
24  align-items: center;
25  z-index: 1;
26  font-weight: 600;
27  letter-spacing: -1px;
28  font-size: 14px;
29}
30
31.selection {
32  display: none;
33  position: absolute;
34  height: 100%;
35  width: calc(var(--container_width) / 4);
36  z-index: 0;
37  left: 0;
38  top: 0;
39  transition: .15s ease;
40}
41
42.radio-input label:has(input:checked) {
43  color: #fff;
44}
45
46.radio-input label:has(input:checked) ~ .selection {
47  background-color: rgb(11 117 223);
48  display: inline-block;
49}
50
51.radio-input label:nth-child(1):has(input:checked) ~ .selection {
52  transform: translateX(calc(var(--container_width) * 0/4));
53}
54
55.radio-input label:nth-child(2):has(input:checked) ~ .selection {
56  transform: translateX(calc(var(--container_width) * 1/4));
57}
58
59.radio-input label:nth-child(3):has(input:checked) ~ .selection {
60  transform: translateX(calc(var(--container_width) * 2/4));
61}
62
63.radio-input label:nth-child(4):has(input:checked) ~ .selection {
64  transform: translateX(calc(var(--container_width) * 3/4));
65}