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}
53
54.input:hover > :not(.value:hover) {
55 transition: 300ms;
56 filter: blur(1px);
57 transform: scale(0.95,0.95);
58}
