1 files changed, 61 insertions, 20 deletions

diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 2ea2739..51b8c5a 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -2,6 +2,34 @@
 @use '../vars';
 @use '../mixins/typography';
 
+@mixin invalid {
+    @include iro.bem-sibling-elem('bg') {
+        border-color: iro.props-get(--colors --error --border);
+        box-shadow:   iro.props-get(--colors --error --shadow);
+    }
+
+    &:hover {
+        @include iro.bem-sibling-elem('bg') {
+            border-color: iro.props-get(--colors --error --hover --border);
+            box-shadow:   iro.props-get(--colors --error --hover --shadow);
+        }
+    }
+
+    &:focus {
+        @include iro.bem-sibling-elem('bg') {
+            border-color: iro.props-get(--colors --error --focus --border);
+            box-shadow:   iro.props-get(--colors --error --focus --shadow);
+        }
+    }
+}
+
+@mixin keyboard-focus {
+    @include iro.bem-sibling-elem('bg') {
+        border-color: iro.props-get(--colors --key-focus --border);
+        box-shadow:   iro.props-get(--colors --key-focus --shadow);
+    }
+}
+
 @include iro.props-namespace('text-field') {
     @include iro.props-store((
         --dims: (
@@ -112,31 +140,28 @@
             }
 
             &:invalid {
-                @include iro.bem-sibling-elem('bg') {
-                    border-color: iro.props-get(--colors --error --border);
-                    box-shadow:   iro.props-get(--colors --error --shadow);
-                }
+                @include invalid;
+            }
+        }
 
-                &:hover {
-                    @include iro.bem-sibling-elem('bg') {
-                        border-color: iro.props-get(--colors --error --hover --border);
-                        box-shadow:   iro.props-get(--colors --error --hover --shadow);
-                    }
-                }
+        @include iro.bem-is('invalid') {
+            @include iro.bem-elem('native') {
+                @include invalid;
+            }
+        }
 
-                &:focus {
-                    @include iro.bem-sibling-elem('bg') {
-                        border-color: iro.props-get(--colors --error --focus --border);
-                        box-shadow:   iro.props-get(--colors --error --focus --shadow);
-                    }
+        @include iro.bem-at-theme('keyboard') {
+            @include iro.bem-elem('native') {
+                &:focus,
+                &:invalid:focus {
+                    @include keyboard-focus;
                 }
             }
 
-            @include iro.bem-at-theme('keyboard') {
-                &:focus {
-                    @include iro.bem-sibling-elem('bg') {
-                        border-color: iro.props-get(--colors --key-focus --border);
-                        box-shadow:   iro.props-get(--colors --key-focus --shadow);
+            @include iro.bem-is('invalid') {
+                @include iro.bem-elem('native') {
+                    &:focus {
+                        @include keyboard-focus;
                     }
                 }
             }
@@ -165,6 +190,22 @@
             @include iro.bem-elem('bg') {
                 border-color: iro.props-get(--colors --disabled --border);
             }
+
+            @include iro.bem-is('invalid') {
+                @include iro.bem-elem('native') {
+                    @include iro.bem-sibling-elem('bg') {
+                        border-color: iro.props-get(--colors --disabled --border);
+                    }
+                }
+            }
+
+            @include iro.bem-elem('native') {
+                &:invalid {
+                    @include iro.bem-sibling-elem('bg') {
+                        border-color: iro.props-get(--colors --disabled --border);
+                    }
+                }
+            }
         }
     }
 }