style emoji chooser

.config/ags/config.js

@@ -64,7 +64,7 @@ export default {
 };
 
 // Stuff that don't need to be toggled. And they're async so ugh...
-// Bar().catch(print); // Use this to debug the bar
+// Bar().catch(print); // Use this to debug the bar. Single monitor only.
 forMonitors(Bar);
 forMonitors(BarCornerTopleft);
 forMonitors(BarCornerTopright);

.config/ags/scss/_common.scss

@@ -59,6 +59,7 @@ menu > menuitem:hover,
 menu>menuitem:focus {
     background-color: mix($surfaceVariant, $onSurfaceVariant, 90%);
 }
+
 menu>menuitem:active {
     background-color: mix($surfaceVariant, $onSurfaceVariant, 80%);
 }
@@ -93,6 +94,33 @@ tooltip {
     border: 1px solid $onSurfaceVariant;
 }
 
+/////////////////////////////////////////
+// Emoji Chooser structure
+// popover
+// ├── box.emoji-searchbar
+// │   ╰── entry.search
+// ╰── box.emoji-toolbar
+//     ├── button.image-button.emoji-section
+//     ├── ...
+//     ╰── button.image-button.emoji-section
+
+popover {
+    @include elevation-border-softer;
+    padding: 0.681rem;
+    background: $surfaceVariant;
+    color: $onSurfaceVariant;
+    border-radius: 1.159rem;
+    -gtk-outline-radius: 1.159rem;
+
+    animation-name: appear;
+    animation-duration: 40ms;
+    animation-timing-function: ease-out;
+    animation-iteration-count: 1;
+}
+
+
+/////////////////////////////////////////
+
 .configtoggle-box {
     padding: 0.205rem 0.341rem;
     border: 0.136rem solid transparent;

.config/ags/scss/main.scss

@@ -1,8 +1,8 @@
 // Reset
-* {
-    all: unset;
-}
-// *:not(tooltip) { all: unset; }
+// * {
+//     all: unset;
+// }
+*:not(popover) { all: unset; }
 
 // Colors
 @import './material'; // Material colors