From 081b1342ea2be8638fe7c0d7b1e331868b8c4d15 Mon Sep 17 00:00:00 2001
From: Hichem Fantar <fantar.hichem@gmail.com>
Date: Wed, 15 Jan 2025 20:15:38 +0100
Subject: [PATCH 1/2] style(button): add transition effects for improved button
 interaction

---
 packages/docsearch-css/src/button.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/docsearch-css/src/button.css b/packages/docsearch-css/src/button.css
index 2677e85c7..bd4e2137d 100644
--- a/packages/docsearch-css/src/button.css
+++ b/packages/docsearch-css/src/button.css
@@ -61,6 +61,9 @@
   border: 0;
   top: -1px;
   width: 20px;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 100ms;
 }
 
 .DocSearch-Button-Key--pressed {

From 0067c78b49eb8250c48f321ce8335c0a93c71ede Mon Sep 17 00:00:00 2001
From: Hichem Fantar <fantar.hichem@gmail.com>
Date: Thu, 16 Jan 2025 12:21:50 +0100
Subject: [PATCH 2/2] style(button): disable transitions for users with reduced
 motion preferences

---
 packages/docsearch-css/src/button.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/docsearch-css/src/button.css b/packages/docsearch-css/src/button.css
index bd4e2137d..087220162 100644
--- a/packages/docsearch-css/src/button.css
+++ b/packages/docsearch-css/src/button.css
@@ -66,6 +66,12 @@
   transition-duration: 100ms;
 }
 
+@media (prefers-reduced-motion)  {
+  .DocSearch-Button-Key {
+    transition: none;
+  }
+}
+
 .DocSearch-Button-Key--pressed {
   transform: translate3d(0, 1px, 0);
   box-shadow: var(--docsearch-key-pressed-shadow);