From 4a567c385f7d16e12da46718d2ee4ff970072711 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 20 Jan 2023 17:47:42 +0100
Subject: Add emoji object

---
 src/objects/_emoji.scss | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/objects/_emoji.scss

(limited to 'src/objects/_emoji.scss')

diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
new file mode 100644
index 0000000..82c415e
--- /dev/null
+++ b/src/objects/_emoji.scss
@@ -0,0 +1,39 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('emoji') {
+    @include iro.props-store((
+        --dims: (
+            --size:     1.4em,
+            --pad:      .2em,
+            --rounding: 3px,
+            --zoom:     2,
+        )
+    ), 'dims');
+
+    @include iro.props-store((
+        --colors: (
+            --bg: fn.global-color(--obj-hi),
+        )
+    ), 'colors');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:        inline;
+        position:       relative;
+        top:            calc(-.5em * fn.global-dim(--font --standard --line-height) + fn.dim(--rounding));
+        width:          fn.dim(--size);
+        height:         fn.dim(--size);
+        margin:         calc(-.5 * fn.dim(--size)) 0;
+        padding:        fn.dim(--pad);
+        transition:     transform .2s ease, background-color .2s ease;
+        border-radius:  calc(fn.dim(--rounding) / fn.dim(--zoom));
+        vertical-align: bottom;
+
+        @include iro.bem-modifier('zoomable') {
+            &:hover {
+                transform:        scale(fn.dim(--zoom));
+                background-color: fn.color(--bg);
+            }
+        }
+    }
+}
-- 
cgit v1.2.3-70-g09d2