1 files changed, 22 insertions, 26 deletions

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 5602a16b..1a75469e 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -1,8 +1,3 @@
-$emoji-picker-header-height: 36px;
-$emoji-picker-header-picture-width: 32px;
-$emoji-picker-header-picture-height: 32px;
-$emoji-picker-emoji-size: 32px;
-
 .emoji-picker {
   width: 25em;
   max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
@@ -13,10 +8,10 @@ $emoji-picker-emoji-size: 32px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    width: $emoji-picker-header-picture-width;
-    max-width: $emoji-picker-header-picture-width;
-    height: $emoji-picker-header-picture-height;
-    max-height: $emoji-picker-header-picture-height;
+    width: var(--emoji-size);
+    max-width: var(--emoji-size);
+    height: var(--emoji-size);
+    max-height: var(--emoji-size);
 
     .still-image {
       max-width: 100%;
@@ -30,7 +25,7 @@ $emoji-picker-emoji-size: 32px;
   .keep-open,
   .too-many-emoji,
   .hide-custom-emoji {
-    padding: 7px;
+    padding: 0.5em;
     line-height: normal;
   }
 
@@ -44,13 +39,13 @@ $emoji-picker-emoji-size: 32px;
   }
 
   .keep-open-label {
-    padding: 0 7px;
+    padding: 0 0.5em;
     display: flex;
   }
 
   .heading {
     display: flex;
-    padding: 10px 7px 5px;
+    padding: 10px 0.5em 0.3em;
   }
 
   .content {
@@ -71,7 +66,7 @@ $emoji-picker-emoji-size: 32px;
     display: flex;
     border-left: 1px solid;
     border-left-color: var(--border);
-    padding-left: 7px;
+    padding-left: 0.5em;
     flex: 0 0 auto;
   }
 
@@ -82,13 +77,13 @@ $emoji-picker-emoji-size: 32px;
     align-content: center;
 
     &-item {
-      padding: 0 7px;
+      padding: 0 0.5em;
       cursor: pointer;
       font-size: 1.85em;
-      width: $emoji-picker-header-picture-width;
-      max-width: $emoji-picker-header-picture-width;
-      height: $emoji-picker-header-picture-height;
-      max-height: $emoji-picker-header-picture-height;
+      width: var(--emoji-size);
+      max-width: var(--emoji-size);
+      height: var(--emoji-size);
+      max-height: var(--emoji-size);
       display: flex;
       align-items: center;
 
@@ -98,7 +93,7 @@ $emoji-picker-emoji-size: 32px;
       }
 
       &.toggled {
-        border-bottom: 4px solid;
+        border-bottom: 0.2em solid;
       }
     }
   }
@@ -125,7 +120,7 @@ $emoji-picker-emoji-size: 32px;
 
   .emoji {
     &-search {
-      padding: 5px;
+      padding: 0.3em;
       flex: 0 0 auto;
 
       input {
@@ -139,6 +134,7 @@ $emoji-picker-emoji-size: 32px;
       flex: 1 1 1px;
       position: relative;
       overflow: auto;
+      scrollbar-gutter: stable both-edges;
       user-select: none;
       mask:
         linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
@@ -165,13 +161,13 @@ $emoji-picker-emoji-size: 32px;
       display: flex;
       align-items: center;
       flex-wrap: wrap;
-      padding-left: 5px;
       justify-content: left;
 
       &-title {
         font-size: 0.85em;
         width: 100%;
         margin: 0;
+        padding-left: 0.3em;
 
         &.disabled {
           display: none;
@@ -180,14 +176,14 @@ $emoji-picker-emoji-size: 32px;
     }
 
     &-item {
-      width: $emoji-picker-emoji-size;
-      height: $emoji-picker-emoji-size;
+      width: var(--emoji-size);
+      height: var(--emoji-size);
       box-sizing: border-box;
       display: flex;
-      line-height: $emoji-picker-emoji-size;
+      line-height: var(--emoji-size);
       align-items: center;
       justify-content: center;
-      margin: 4px;
+      margin: 0.2em;
       cursor: pointer;
 
       .emoji-picker-emoji.-custom {
@@ -197,7 +193,7 @@ $emoji-picker-emoji-size: 32px;
       }
 
       .emoji-picker-emoji.-unicode {
-        font-size: 24px;
+        font-size: 20.2em;
         overflow: hidden;
       }
     }