1.input-container {
2  --c-text: rgb(50, 50, 80);
3  --c-bg: rgb(252, 252, 252);
4  --c-outline: rgb(55, 45 , 190);
5  display: grid;
6  gap: 1ch;
7  position: relative;
8  max-width: 190px;
9  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10  color: black;
11}
12
13.input-field {
14  padding: 0.5em 0.75em;
15  border-radius: 0.2em;
16  border: 1px solid var(--c-border, currentColor);
17  color: var(--c-text);
18  font-size: 1rem;
19  letter-spacing: 0.1ch;
20  width: 100%;
21}
22
23.input-field:not(:placeholder-shown) + .input-label {
24  transform: translateY(-220%);
25  opacity: 1;
26}
27
28.input-field:invalid {
29  --c-border: rgb(230, 85, 60);
30  --c-text: rgb(230, 85, 60);
31  --c-outline: rgb(230, 85, 60);
32}
33
34.input-field:is(:disabled, :read-only) {
35  --c-border: rgb(150, 150, 150);
36  --c-text: rgb(170, 170, 170);
37}
38
39.input-field:is(:focus, :focus-visible) {
40  outline: 2px solid var(--c-outline);
41  outline-offset: 2px;
42}
43
44.input-label {
45  --timing: 200ms ease-in;
46  position: absolute;
47  left: 0;
48  top: 50%;
49  transition: transform var(--timing),
50    opacity var(--timing);
51  transform: translateY(-50%);
52  opacity: 0;
53  color: var(--c-text);
54  font-weight: 500;
55}
56