Radio by Admin12121

1.body {
2  --radius: 8px;
3  --border: 4px;
4  --height: 48px;
5  --speed: 0.25s;
6  display: grid;
7  place-items: center;
8  align-content: center;
9  font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue",
10    Helvetica, Arial, sans-serif, system-ui;
11}
12
13.tabs {
14  height: var(--height);
15  display: grid;
16  grid-auto-flow: column;
17  background: hsl(0 0% 0%);
18  border-radius: var(--radius);
19  grid-auto-columns: 1fr;
20  position: relative;
21  border: var(--border) solid hsl(0 0% 0%);
22}
23
24.tabs {
25  --ease: linear(
26    0,
27    0.1641 3.52%,
28    0.311 7.18%,
29    0.4413 10.99%,
30    0.5553 14.96%,
31    0.6539 19.12%,
32    0.738 23.5%,
33    0.8086 28.15%,
34    0.8662 33.12%,
35    0.9078 37.92%,
36    0.9405 43.12%,
37    0.965 48.84%,
38    0.9821 55.28%,
39    0.992 61.97%,
40    0.9976 70.09%,
41    1
42  );
43}
44
45.tabs > .input,
46.sr-only {
47  position: absolute;
48  width: 1px;
49  height: 1px;
50  padding: 0;
51  margin: -1px;
52  overflow: hidden;
53  clip: rect(0, 0, 0, 0);
54  white-space: nowrap;
55  border-width: 0;
56}
57
58.tabs:has(:checked:nth-of-type(1)) {
59  --active: 0;
60}
61.tabs:has(:checked:nth-of-type(2)) {
62  --active: 1;
63}
64.tabs:has(:checked:nth-of-type(3)) {
65  --active: 2;
66}
67.tabs:has(:checked:nth-of-type(4)) {
68  --active: 3;
69}
70
71.tabs :checked + .label {
72  --highlight: 1;
73}
74
75.tabs:has(.input:nth-of-type(2)) {
76  --count: 2;
77}
78.tabs:has(.input:nth-of-type(3)) {
79  --count: 3;
80}
81.tabs:has(.input:nth-of-type(4)) {
82  --count: 4;
83}
84
85.tabs .label {
86  padding: 0 clamp(10px, 10px + 10px, 20px);
87  cursor: pointer;
88  text-align: center;
89  height: 100%;
90  display: grid;
91  border-radius: calc(var(--radius) - var(--border));
92  place-items: center;
93  color: hsl(0 0% 100% / calc(0.5 + var(--highlight, 0)));
94  transition: background, color;
95  transition-duration: 0.25s;
96  transition-timing-function: var(--ease, ease);
97}
98
99.input:not(:checked) + .label:hover {
100  --highlight: 0.35;
101  background: hsl(0 0% 20%);
102}
103
104.tabs::after {
105  pointer-events: none;
106  content: "";
107  width: calc(100% / var(--count));
108  height: 100%;
109  background: hsl(0 0% 100%);
110  position: absolute;
111  border-radius: calc(var(--radius) - var(--border));
112  mix-blend-mode: difference;
113  translate: calc(var(--active, 0) * 100%) 0;
114  transition: translate, outline-color;
115  transition-duration: var(--speed);
116  transition-timing-function: var(--ease, ease);
117  outline: 2px solid transparent;
118}
119
120.tabs:has(:focus-visible)::after {
121  outline-color: red;
122}
123