1.searchbar {
2  font-size: 14px;
3  font-family: arial, sans-serif;
4  color: #202124;
5  display: flex;
6  z-index: 3;
7  height: 44px;
8  background: white;
9  border: 1px solid #dfe1e5;
10  box-shadow: none;
11  border-radius: 24px;
12  margin: 0 auto;
13  width: auto;
14  max-width: 224px;
15}
16
17.searchbar:hover {
18  box-shadow: 0 1px 6px rgb(32 33 36 / 28%);
19  border-color: rgba(223,225,229,0);
20}
21
22.searchbar-wrapper {
23  flex: 1;
24  display: flex;
25  padding: 5px 8px 0 14px;
26}
27
28.searchbar-left {
29  font-size: 14px;
30  font-family: arial, sans-serif;
31  color: #202124;
32  display: flex;
33  align-items: center;
34  padding-right: 13px;
35  margin-top: -5px;
36}
37
38.search-icon-wrapper {
39  margin: auto;
40}
41
42.search-icon {
43  margin-top: 3px;
44  color: #9aa0a6;
45  height: 20px;
46  line-height: 20px;
47  width: 20px;
48}
49
50.searchbar-icon {
51  display: inline-block;
52  fill: currentColor;
53  height: 24px;
54  line-height: 24px;
55  position: relative;
56  width: 24px;
57}
58
59.searchbar-center {
60  display: flex;
61  flex: 1;
62  flex-wrap: wrap;
63}
64
65.searchbar-input-spacer {
66  color: transparent;
67  flex: 100%;
68  white-space: pre;
69  height: 34px;
70  font-size: 16px;
71}
72
73.searchbar-input {
74  background-color: transparent;
75  border: none;
76  margin: 0;
77  padding: 0;
78  color: rgba(0, 0, 0, .87);
79  word-wrap: break-word;
80  outline: none;
81  display: flex;
82  flex: 100%;
83  margin-top: -37px;
84  height: 34px;
85  font-size: 16px;
86  max-width: 100%;
87  width: 100%;
88}
89
90.searchbar-right {
91  display: flex;
92  flex: 0 0 auto;
93  margin-top: -5px;
94  align-items: stretch;
95  flex-direction: row
96}
97
98.searchbar-clear-icon {
99  margin-right: 12px
100}
101
102.voice-search {
103  flex: 1 0 auto;
104  display: flex;
105  cursor: pointer;
106  align-items: center;
107  border: 0;
108  background: transparent;
109  outline: none;
110  padding: 0 8px;
111  width: 2.8em;
112}