Input 12 - Search Google

.searchbar12 {
font-size: 14px;
font-family: arial, sans-serif;
color: #202124;
display: flex;
z-index: 3;
height: 44px;
background: white;
border: 1px solid #dfe1e5;
box-shadow: none;
border-radius: 24px;
margin: 0 auto;
width: auto;
max-width: 224px;
}

.searchbar12:hover {
box-shadow: 0 1px 6px rgb(32 33 36 / 28%);
border-color: rgba(223,225,229,0);
}

.searchbar12-wrapper {
flex: 1;
display: flex;
padding: 5px 8px 0 14px;
}

.searchbar12-left {
font-size: 14px;
font-family: arial, sans-serif;
color: #202124;
display: flex;
align-items: center;
padding-right: 13px;
margin-top: -5px;
}

.search-icon-wrapper {
margin: auto;
}

.search-icon {
margin-top: 3px;
color: #9aa0a6;
height: 20px;
line-height: 20px;
width: 20px;
}

.searchbar12-icon {
display: inline-block;
fill: currentColor;
height: 24px;
line-height: 24px;
position: relative;
width: 24px;
}

.searchbar12-center {
display: flex;
flex: 1;
flex-wrap: wrap;
}

.searchbar12-input-spacer {
color: transparent;
flex: 100%;
white-space: pre;
height: 34px;
font-size: 16px;
}

.searchbar12-input {
background-color: transparent;
border: none;
margin: 0;
padding: 0;
color: rgba(0, 0, 0, .87);
word-wrap: break-word;
outline: none;
display: flex;
flex: 100%;
margin-top: -37px;
height: 34px;
font-size: 16px;
max-width: 100%;
width: 100%;
}

.searchbar12-right {
display: flex;
flex: 0 0 auto;
margin-top: -5px;
align-items: stretch;
flex-direction: row
}

.searchbar12-clear-icon {
margin-right: 12px
}

.voice-search {
flex: 1 0 auto;
display: flex;
cursor: pointer;
align-items: center;
border: 0;
background: transparent;
outline: none;
padding: 0 8px;
width: 2.8em;
}