From 06c2e6d0aaee3053b0a2e9548fbaa79443209eb5 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 21 Jul 2025 14:03:15 -0500
Subject: [PATCH] Put animated popups within cascade layer

---
 app/assets/stylesheets/popup.css | 62 ++++++++++++++++----------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 2d797358a..2fbb56659 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -147,48 +147,48 @@
     padding-inline: var(--inline-space);
     text-transform: uppercase;
   }
-}
 
-.popup--animated {
-  --backdrop-speed: 150ms;
-  --speed: 150ms;
+  .popup--animated {
+    --backdrop-speed: 150ms;
+    --speed: 150ms;
 
-  opacity: 0;
-  transform: scale(0.2) translateX(-50%);
-  transform-origin: top left;
-  transition:
-      display var(--speed) allow-discrete,
-      opacity var(--speed),
-      overlay var(--speed) allow-discrete,
-      transform var(--speed);
-
-  &::backdrop {
-    background-color: var(--color-always-black);
     opacity: 0;
-    transform: scale(1);
+    transform: scale(0.2) translateX(-50%);
+    transform-origin: top left;
     transition:
-      display var(--backdrop-speed) allow-discrete,
-      opacity var(--backdrop-speed),
-      overlay var(--backdrop-speed) allow-discrete;
-  }
-
-  &[open] {
-    opacity: 1;
-    transform: scale(1) translateX(-50%);
+        display var(--speed) allow-discrete,
+        opacity var(--speed),
+        overlay var(--speed) allow-discrete,
+        transform var(--speed);
 
     &::backdrop {
-      opacity: 0.5;
+      background-color: var(--color-always-black);
+      opacity: 0;
+      transform: scale(1);
+      transition:
+        display var(--backdrop-speed) allow-discrete,
+        opacity var(--backdrop-speed),
+        overlay var(--backdrop-speed) allow-discrete;
     }
-  }
 
-  @starting-style {
     &[open] {
-      opacity: 0;
-      transform: scale(0.2) translateX(-50%);
+      opacity: 1;
+      transform: scale(1) translateX(-50%);
+
+      &::backdrop {
+        opacity: 0.5;
+      }
     }
 
-    &[open]::backdrop {
-      opacity: 0;
+    @starting-style {
+      &[open] {
+        opacity: 0;
+        transform: scale(0.2) translateX(-50%);
+      }
+
+      &[open]::backdrop {
+        opacity: 0;
+      }
     }
   }
 }