Update search style.

Author: nikoshell

src/components/header/header-actions.astro

@@ -1,5 +1,4 @@
 ---
-import ButtonLink from "../button-link/button-link.astro";
 import Button from "@ui/Button.astro";
 import HeaderButton from "./header-button.astro";
 import Search from "../search/Search.astro";
@@ -12,16 +11,32 @@ export interface Props {
 const { mobile = false }: Props = Astro.props;
 
 const IS_LIVE = false;
+
+
+      //<Button id="searchButton" icon="search" iconSize="fa-xl" clear title="Search (Crtl+K)"></Button>
 ---
 
-<div class="flex items-start justify-end gap-2 h-[85px]">
+<div class="flex items-center justify-end gap-2 h-[85px] w-1/3">
   <Search />
-<div class="ml-auto flex items-start">
+<div class="ml-auto justify-end flex items-center w-full">
   {
     !mobile ?
       <>
-      <Button id="searchButton" icon="search" iconSize="fa-xl" clear title="Search (Crtl+K)"></Button>
-      <Button url="/tickets" icon="ticket" class="max-xl:hidden">Register Now!</Button>
+
+        <button
+          id="searchButton"
+          class="mx-6 md:mx-2"
+            data-open-modal
+            aria-label="Search"
+            aria-keyshortcuts="Control+K"
+          >
+            <Icon name="search" />
+            <span class="hidden md:block" aria-hidden="true">Search</span>
+            <kbd class="hidden md:flex" >
+              <kbd>Ctrl</kbd><kbd>K</kbd>
+            </kbd>
+          </button>
+      <Button url="/tickets" icon="ticket" class="w-full max-w-48 max-xl:hidden">Register Now!</Button>
       {IS_LIVE && <Button url="/live">Live</Button>}
       </>
      : null
@@ -34,13 +49,66 @@ const IS_LIVE = false;
       </span>
   </label>
 </div>
-<script>
-    const searchButton = document.getElementById("searchButton");
-    const searchWrapper = document.querySelector(".search-wrapper") as HTMLElement;
-
-    if (searchButton && searchWrapper) {
-      searchButton.addEventListener("click", function () {
-        searchWrapper.style.display = searchWrapper.style.display === "block" ? "none" : "block";
-      });
-    }
-</script>
+
+<style>
+	button[data-open-modal] {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		border: 0;
+		background-color: transparent;
+    color: grey;
+		cursor: pointer;
+		height: 2.5rem;
+		font-size: 28px;
+	}
+
+	@media (min-width: 45rem) {
+		button[data-open-modal] {
+			border: 1px solid #ccc;
+			border-radius: 0.5rem;
+			padding-inline-start: 0.75rem;
+			padding-inline-end: 0.5rem;
+			background-color: #fff;
+			font-size: 16px;
+      width:100%;
+			min-width: 10rem;
+			max-width: 22rem;
+			color: #5f3d1b;
+		}
+		button[data-open-modal]:hover {
+			border-color: #5f3d1b;
+      color: #000;
+		}
+
+		button[data-open-modal] > :last-child {
+			margin-inline-start: auto;
+		}
+	}
+
+	button > kbd {
+		border-radius: 0.25rem;
+			font-size: 16px;
+		gap: 0.25em;
+		padding-inline: 0.375rem;
+		background-color: #F1E1D4;
+    color: #5f3d1b;
+	}
+
+	kbd {
+		font-family: var(--__sl-font);
+	}
+
+	button[data-close-modal] {
+		position: absolute;
+		z-index: 1;
+		align-items: center;
+		align-self: flex-end;
+		height: calc(64px * var(--pagefind-ui-scale));
+		padding: 0.25rem;
+		border: 0;
+		background: transparent;
+		cursor: pointer;
+		color: #333;
+	}
+</style>