Radio by shadowmurphy

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