Input by joe-watson-sbf

1.search {
2  display: flex;
3  align-items: center;
4  justify-content: space-between;
5  text-align: center;
6}
7
8.search__input {
9  font-family: inherit;
10  font-size: inherit;
11  background-color: #f4f2f2;
12  border: none;
13  color: #646464;
14  padding: 0.7rem 1rem;
15  border-radius: 30px;
16  width: 12em;
17  transition: all ease-in-out .5s;
18  margin-right: -2rem;
19}
20
21.search__input:hover, .search__input:focus {
22  box-shadow: 0 0 1em #00000013;
23}
24
25.search__input:focus {
26  outline: none;
27  background-color: #f0eeee;
28}
29
30.search__input::-webkit-input-placeholder {
31  font-weight: 100;
32  color: #ccc;
33}
34
35.search__input:focus + .search__button {
36  background-color: #f0eeee;
37}
38
39.search__button {
40  border: none;
41  background-color: #f4f2f2;
42  margin-top: .1em;
43}
44
45.search__button:hover {
46  cursor: pointer;
47}
48
49.search__icon {
50  height: 1.3em;
51  width: 1.3em;
52  fill: #b4b4b4;
53}