1 files changed, 44 insertions, 52 deletions

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index aab9251d..12c09388 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -1,47 +1,35 @@
-@import "../../variables";
-
-$emoji-picker-header-height: 36px;
-$emoji-picker-header-picture-width: 32px;
-$emoji-picker-header-picture-height: 32px;
-$emoji-picker-emoji-size: 32px;
-
 .emoji-picker {
+  --__emoji-picker-header: 2.2em;
+
   width: 25em;
   max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
   display: flex;
   flex-direction: column;
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--link;
-  color: var(--popoverText, $fallback--link);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --icon: var(--popoverIcon, $fallback--icon);
 
   &-header-image {
     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-picker-header);
+    max-width: var(--__emoji-picker-header);
+    height: var(--__emoji-picker-header);
+    max-height: var(--__emoji-picker-header);
 
     .still-image {
-      max-width: 100%;
-      max-height: 100%;
-      height: 100%;
-      width: 100%;
+      width: var(--__emoji-picker-header);
+      max-width: var(--__emoji-picker-header);
+      height: var(--__emoji-picker-header);
+      max-height: var(--__emoji-picker-header);
       object-fit: contain;
+
+      --_still_image-label-scale: 0.5;
     }
   }
 
   .keep-open,
   .too-many-emoji,
   .hide-custom-emoji {
-    padding: 7px;
+    padding: 0.5em;
     line-height: normal;
   }
 
@@ -55,13 +43,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: 0.7em 0.5em 0;
   }
 
   .content {
@@ -76,14 +64,14 @@ $emoji-picker-emoji-size: 32px;
     display: flex;
     flex-flow: row nowrap;
     overflow-x: auto;
+    overflow-y: hidden;
   }
 
   .additional-tabs {
     display: flex;
     border-left: 1px solid;
-    border-left-color: $fallback--icon;
-    border-left-color: var(--icon, $fallback--icon);
-    padding-left: 7px;
+    border-left-color: var(--border);
+    padding-left: 0.5em;
     flex: 0 0 auto;
   }
 
@@ -92,30 +80,29 @@ $emoji-picker-emoji-size: 32px;
     flex-basis: auto;
     display: flex;
     align-content: center;
+    scrollbar-width: thin;
 
     &-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-picker-header);
+      max-width: var(--__emoji-picker-header);
+      height: var(--__emoji-picker-header);
+      max-height: var(--__emoji-picker-header);
       display: flex;
       align-items: center;
 
+      .svg-inline--fa {
+        font-size: 1.85em;
+      }
+
       &.disabled {
         opacity: 0.5;
         pointer-events: none;
       }
 
-      &.active {
-        border-bottom: 4px solid;
-
-        svg {
-          color: $fallback--lightText;
-          color: var(--lightText, $fallback--lightText);
-        }
+      &.toggled {
+        border-bottom: 0.2em solid;
       }
     }
   }
@@ -142,7 +129,7 @@ $emoji-picker-emoji-size: 32px;
 
   .emoji {
     &-search {
-      padding: 5px;
+      padding: 0.3em;
       flex: 0 0 auto;
 
       input {
@@ -156,6 +143,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,
@@ -182,13 +170,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;
@@ -197,24 +185,28 @@ $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 {
         object-fit: contain;
-        max-width: 100%;
-        max-height: 100%;
+        width: var(--emoji-size);
+        max-width: var(--emoji-size);
+        height: var(--emoji-size);
+        max-height: var(--emoji-size);
+
+        --_still_image-label-scale: 0.5;
       }
 
       .emoji-picker-emoji.-unicode {
-        font-size: 24px;
+        font-size: 1.6em;
         overflow: hidden;
       }
     }