initial attempts at making emoji-picker somewhat extensible

src/components/emoji_picker/emoji_picker.scss

@@ -0,0 +1,83 @@
+@import '../../_variables.scss';
+
+.emoji-picker {
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  width: 300px;
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  margin: 0 !important;
+
+  .emoji {
+    &-tabs {
+      &-item {
+        padding: 0 5px;
+
+        &.active {
+          border-bottom: 4px solid;
+
+          i {
+            color: $fallback--lightText;
+            color: var(--lightText, $fallback--lightText);
+          }
+        }
+      }
+    }
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &-search {
+      padding: 5px;
+      flex: 0 0 1px;
+
+      input {
+        width: 100%;
+      }
+    }
+
+    &-groups {
+      flex: 1 1 1px;
+      position: relative;
+      overflow: auto;
+    }
+
+    &-group {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      padding: 5px;
+      justify-content: space-between;
+
+      &-title {
+        font-size: 12px;
+        width: 100%;
+        margin: 0;
+      }
+    }
+
+    &-item {
+      width: 32px;
+      height: 32px;
+      box-sizing: border-box;
+      display: flex;
+      font-size: 32px;
+      align-items: center;
+      justify-content: center;
+      margin: 2px;
+
+      cursor: pointer;
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+
+  }
+
+}