From 6946c1d6d5e9b83e2ee62239a8d1fbf94bbbaa7c Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Thu, 19 Jun 2025 14:40:52 -0500
Subject: [PATCH] Set `@layer`

---
 app/assets/stylesheets/fizzy-menu.css | 116 +++++++++++++-------------
 1 file changed, 59 insertions(+), 57 deletions(-)

diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/fizzy-menu.css
index aac5c96ed..6dffe739a 100644
--- a/app/assets/stylesheets/fizzy-menu.css
+++ b/app/assets/stylesheets/fizzy-menu.css
@@ -1,68 +1,70 @@
-.fizzy-dialog {
-  --panel-border-color: var(--color-selected-dark);
-  --panel-border-radius: 1.4em;
+@layer components {
+  .fizzy-dialog {
+    --panel-border-color: var(--color-selected-dark);
+    --panel-border-radius: 1.4em;
 
-  box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
-              0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
-              0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
-              0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
-  z-index: 5;
-}
-
-.fizzy-menu {
-  --input-border-color: var(--color-selected-dark);
-  --input-padding: 0.2em 2em 0.2em 0.9em;
-
-  box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
-              0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
-              0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
-              0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
-  margin-block-start: 0.1em;
-
-  svg {
-    block-size: auto;
-    inline-size: 1.3em;
-    margin-block-end: 0.2em;
-    margin-inline-end: 0.8ch;
+    box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
+                0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
+                0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
+                0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
+    z-index: 5;
   }
-}
 
-.fizzy-menu__hotkeys {
-  --gap: 3px;
+  .input:is(.fizzy-menu) {
+    --input-border-color: var(--color-selected-dark);
+    --input-padding: 0.2em 2em 0.2em 0.9em;
 
-  gap: var(--gap);
-  margin: var(--block-space-half) auto calc(var(--block-space-half) / 2);
+    box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
+                0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
+                0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
+                0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
+    margin-block-start: 0.1em;
 
-  .btn {
-    --btn-border-radius: 0.4em;
-
-    align-content: end;
-    aspect-ratio: 5/3;
-    flex-basis: calc((100% - var(--gap) * 2) / 3);
-    flex-direction: column;
-    font-size: var(--text-small);
-    line-height: 1;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-    row-gap: 0.3lh;
-    text-align: center;
-
-    kbd {
-      border: none;
-      box-shadow: none;
-      inset: 0.66em 0.33em auto auto;
-      opacity: 0.5;
-      position: absolute;
+    svg {
+      block-size: auto;
+      inline-size: 1.3em;
+      margin-block-end: 0.2em;
+      margin-inline-end: 0.8ch;
     }
+  }
 
-    .icon {
-      --icon-size: 2em !important;
-    }
+  .fizzy-menu__hotkeys {
+    --gap: 3px;
 
-    span {
-      display: flex;
-      text-wrap: nowrap;
+    gap: var(--gap);
+    margin: var(--block-space-half) auto calc(var(--block-space-half) / 2);
+
+    .btn {
+      --btn-border-radius: 0.4em;
+
+      align-content: end;
+      aspect-ratio: 5/3;
+      flex-basis: calc((100% - var(--gap) * 2) / 3);
+      flex-direction: column;
+      font-size: var(--text-small);
+      line-height: 1;
+      justify-content: center;
+      overflow: hidden;
+      position: relative;
+      row-gap: 0.3lh;
+      text-align: center;
+
+      kbd {
+        border: none;
+        box-shadow: none;
+        inset: 0.66em 0.33em auto auto;
+        opacity: 0.5;
+        position: absolute;
+      }
+
+      .icon {
+        --icon-size: 2em !important;
+      }
+
+      span {
+        display: flex;
+        text-wrap: nowrap;
+      }
     }
   }
 }
\ No newline at end of file