feat: Add css-support for invalid form input elements

public/sass/components/_gf-form.scss

@@ -203,7 +203,7 @@ $input-border: 1px solid $input-border-color;
   }
 
   // Customize the `:focus` state to imitate native WebKit styles.
-  @include form-control-focus();
+  @include form-control-focus(false);
 
   // Placeholder
   &::placeholder {
@@ -251,6 +251,10 @@ $input-border: 1px solid $input-border-color;
   &--plaintext {
     white-space: unset;
   }
+
+  &--invalid {
+    @include form-control-focus(true);
+  }
 }
 
 .gf-form-hint {

public/sass/mixins/_forms.scss

@@ -30,12 +30,19 @@
   }
 }
 
-@mixin form-control-focus() {
+@mixin form-control-focus($error) {
   &:focus {
+    $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+    0 0 5px $input-box-shadow-focus;
     border-color: $input-border-focus;
     outline: none;
-    $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
-      0 0 5px $input-box-shadow-focus;
+
+    @if $error == true {
+      border-color: $brand-warning;
+      $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+      0 0 5px $brand-warning;
+    }
+
     @include box-shadow($shadow);
   }
 }