Sticky offset

1 files changed, 29 insertions, 5 deletions

diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index dcabb57..206c611 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -158,6 +158,11 @@
             }
         }
 
+        @include bem.modifier('icon') {
+            inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
+            padding-inline: 0;
+        }
+
         @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
             @include bem.modifier($mod) {
                 padding-block:  props.get($pad-b);
@@ -171,17 +176,36 @@
                 @include bem.modifier('pill') {
                     padding-inline: props.get($pad-i-pill);
                 }
+
+                @include bem.modifier('icon') {
+                    inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
+                    padding-inline: 0;
+                }
             }
         }
 
-        @include bem.modifier('icon') {
-            inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
-            padding-inline: 0;
+        @include bem.modifier('align-inline') {
+            margin-inline: calc(-1 * props.get(vars.$pad-i));
+
+            @include bem.modifier('pill') {
+                margin-inline: calc(-1 * props.get(vars.$pad-i-pill));
+            }
+
+            @include bem.modifier('icon') {
+                margin-inline: calc(-1 * props.get(vars.$pad-b) - .5em * props.get(vars.$line-height));
+            }
 
             @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
                 @include bem.modifier($mod) {
-                    inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
-                    padding-inline: 0;
+                    margin-inline: calc(-1 * props.get($pad-i));
+    
+                    @include bem.modifier('pill') {
+                        margin-inline: calc(-1 * props.get($pad-i-pill));
+                    }
+
+                    @include bem.modifier('icon') {
+                        margin-inline: calc(-1 * props.get($pad-b) - .5em * props.get(vars.$line-height));
+                    }
                 }
             }
         }