scss: add popover styles

For GTK emoji picker

scss/common.scss

@@ -0,0 +1,85 @@
+@use "scheme";
+@use "lib";
+@use "font";
+
+label.icon {
+    @include font.icon;
+}
+
+.notification {
+    .inner {
+        @include lib.rounded(8);
+        @include font.main;
+
+        background-color: scheme.$base;
+        color: scheme.$text;
+        padding: lib.s(10) lib.s(12);
+
+        @include lib.spacing($vertical: true);
+    }
+
+    .header,
+    .content {
+        padding: 0 lib.s(5);
+    }
+
+    .header {
+        @include font.mono;
+        @include lib.spacing(8);
+    }
+
+    .content {
+        @include lib.spacing(10);
+    }
+
+    .app-icon {
+        font-size: lib.s(18);
+    }
+
+    .image {
+        @include lib.rounded(10);
+
+        background-size: cover;
+        background-position: center;
+        margin-top: lib.s(3);
+        min-width: lib.s(64);
+        min-height: lib.s(64);
+
+        &.small {
+            min-width: lib.s(48);
+            min-height: lib.s(48);
+        }
+    }
+
+    .summary {
+        @include font.title;
+
+        font-size: lib.s(16);
+    }
+
+    .body {
+        font-size: lib.s(14);
+        color: scheme.$subtext0;
+    }
+
+    .actions {
+        @include lib.spacing;
+
+        & > * {
+            @include lib.rounded(5);
+            @include lib.element-decel;
+
+            padding: lib.s(5) lib.s(10);
+            background-color: scheme.$surface0;
+
+            &:hover,
+            &:focus {
+                background-color: scheme.$surface1;
+            }
+
+            &:active {
+                background-color: scheme.$surface2;
+            }
+        }
+    }
+}

scss/widgets.scss

@@ -3,88 +3,6 @@
 @use "lib";
 @use "font";
 
-label.icon {
-    @include font.icon;
-}
-
-.notification {
-    .inner {
-        @include lib.rounded(8);
-        @include font.main;
-
-        background-color: scheme.$base;
-        color: scheme.$text;
-        padding: lib.s(10) lib.s(12);
-
-        @include lib.spacing($vertical: true);
-    }
-
-    .header,
-    .content {
-        padding: 0 lib.s(5);
-    }
-
-    .header {
-        @include font.mono;
-        @include lib.spacing(8);
-    }
-
-    .content {
-        @include lib.spacing(10);
-    }
-
-    .app-icon {
-        font-size: lib.s(18);
-    }
-
-    .image {
-        @include lib.rounded(10);
-
-        background-size: cover;
-        background-position: center;
-        margin-top: lib.s(3);
-        min-width: lib.s(64);
-        min-height: lib.s(64);
-
-        &.small {
-            min-width: lib.s(48);
-            min-height: lib.s(48);
-        }
-    }
-
-    .summary {
-        @include font.title;
-
-        font-size: lib.s(16);
-    }
-
-    .body {
-        font-size: lib.s(14);
-        color: scheme.$subtext0;
-    }
-
-    .actions {
-        @include lib.spacing;
-
-        & > * {
-            @include lib.rounded(5);
-            @include lib.element-decel;
-
-            padding: lib.s(5) lib.s(10);
-            background-color: scheme.$surface0;
-
-            &:hover,
-            &:focus {
-                background-color: scheme.$surface1;
-            }
-
-            &:active {
-                background-color: scheme.$surface2;
-            }
-        }
-    }
-}
-
 separator,
 .separator {
     @include lib.rounded(2);
@@ -199,3 +117,15 @@ scrollbar {
         }
     }
 }
+
+popover {
+    @include -appear;
+    @include lib.rounded(10);
+    @include lib.border(scheme.$yellow, 0.4);
+    @include font.mono;
+
+    padding: lib.s(8);
+    background-color: scheme.$base;
+    color: scheme.$text;
+    font-size: lib.s(14);
+}

style.scss

@@ -1,8 +1,9 @@
 @use "sass:color";
 @use "scss/scheme";
 
-// Common widgets
+// Common styles
 @use "scss/widgets";
+@use "scss/common";
 
 // Modules
 @use "scss/bar";