refactor: ♻️ clean up transitions, reduce unnecessary clutter

Using @starting-style allows to proper transitions on dialog element. Also turns out the use of pseudo elements was unnecessary.

src/components/popup-modal.webc

@@ -56,9 +56,12 @@
     --clr-no: oklch(40% 0.2 40deg);
   }
 
-  :host {
+  :host[open] {
-    display: none;
+    opacity: 1;
+    transform: scale(1);
+  }
 
+  :host {
     background: linear-gradient(
       to bottom right,
       var(--clr-box-gradient-start) 0%,
@@ -71,67 +74,54 @@
     margin: auto;
     border: none;
     border-radius: 1.5em;
-    padding: 1rem;
+    padding: 0;
+
+    overflow: auto;
 
-    overflow: hidden;
     z-index: 1;
 
     opacity: 0;
+    transform: scale(0);
 
-    transition: all 0.75s ease-in-out allow-discrete;
+    transition: all 0.5s var(--timing-func) allow-discrete;
-    animation: fade-in 0.5s;
-    animation-timing-function: var(--timing-func);
-    transition: all 0.5s;
-    transition-timing-function: var(--timing-func);
   }
 
-  :host::before {
+  @starting-style {
-    content: '';
+    :host[open] {
-    position: absolute;
+      opacity: 0;
-    inset: var(--border-thin);
+      transform: scale(0);
-    background-color: var(--clr-box-background);
+    }
-    border-radius: inherit;
-    z-index: -1;
-  }
-
-  :host[open] {
-    opacity: 1;
-    display: block;
   }
 
   :host::backdrop {
     backdrop-filter: blur(0rem);
-    background-color: oklch(from black l c h / 0.5);
+    background-color: oklch(from black l c h / 0);
 
-    opacity: 0;
+    transition: all 0.5s ease allow-discrete;
-
-    transition: all 0.75s ease-in-out allow-discrete;
-    animation: backdrop-fade-in 0.5s;
   }
 
   :host[open]::backdrop {
     backdrop-filter: blur(1rem);
-    opacity: 1;
+    background-color: oklch(from black l c h / 0.5);
+  }
+
+  @starting-style {
+    :host[open]::backdrop {
+      backdrop-filter: blur(0rem);
+      background-color: oklch(from black l c h / 0);
+    }
   }
 
   :host .content {
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: center;
     text-align: center;
-    gap: 1.5rem;
+    background: var(--clr-box-background);
-  }
 
-  :host .content > * {
+    margin: var(--border-thin);
-    flex: 1 1 auto;
+    border-radius: inherit;
-  }
+    padding: 1em;
-
-  :host .heading {
-    margin: 1.875rem 0 0 0;
   }
 
   :host .message {
-    flex: 1 1 100%;
     text-wrap: balance;
   }
 
@@ -150,38 +140,4 @@
     --gradient-base: var(--clr-no);
     --clr-text: var(--theme-c-primary-100);
   }
-
-  @starting-style {
-    :host {
-      display: none;
-      opacity: 0;
-    }
-
-    :host::backdrop {
-      backdrop-filter: blur(0rem);
-      opacity: 0;
-    }
-  }
-
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-      scale: 0;
-    }
-    to {
-      opacity: 1;
-      scale: 1;
-    }
-  }
-
-  @keyframes backdrop-fade-in {
-    from {
-      backdrop-filter: blur(0rem);
-      opacity: 0;
-    }
-    to {
-      backdrop-filter: blur(1rem);
-      opacity: 1;
-    }
-  }
 </style>