From ebdd5a4fdd980a023c8b6a58bd732dab988c887a Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 30 Nov 2022 09:54:43 -0800
Subject: [PATCH] add hover styling to desktop search button

---
 src/theme/search.css | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/theme/search.css b/src/theme/search.css
index cd1e2e8cb3..c5aeec74f8 100644
--- a/src/theme/search.css
+++ b/src/theme/search.css
@@ -7,10 +7,19 @@
   padding: 1rem;
   width: 200px;
   gap: 1rem;
+  --docsearch-searchbox-shadow: transparent;
+  --docsearch-searchbox-focus-background: transparent;
 }
 
 .DocSearch-Button:hover {
-  background: none;
+  background: var(--chakra-colors-primary);
+}
+
+.DocSearch-Button:hover svg path,
+.DocSearch-Button:hover kbd,
+.DocSearch-Button:hover span {
+  color: var(--chakra-colors-bg);
+  border-color: var(--chakra-colors-bg);
 }
 
 .DocSearch-Button-Container {
@@ -149,10 +158,6 @@ svg[aria-label="Algolia"] * {
     padding: 2rem 1rem;
   }
 
-  .DocSearch-Button:active, .DocSearch-Button:focus, .DocSearch-Button:hover {
-    background: var(--chakra-colors-primary);
-  }
-
   .DocSearch-Search-Icon * {
     color: var(--chakra-colors-bg);
   }