1.search-label {
2  display: flex;
3  align-items: center;
4  box-sizing: border-box;
5  position: relative;
6  border: 1px solid transparent;
7  border-radius: 12px;
8  overflow: hidden;
9  background: #3D3D3D;
10  padding: 9px;
11  cursor: text;
12}
13
14.search-label:hover {
15  border-color: gray;
16}
17
18.search-label:focus-within {
19  background: #464646;
20  border-color: gray;
21}
22
23.search-label input {
24  outline: none;
25  width: 100%;
26  border: none;
27  background: none;
28  color: rgb(162, 162, 162);
29}
30
31.search-label input:focus+.slash-icon,
32.search-label input:valid+.slash-icon {
33  display: none;
34}
35
36.search-label input:valid~.search-icon {
37  display: block;
38}
39
40.search-label input:valid {
41  width: calc(100% - 22px);
42  transform: translateX(20px);
43}
44
45.search-label svg,
46.slash-icon {
47  position: absolute;
48  color: #7e7e7e;
49}
50
51.search-icon {
52  display: none;
53  width: 12px;
54  height: auto;
55}
56
57.slash-icon {
58  right: 7px;
59  border: 1px solid #393838;
60  background: linear-gradient(-225deg, #343434, #6d6d6d);
61  border-radius: 3px;
62  text-align: center;
63  box-shadow: inset 0 -2px 0 0 #3f3f3f, inset 0 0 1px 1px rgb(94, 93, 93), 0 1px 2px 1px rgba(28, 28, 29, 0.4);
64  cursor: pointer;
65  font-size: 12px;
66  width: 15px;
67}
68
69.slash-icon:active {
70  box-shadow: inset 0 1px 0 0 #3f3f3f, inset 0 0 1px 1px rgb(94, 93, 93), 0 1px 2px 0 rgba(28, 28, 29, 0.4);
71  text-shadow: 0 1px 0 #7e7e7e;
72  color: transparent;
73}