fix: a lot of design flaws

Info text when empty, new inputs, minimum height of content fixed

app/assets/styles/form/input.css

@@ -1,52 +0,0 @@
-.Input {
-    &.error {
-        & .input-wrapper {
-            border-color: var(--color-error);
-            outline-width: 2px;
-        }
-
-        & span {
-            color: var(--color-error);
-        }
-    }
-
-    & span {
-        font-size: .65em;
-    }
-
-    & .input-wrapper {
-        position: relative;
-        flex: 25% 1 0;
-        border: 2px solid var(--color-main-dark);
-        border-radius: var(--radius-default);
-        overflow: hidden;
-        transition: var(--transition-default);
-        outline: 0 solid var(--color-lightest);
-
-        & label {
-            position: absolute;
-            font-size: .8em;
-            top: .3rem;
-            left: .5rem;
-            transition: var(--transition-default);
-        }
-
-        & input {
-            all: unset;
-            width: calc(100% - 1rem);
-            padding: 1.3rem .5rem .5rem .5rem;
-            background: var(--color-lightest);
-
-            &[type="number"] {
-                text-align: right;
-            }
-        }
-
-        & input:focus,
-        & input:not(:placeholder-shown) {
-            & + label {
-                color: var(--color-main-dark);
-            }
-        }
-    }
-}

app/assets/styles/form/textfield.css

@@ -0,0 +1,66 @@
+.TextField {
+  --border-color: var(--color-light);
+  --label-color: var(--color-middle);
+  --label-position-top: 0.4em;
+  --label-font-size: 1rem;
+  --icon-color: var(--color-main-dark);
+  --message-color: var(--color-middle);
+
+  position: relative;
+  flex: 25% 1 0;
+
+  &:focus-within {
+    --border-color: var(--color-main-dark);
+  }
+
+  &:focus-within,
+  &:has(input:not(:placeholder-shown)) {
+    --icon-color: var(--color-main-dark);
+    --label-color: var(--color-main-dark);
+    --label-position-top: -11px;
+    --label-font-size: 0.8rem;
+  }
+
+  &.error {
+    --label-color: var(--color-error);
+    --icon-color: var(--color-error);
+    --border-color: var(--color-error);
+    --message-color: var(--color-error);
+  }
+
+  & .wrapper {
+    display: flex;
+    align-items: center;
+    padding: 0.1rem 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-default);
+  }
+
+  & label {
+    position: absolute;
+    background: var(--color-lightest);
+    padding: 0.2rem;
+    left: 1.8rem;
+    color: var(--label-color);
+    top: var(--label-position-top);
+    font-size: var(--label-font-size);
+    transition: var(--transition-default);
+  }
+
+  & .icon {
+    color: var(--icon-color);
+  }
+
+  & input {
+    all: unset;
+    padding: 0.5rem;
+    font-size: 1rem;
+    width: 100%;
+    flex: 25% 1 0;
+  }
+
+  & span {
+    color: var(--message-color);
+    font-size: 0.6rem;
+  }
+}