1/* From uiverse.io by @satyamchaudharydev */
2/* removing default style of button */
3
4.form button {
5  border: none;
6  background: none;
7  color: #8b8ba7;
8}
9/* styling of whole input container */
10.form {
11  --timing: 0.3s;
12  --width-of-input: 200px;
13  --height-of-input: 40px;
14  --border-height: 2px;
15  --input-bg: #fff;
16  --border-color: #2f2ee9;
17  --border-radius: 30px;
18  --after-border-radius: 1px;
19  position: relative;
20  width: var(--width-of-input);
21  height: var(--height-of-input);
22  display: flex;
23  align-items: center;
24  padding-inline: 0.8em;
25  border-radius: var(--border-radius);
26  transition: border-radius 0.5s ease;
27  background: var(--input-bg,#fff);
28}
29/* styling of Input */
30.input {
31  font-size: 0.9rem;
32  background-color: transparent;
33  width: 100%;
34  height: 100%;
35  padding-inline: 0.5em;
36  padding-block: 0.7em;
37  border: none;
38}
39/* styling of animated border */
40.form:before {
41  content: "";
42  position: absolute;
43  background: var(--border-color);
44  transform: scaleX(0);
45  transform-origin: center;
46  width: 100%;
47  height: var(--border-height);
48  left: 0;
49  bottom: 0;
50  border-radius: 1px;
51  transition: transform var(--timing) ease;
52}
53/* Hover on Input */
54.form:focus-within {
55  border-radius: var(--after-border-radius);
56}
57
58input:focus {
59  outline: none;
60}
61/* here is code of animated border */
62.form:focus-within:before {
63  transform: scale(1);
64}
65/* styling of close button */
66/* == you can click the close button to remove text == */
67.reset {
68  border: none;
69  background: none;
70  opacity: 0;
71  visibility: hidden;
72}
73/* close button shown when typing */
74input:not(:placeholder-shown) ~ .reset {
75  opacity: 1;
76  visibility: visible;
77}
78/* sizing svg icons */
79.form svg {
80  width: 17px;
81  margin-top: 3px;
82}