docs/styles/Search.module.css

.input {
    background: #000;
    color: #999;
    border: 0;
    outline: none;
    padding: 5px 7px;
    cursor: pointer;
}

.root {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #444;
    transition: 0.3s;
    position: relative;
}

.focused {
    border-bottom: 1px solid #ccc;
}

.root svg {
    color: #ccc;
}

.shortcut {
    display: block;
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: fit-content;
    outline: 1px solid #555;
    border-radius: 5px;
    padding: 1px 5px;
}

.focused .shortcut {
    display: none;
}

@media (max-width: 970px) {
    .root {
        display: block;
        border-bottom: none;
    }
}
1	.input {
2	background: #000;
3	color: #999;
4	border: 0;
5	outline: none;
6	padding: 5px 7px;
7	cursor: pointer;
8	}
9
10	.root {
11	display: flex;
12	align-items: center;
13	border-bottom: 1px solid #444;
14	transition: 0.3s;
15	position: relative;
16	}
17
18	.focused {
19	border-bottom: 1px solid #ccc;
20	}
21
22	.root svg {
23	color: #ccc;
24	}
25
26	.shortcut {
27	display: block;
28	position: absolute;
29	right: 5px;
30	bottom: 5px;
31	width: fit-content;
32	outline: 1px solid #555;
33	border-radius: 5px;
34	padding: 1px 5px;
35	}
36
37	.focused .shortcut {
38	display: none;
39	}
40
41	@media (max-width: 970px) {
42	.root {
43	display: block;
44	border-bottom: none;
45	}
46	}