From a45c67a2674f756f47c88171023076a0d3e65e7d Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Tue, 31 Dec 2024 09:47:17 +0530
Subject: [PATCH] Button: Standardize reduced motion handling using media
 queries

---
 packages/components/src/button/style.scss | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 460aeaa2781cd..cd75e3d39cf79 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -15,8 +15,11 @@
 	cursor: pointer;
 	-webkit-appearance: none;
 	background: none;
-	transition: box-shadow 0.1s linear;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: box-shadow 0.1s linear;
+	}
+
 	height: $button-size;
 	align-items: center;
 	box-sizing: border-box;
@@ -245,10 +248,13 @@
 		text-align: left;
 		color: $components-color-accent;
 		text-decoration: underline;
-		transition-property: border, background, color;
-		transition-duration: 0.05s;
-		transition-timing-function: ease-in-out;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition-property: border, background, color;
+			transition-duration: 0.05s;
+			transition-timing-function: ease-in-out;
+		}
+
 		height: auto;
 
 		&:focus {