1.container {
2  position: relative;
3  --size-button: 40px;
4}
5
6.input {
7  padding-left: var(--size-button);
8  height: var(--size-button);
9  font-size: 15px;
10  border: none;
11  color: #fff;
12  outline: none;
13  width: var(--size-button);
14  transition: all ease 0.3s;
15  background-color: #191A1E;
16  box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;
17  border-radius: 50px;
18  cursor: pointer;
19}
20
21.input:focus,
22.input:not(:invalid) {
23  width: 200px;
24  cursor: text;
25  box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;
26}
27
28.input:focus + .icon,
29.input:not(:invalid) + .icon {
30  pointer-events: all;
31  cursor: pointer;
32}
33
34.container .icon {
35  position: absolute;
36  width: var(--size-button);
37  height: var(--size-button);
38  top: 0;
39  left: 0;
40  padding: 8px;
41  pointer-events: none;
42}
43
44.container .icon svg {
45  width: 100%;
46  height: 100%;
47}