From 92e626aa21da622d987ff62b4819e1cce73b4bb4 Mon Sep 17 00:00:00 2001
From: Matt-Kaminski <38296259+Matt-Kaminski@users.noreply.github.com>
Date: Fri, 20 Sep 2024 18:08:49 +0200
Subject: [PATCH] Fix invalid keyframes in component-pickup-availability.css

Correct invalid CSS structure in component-pickup-availability.css

The original animateDrawerOpen keyframes contained media queries directly inside the @keyframes rule, which is not valid CSS syntax. Keyframe animations cannot include media queries in this way.

Changes made:
1. Removed invalid media query syntax from within the @keyframes rule
2. Simplified to a single set of keyframes that applies to all screen sizes

The animation now correctly defines the keyframes without attempting to
use media queries within the @keyframes rule.
---
 assets/component-pickup-availability.css | 26 ++++++------------------
 1 file changed, 6 insertions(+), 20 deletions(-)

diff --git a/assets/component-pickup-availability.css b/assets/component-pickup-availability.css
index d99933b5cc2..2f1b1476a0a 100644
--- a/assets/component-pickup-availability.css
+++ b/assets/component-pickup-availability.css
@@ -149,27 +149,13 @@ pickup-availability-drawer[open] {
 }
 
 @keyframes animateDrawerOpen {
-  @media screen and (max-width: 749px) {
-    0% {
-      opacity: 0;
-      transform: translateX(100%);
-    }
-
-    100% {
-      opacity: 1;
-      transform: translateX(0);
-    }
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
   }
 
-  @media screen and (min-width: 750px) {
-    0% {
-      opacity: 0;
-      transform: translateX(100%);
-    }
-
-    100% {
-      opacity: 1;
-      transform: translateX(0);
-    }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
   }
 }