Initial version

themes/zen/assets/sass/base/forms/_forms.scss

@@ -0,0 +1,66 @@
+// stylelint-disable property-no-vendor-prefix
+
+// Form defaults.
+
+form {
+  // Add vertical rhythm margins.
+  @include margin-block(0 1);
+}
+
+input,
+textarea,
+select {
+  @include margin-block(0 1);
+}
+
+// Mark field as required if needed.
+label {
+  &:has(+ :required) {
+    &::after {
+      content: '*';
+      color: var(--color-mark-highlight);
+    }
+  }
+}
+
+// Set max text line width in main for readability.
+input,
+label,
+textarea,
+select {
+  max-width: var(--max-line-width);
+}
+
+fieldset {
+  border: 1px solid var(--color-border);
+}
+
+input {
+  // Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
+  // stylelint-disable-next-line function-name-case
+  width: Min(20em, 100%);
+}
+
+[type='text'],
+textarea {
+  // Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
+  // stylelint-disable-next-line function-name-case
+  width: Min(30em, 100%);
+}
+
+// For forms with multibple fields show submit button below the form.
+input:not(:only-of-type),
+textarea {
+  & + [type='submit'] {
+    display: block;
+  }
+}
+
+// For forms none mobile with single field add space between it and the submit button.
+@include respond-to(s) {
+  input:only-of-type {
+    &:has(+ [type='submit']) {
+      margin-right: .5rem;
+    }
+  }
+}