1.input-wrapper {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  gap: 15px;
6  position: relative;
7}
8
9.input {
10  border-style: none;
11  height: 50px;
12  width: 50px;
13  padding: 10px;
14  outline: none;
15  border-radius: 50%;
16  transition: .5s ease-in-out;
17  background-color: #7e4fd4;
18  box-shadow: 0px 0px 3px #f3f3f3;
19  padding-right: 40px;
20  color: #fff;
21}
22
23.input::placeholder,
24.input {
25  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
26  font-size: 17px;
27}
28
29.input::placeholder {
30  color: #8f8f8f;
31}
32
33.icon {
34  display: flex;
35  align-items: center;
36  justify-content: center;
37  position: absolute;
38  right: 0px;
39  cursor: pointer;
40  width: 50px;
41  height: 50px;
42  outline: none;
43  border-style: none;
44  border-radius: 50%;
45  pointer-events: painted;
46  background-color: transparent;
47  transition: .2s linear;
48}
49
50.icon:focus ~ .input,
51.input:focus {
52  box-shadow: none;
53  width: 250px;
54  border-radius: 0px;
55  background-color: transparent;
56  border-bottom: 3px solid #7e4fd4;
57  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
58}
59
60
61