Move some form styling around from other projects

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "3.5.6",
+    "version": "3.5.7",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Florine W. Dekker",
     "license": "MIT",

src/main/css/main.css

@@ -4,5 +4,5 @@
 @import "snippets/colors.css";
 
 @import "snippets/common.css";
+@import "snippets/forms.css";
 @import "snippets/nav.css";
-@import "snippets/validation.css";

src/main/css/snippets/common.css

@@ -78,14 +78,6 @@ noscript.fwd-js-notice p {
 }
 
 
-/* Forms */
-.inline-button {
-    display: inline-block;
-    width: unset;
-    margin: 0;
-}
-
-
 /* Header */
 header.fwd-header a[href="."] {
     color: unset;

src/main/css/snippets/forms.css

@@ -1,3 +1,4 @@
+/* Status card */
 .status-card {
     font-weight: bold;
     position: relative;
@@ -52,6 +53,7 @@
 }
 
 
+/* Input validation */
 label.invalid,
 *[data-label-for].invalid,
 input.invalid,
@@ -65,3 +67,20 @@ input.valid,
 *[data-hint-for].valid {
     color: var(--form-element-valid-border-color) !important;
 }
+
+
+/* Enable hint-like styling on any element */
+.input-hint {
+    display: block;
+
+    /*noinspection CssUnresolvedCustomProperty*/
+    margin-top: calc(var(--spacing) * -.75);
+}
+
+
+/* Custom components */
+.inline-button {
+    display: inline-block;
+    width: unset;
+    margin: 0;
+}