2 files changed, 22 insertions, 5 deletions

diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 8163cf9..df90cc8 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -235,7 +235,13 @@
                         padding-inline: 0;
                 }
 
-                @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
+                @include bem.modifier('wide') {
+                        @include bem.elem('label') {
+                                margin-inline: props.get(vars.$pad-i-wide);
+                        }
+                }
+
+                @each $mod, $pad-i, $pad-i-label, $pad-i-wide, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
                         @include bem.modifier($mod) {
                                 padding-block:  props.get($pad-b);
                                 padding-inline: props.get($pad-i);
@@ -253,6 +259,12 @@
                                         inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
                                         padding-inline: 0;
                                 }
+
+                                @include bem.modifier('wide') {
+                                        @include bem.elem('label') {
+                                                margin-inline: props.get($pad-i-wide);
+                                        }
+                                }
                         }
                 }
 
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 1246f72..df7df61 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -9,30 +9,35 @@ $rounding:     props.def(--o-button--rounding, props.get(core.$rounding--sm)) !d
 
 $pad-i--xs:       props.def(--o-button--xs--pad-i, props.get(core.$size--75)) !default;
 $pad-i-label--xs: props.def(--o-button--xs--pad-i-label, props.get(core.$size--40)) !default;
+$pad-i-wide--xs:  props.def(--o-button--xs--pad-i-wide, props.get(core.$size--150)) !default;
 $pad-i-pill--xs:  props.def(--o-button--xs--pad-i-pill, props.get(core.$size--115)) !default;
 $pad-b--xs:       props.def(--o-button--xs--pad-b, props.get(core.$size--40)) !default;
 $font-size--xs:   props.def(--o-button--xs--font-size, props.get(core.$font-size--75)) !default;
 
 $pad-i--sm:       props.def(--o-button--sm--pad-i, props.get(core.$size--85)) !default;
 $pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--50)) !default;
+$pad-i-wide--sm:  props.def(--o-button--sm--pad-i-wide, props.get(core.$size--175)) !default;
 $pad-i-pill--sm:  props.def(--o-button--sm--pad-i-pill, props.get(core.$size--125)) !default;
 $pad-b--sm:       props.def(--o-button--sm--pad-b, props.get(core.$size--50)) !default;
 $font-size--sm:   props.def(--o-button--sm--font-size, props.get(core.$font-size--100)) !default;
 
 $pad-i:        props.def(--o-button--pad-i, props.get(core.$size--115)) !default;
 $pad-i-label:  props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default;
+$pad-i-wide:   props.def(--o-button--pad-i-wide, props.get(core.$size--200)) !default;
 $pad-i-pill:   props.def(--o-button--pad-i-pill, props.get(core.$size--160)) !default;
 $pad-b:        props.def(--o-button--pad-b, props.get(core.$size--85)) !default;
 $font-size:    props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
 
 $pad-i--lg:       props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default;
 $pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--65)) !default;
+$pad-i-wide--lg:  props.def(--o-button--lg--pad-i-wide, props.get(core.$size--300)) !default;
 $pad-i-pill--lg:  props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
 $pad-b--lg:       props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default;
 $font-size--lg:   props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default;
 
 $pad-i--xl:       props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default;
 $pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--85)) !default;
+$pad-i-wide--xl:  props.def(--o-button--xl--pad-i-wide, props.get(core.$size--400)) !default;
 $pad-i-pill--xl:  props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default;
 $pad-b--xl:       props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default;
 $font-size--xl:   props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default;
@@ -47,10 +52,10 @@ $key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props
 $key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
 
 $fixed-sizes: (
-        'xs' $pad-i--xs $pad-i-label--xs $pad-i-pill--xs $pad-b--xs $font-size--xs,
-        'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
-        'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
-        'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
+        'xs' $pad-i--xs $pad-i-label--xs $pad-i-wide--xs $pad-i-pill--xs $pad-b--xs $font-size--xs,
+        'sm' $pad-i--sm $pad-i-label--sm $pad-i-wide--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
+        'lg' $pad-i--lg $pad-i-label--lg $pad-i-wide--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
+        'xl' $pad-i--xl $pad-i-label--xl $pad-i-wide--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
 ) !default;
 
 $themes: props.def(--o-button, (), 'color');