Extract input style to common CSS and remove raw uses of var(--x).

The mixin handles the fallback gracefully on browsers where it's not
supported.

assets/scss/mixins.scss

@@ -11,3 +11,22 @@
     }
 }
 
+@mixin green-shadow {
+    box-shadow: 0px 0px 5px rgba($primary-color, 0.7);
+}
+
+@mixin textual-input {
+  @include bordered-block;
+  box-sizing: border-box;
+  @include var(background-color, background-color);
+  @include var(color, text-color);
+  font-family: $font-body;
+  padding: $input-padding;
+
+  &:active, &:focus {
+      @include green-shadow;
+      border-color: $primary-color;
+  }
+
+  flex-grow: 1;
+}