From a63714304bcb0155a63d4d47d1053eb2cad2da75 Mon Sep 17 00:00:00 2001
From: Victor Westerlund <victor.vesterlund@gmail.com>
Date: Tue, 28 Dec 2021 20:27:05 +0100
Subject: [PATCH] Add style for search input clear

Styling overrides for the clear button present in some browsers for input="search"
---
 public/assets/css/search.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/public/assets/css/search.css b/public/assets/css/search.css
index ee79755..81f815a 100644
--- a/public/assets/css/search.css
+++ b/public/assets/css/search.css
@@ -16,7 +16,7 @@ input[type="search"] {
     height: 100%;
     font-size: 18px;
     color: inherit;
-    padding: 0 calc(var(--padding) * 2);
+    padding: 0 calc(var(--padding) * 1.5);
     background-color: transparent;
     border: none;
     outline: none;
@@ -31,6 +31,14 @@ input[type="search"]::placeholder {
     color: rgba(var(--color-background),.4);
 }
 
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    height: 32px;
+    width: 32px;
+    background: center no-repeat rgba(var(--color-background),.1) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAAXNSR0IArs4c6QAAAFRJREFUeNrlkrkNADEIBK8JunD/GVW4oLnMAViagNBkLDsS3/d4sEiiqUGy7kACmyj2DeQRavEgTRGkZ4oUuyPF7ojYBRi35ENP1+qHG7+GP9/b8QPsDLZNvX0megAAAABJRU5ErkJggg==');
+    cursor: pointer;
+}
+
 #results {
     text-align: center;
     font-size: 18px;