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