From d5645312f99f7f0f04a2500af235b196f951a21f Mon Sep 17 00:00:00 2001
From: David Abell <79927957+david-abell@users.noreply.github.com>
Date: Wed, 18 Oct 2023 08:27:11 +0100
Subject: [PATCH] fix: background color specificity fix: broken height 100% on
 safari

---
 Modal.astro | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/Modal.astro b/Modal.astro
index 29c7305..5c77146 100644
--- a/Modal.astro
+++ b/Modal.astro
@@ -139,7 +139,7 @@ const { triggerId, title, closeText = 'Close' } = Astro.props
     filter: blur(6px);
   }
 
-  .modal {
+  :where(.modal) {
     color: black;
     background-color: white;
     border: 0.5rem solid black;
@@ -149,14 +149,8 @@ const { triggerId, title, closeText = 'Close' } = Astro.props
 
   .modal__inner {
     width: clamp(30ch, 70%, 75ch);
-    color: black;
-    background-color: white;
     border-radius: 1rem;
-  }
-
-  .modal__inner {
     width: 100%;
-    height: 100%;
   }
 
   .modal__content {
@@ -176,6 +170,7 @@ const { triggerId, title, closeText = 'Close' } = Astro.props
     background-color: lightgrey;
     border-bottom-left-radius: 0.4rem;
     border-bottom-right-radius: 0.4rem;
+    color: black;
     text-align: right;
     transition: background-color 0.15s ease-in-out;
     width: 100%;