1 files changed, 28 insertions, 8 deletions

diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index e9330ce..1e18f0a 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -37,6 +37,11 @@
             --border-width:  fn.global-dim(--border-width --thin),
             --border-radius: 2px,
 
+            --extended: (
+                --pad:           fn.global-dim(--size --50),
+                --border-radius: 6px,
+            ),
+
             --focus: (
                 --border-width:  fn.global-dim(--border-width --medium),
             )
@@ -87,7 +92,8 @@
     ), 'colors');
 
     @include iro.bem-object(iro.props-namespace()) {
-        $line-height: 1.4;
+        $line-height:         1.4;
+        $focus-border-offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width));
 
         position:         relative;
         min-width:        0;
@@ -133,14 +139,12 @@
                 outline: 0;
 
                 @include iro.bem-sibling-elem('bg') {
-                    $offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width));
-
-                    top:           $offset;
-                    right:         $offset;
-                    bottom:        $offset;
-                    left:          $offset;
+                    top:           $focus-border-offset;
+                    right:         $focus-border-offset;
+                    bottom:        $focus-border-offset;
+                    left:          $focus-border-offset;
                     border:        fn.dim(--focus --border-width) solid fn.color(--focus --border);
-                    border-radius: calc(fn.dim(--border-radius) - $offset);
+                    border-radius: calc(fn.dim(--border-radius) - $focus-border-offset);
                     box-shadow:    fn.color(--focus --shadow);
                 }
             }
@@ -150,6 +154,22 @@
             }
         }
 
+        @include iro.bem-modifier('extended') {
+            padding: fn.dim(--extended --pad);
+
+            @include iro.bem-multi('&', 'elem' 'bg') {
+                border-radius: calc(fn.dim(--border-radius) + fn.dim(--extended --pad));
+            }
+
+            @include iro.bem-elem('native') {
+                &:focus {
+                    @include iro.bem-sibling-elem('bg') {
+                        border-radius: calc(fn.dim(--extended --border-radius) - $focus-border-offset);
+                    }
+                }
+            }
+        }
+
         @include iro.bem-is('invalid') {
             @include iro.bem-elem('native') {
                 @include invalid;