1.input {
2  color: #fff;
3  font-size: 0.9rem;
4  background-color: transparent;
5  width: 100%;
6  box-sizing: border-box;
7  padding-inline: 0.5em;
8  padding-block: 0.7em;
9  border: none;
10  border-bottom: var(--border-height) solid var(--border-before-color);
11  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
12}
13
14.input-border {
15  position: absolute;
16  background: var(--border-after-color);
17  width: 0%;
18  height: 2px;
19  bottom: 0;
20  left: 0;
21  transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
22}
23
24.input:focus {
25  outline: none;
26}
27
28.input:focus + .input-border {
29  width: 100%;
30}
31
32.form-control {
33  position: relative;
34  --width-of-input: 300px;
35}
36
37.input-alt {
38  font-size: 1.2rem;
39  padding-inline: 1em;
40  padding-block: 0.8em;
41  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
42}
43
44.input-border-alt {
45  height: 3px;
46  background: linear-gradient(90deg, #FF6464 0%, #FFBF59 50%, #47C9FF 100%);
47  transition: width 0.4s cubic-bezier(0.42, 0, 0.58, 1.00);
48}
49
50.input-alt:focus + .input-border-alt {
51  width: 100%;
52}