Radio by FH638

1.input {
2  display: flex;
3  flex-direction: column;
4  width: 200px;
5  background-color: #0d1117;
6  justify-content: center;
7  border-radius: 10px;
8  transition: 1s;
9  padding: 10px;
10  overflow: hidden;
11}
12
13.value {
14  font-size: 15px;
15  background-color: transparent;
16  border: none;
17  padding: 10px;
18  color: white;
19  display: flex;
20  position: relative;
21  gap: 5px;
22  cursor: pointer;
23  border-radius: 10px;
24  transition: 1s;
25  box-sizing: border-box;
26}
27
28.value:not(:active):hover,
29.value:focus {
30  display: flex;
31  box-sizing: border-box;
32  border: 2px solid #1a1f24;
33  color: #637185;
34}
35
36.value:focus,
37.value:active {
38  background-color: #1a1f24;
39  outline: none;
40  margin-left: 17px;
41}
42
43.value::before {
44  content: "";
45  position: absolute;
46  top: 5px;
47  left: -15px;
48  width: 5px;
49  height: 80%;
50  background-color: #2f81f7;
51  border-radius: 5px;
52  opacity: 0;
53  transition: 1s;
54}
55
56.value:focus::before,
57.value:active::before {
58  opacity: 1;
59}
60
61.value svg {
62  width: 20px;
63}
64
65.input:hover > :not(.value:hover) {
66  transition: 300ms;
67  filter: blur(1.5px);
68  transform: scale(0.95, 0.95);
69}
70