Radio by ErzenXz

1.input {
2  display: flex;
3  flex-direction: row;
4  width: fit-content;
5  background-color: #0d1117;
6  justify-content: center;
7  border-radius: 5px;
8  gap: 7.5px;
9}
10
11.value {
12  background-color: transparent;
13  border: none;
14  padding: 10px;
15  color: white;
16  display: flex;
17  position: relative;
18  gap: 5px;
19  cursor: pointer;
20  border-radius: 4px;
21  transition: all 0.2s ease;
22}
23
24.value:not(:active):hover,
25.value:focus {
26  background-color: #21262c;
27}
28
29.value:focus,
30.value:active {
31  background-color: #1a1f24;
32  outline: none;
33}
34
35.value::before {
36  content: "";
37  position: absolute;
38  top: 30px;
39  right: 0px;
40  width: 100%;
41  height: 3px;
42  background-color: #2f81f7;
43  border-radius: 5px;
44  opacity: 0;
45}
46
47.value:focus::before,
48.value:active::before {
49  opacity: 1;
50}
51
52.value svg {
53  width: 15px;
54}
55