search icon hover behavior + padding

Author: outofambit

src/components/SearchForm/index.astro

@@ -12,22 +12,22 @@ const t = await getUiTranslator(currentLocale);
   role="search"
   class="relative w-full h-full text-accent-type-color bg-accent-color border-accent-type-color border rounded-[20px] !mx-0"
 >
-  <div class="absolute top-[6px] lg:top-[10px] left-[15px]">
+  <div class="absolute top-[6px] lg:top-[10px] left-[11px]">
     <Icon kind="search" />
   </div>
   <input
     id="search-term"
     type="search"
     placeholder={t("Search") as string}
     name="term"
-    class="placeholder-accent-type-color bg-transparent pl-[40px] py-[6px] md:py-[4px] lg:py-[8px] w-full rounded-[20px]"
+    class="placeholder-accent-type-color bg-transparent pl-[40px] py-[6px] md:py-[4px] lg:py-[8px] w-full rounded-[20px] peer"
     aria-label="Search through site content"
     required
   />
   <button
     type="submit"
     aria-label="Submit search"
-    class="absolute px-[22px] right-0 top-0 py-[11px] lg:py-[13px]"
+    class="invisible peer-valid:visible absolute pl-[22px] pr-[12px] right-0 top-0 py-[11px] lg:py-[13px]"
     ><Icon kind="search-submit" /></button
   >
 </form>