style search strategy checkbox

Author: tobz-nz

css/search.css

@@ -23,7 +23,27 @@
         }
     }
 
-    input {
+    label:has(input[type="checkbox"]) {
+        margin-inline-end: auto;
+        display: flex;
+        align-items: center;
+        gap: var(--size-2);
+        font-size: var(--font-size-0);
+
+        input {
+            color: white;
+        }
+    }
+
+    input[type="search"]:invalid + input[name="checkbox"] {
+        right: 20px;
+    }
+
+    input[type="search"]:valid + input[name="checkbox"] {
+        right: 50px;
+    }
+
+    input[type="search"] {
         display: block;
         margin: 0 var(--size-2) var(--size-2);
 
@@ -64,13 +84,33 @@
         overflow: auto;
 
         article {
+            max-height: 35vh;
+            overflow: hidden;
+
+            scroll-margin-top: var(--size-2);
+            /* overscroll-behavior: ; */
+
             font-weight: var(--font-weight-2);
 
             border: 1px solid var(--gray-2);
             border-radius: var(--radius-2);
             background: white;
             box-shadow: var(--shadow-2);
 
+            transition:
+                max-height 300ms ease,
+                box-shadow 250ms ease;
+
+            &:hover {
+                box-shadow: var(--shadow-3);
+            }
+
+            &:is(:focus, :focus-visible, :focus-within) {
+                overflow: auto;
+                outline-offset: 5px;
+                outline: 1px auto;
+            }
+
             @media (prefers-color-scheme: dark) {
                 border-color: var(--gray-7);
                 background: var(--gray-8);

index.html

@@ -94,10 +94,11 @@ <h2>Indexes</h2>
         <main>
             <search-form input="#query" on="input focus">
                 <section>
-                    <input id="query" name="query" type="search" autocomplete="off" placeholder="search" />
+                    <input id="query" name="query" type="search" autocomplete="off" placeholder="search" required />
                     <result-stats>
-                        <search-time id="processing-time"></search-time>
-                        <total-hits></total-hits>
+                        <label for="strategy"><input type="checkbox" id="strategy" name="strategy" value="all" title="Search Strategy: All" /> Search Strategy: All</label>
+                        <search-time id="processing-time">0ms</search-time>
+                        <total-hits>0 Hits</total-hits>
                     </result-stats>
                 </section>
                 <search-results>Loading...</search-results>