Badge

2 files changed, 14 insertions, 6 deletions

diff --git a/src/_functions.scss b/src/_functions.scss
index 6b14c6b..b956b67 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -139,3 +139,7 @@
 
     @return $colors;
 }
+
+@function px-to-em($size, $base: iro.$vars-root-size) {
+    @return math.div($size, $base) * 1em;
+}
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index eebf136..f24d2f8 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -4,22 +4,22 @@
 @include iro.props-namespace('badge') {
     @include iro.props-store((
         --dims: (
-            --pad-x:     fn.global-dim(--size --50),
+            --pad-x:     fn.px-to-em(4px),
             --pad-y:     0,
             --rounding:  3px,
             --fixed-100: 1em,
             --fixed-200: 1.5em,
 
             --200: (
-                --pad-x: fn.global-dim(--size --75),
-                --pad-y: fn.global-dim(--size --25),
+                --pad-x: fn.px-to-em(6px),
+                --pad-y: fn.px-to-em(2px),
             ),
 
             --pill: (
-                --pad-x: fn.global-dim(--size --115),
+                --pad-x: fn.px-to-em(9px),
 
                 --200: (
-                    --pad-x: fn.global-dim(--size --125),
+                    --pad-x: fn.px-to-em(10px),
                 ),
             ),
         ),
@@ -153,8 +153,12 @@
             width: fn.dim(--fixed-200);
         }
     
-        @include iro.bem-modifier('small') {
+        @include iro.bem-modifier('sm') {
             font-size: fn.global-dim(--font-size --75);
         }
+    
+        @include iro.bem-modifier('xs') {
+            font-size: fn.global-dim(--font-size --50);
+        }
     }
 }