2 files changed, 30 insertions, 28 deletions

diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index 122e117..3da8b7b 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -5,19 +5,19 @@
 @include iro.props-namespace('emoji') {
     @include iro.props-store((
         --dims: (
-            --size:     1.4,
-            --pad:      .3,
+            --size:     calc(1 / 14 * 18em),
+            --pad:      .3em,
             --rounding: 3px,
-            --zoom:     4,
-            --valign:   -.3em,
+            --zoom:     3,
+            --valign:   -.25em,
 
             --150: (
-                --size:   2.1,
+                --size:   calc(1 / 14 * 28em),
                 --valign: -.65em,
             ),
 
             --200: (
-                --size:   2.8,
+                --size:   calc(1 / 14 * 38em),
                 --valign: -1em,
             )
         )
@@ -32,26 +32,25 @@
     @include iro.bem-object(iro.props-namespace()) {
         display:        inline-block;
         position:       relative;
-        height:         calc(1em * fn.dim(--size));
-        margin:         calc(-1em * fn.dim(--pad));
-        padding:        calc(1em * fn.dim(--pad));
+        width:          calc(fn.dim(--size));
+        height:         calc(fn.dim(--size));
+        margin:         calc(-1 * fn.dim(--pad));
+        padding:        calc(fn.dim(--pad));
         vertical-align: fn.dim(--valign);
+        object-fit:     contain;
+
+        @include iro.bem-modifier('icon') {
+            margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
+        }
 
         @each $size in '150' '200' {
             @include iro.bem-modifier($size) {
-                height:         calc(1em * fn.dim(--#{$size} --size));
-                margin:         calc(-1em * fn.dim(--pad) * (fn.dim(--#{$size} --size) / fn.dim(--size)));
-                padding:        calc(1em * fn.dim(--pad) * (fn.dim(--#{$size} --size) / fn.dim(--size)));
+                width:          fn.dim(--#{$size} --size);
+                height:         fn.dim(--#{$size} --size);
                 vertical-align: fn.dim(--#{$size} --valign);
-            }
-        }
 
-        @include iro.bem-modifier('svg') {
-            width: calc(1em * fn.dim(--size));
-
-            @each $size in '150' '200' {
-                @include iro.bem-modifier($size) {
-                    width: calc(1em * fn.dim(--#{$size} --size));
+                @include iro.bem-modifier('icon') {
+                    margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
                 }
             }
         }
@@ -64,14 +63,6 @@
                 transform:        scale(fn.dim(--zoom));
                 background-color: fn.color(--bg);
             }
-
-            @each $size in '150' '200' {
-                @include iro.bem-modifier($size) {
-                    &:hover {
-                        transform: scale(calc(fn.dim(--zoom) * (fn.dim(--size) / fn.dim(--#{$size} --size))));
-                    }
-                }
-            }
         }
     }
 }
diff --git a/tpl/views/emoji.pug b/tpl/views/emoji.pug
index c0d9254..c1bcb5c 100644
--- a/tpl/views/emoji.pug
+++ b/tpl/views/emoji.pug
@@ -1,6 +1,17 @@
 mixin view-emoji 
     +view('emoji', 'Emoji')
         .c-box
+            +action-button(icon='trash')
+            = ' '
+            +action-button
+                +emoji('drgn')(size='icon')
+            = ' '
+            +action-button(icon='trash' quiet=true)
+            = ' '
+            +action-button(quiet=true)
+                +emoji('drgn')(size='icon')
+
+        .c-box
             =loremIpsum
             =' '
             +emoji('drgn')