Converting from sass to nested vanilla css with layers (#147)

assets/css/base/_forms.css

@@ -0,0 +1,89 @@
+/* Form defaults. */
+
+@layer base {
+  form {
+    /* Add vertical rhythm margins. */
+    margin-block: 0 var(--spacing-m);
+  }
+
+  input,
+  textarea,
+  select {
+    margin-block: 0 var(--spacing-m);
+  }
+
+  label {
+    font-weight: var(--fw-bold);
+
+    /* Display as block if before input. */
+    &:has(+ input),
+    &:has(+ textarea){
+      display: block;
+    }
+
+    /* Mark field as required if needed. */
+    &:has(+ :required) {
+      &::after {
+        content: '*';
+        color: var(--color-mark-highlight);
+      }
+    }
+  }
+
+  /* Valid and invalid state. */
+  input,
+  textarea {
+    &:user-valid {
+      border-color: var(--color-success);
+      border-style: solid;
+      background-color: var(--color-success-bg);
+    }
+
+    &:focus:user-valid {
+      border-color: transparent;
+    }
+
+    &:user-invalid {
+      border-color: var(--color-error);
+      border-style: solid;
+      background-color: var(--color-error-bg);
+    }
+
+    &:focus:user-invalid {
+      border-color: transparent;
+      background-color: var(--color-warning-bg);
+    }
+  }
+
+  /* Set max text line width for readability. */
+  input,
+  label,
+  textarea,
+  select {
+    max-width: var(--max-line-width);
+  }
+
+  fieldset {
+    border: 1px solid var(--color-border);
+  }
+
+  /* Make field where you enter more info a bit wider. */
+  [type='email'],
+  [type='password'],
+  [type='range'],
+  [type='search'],
+  [type='url'] {
+    width: min(20em, 100%);
+  }
+
+  /* Make field where you enter more info a bit wider. */
+  [type='text'],
+  textarea {
+    width: min(30em, 100%);
+  }
+
+  /* Make sure textareas without a rows attribute are not tiny. */
+  textarea:not([rows]) {
+    min-height: 7lh;
+  }
+}