[PM-2194] Tweak the CL search inputs reset button (#5409)

libs/components/src/search/close-button-white.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512">
+  <path fill="#fff" d="m381.1 343.16-87.47-87.76 87.67-86.62a9.24 9.24 0 0 0 0-13.06l-24.93-25.06a9.18 9.18 0 0 0-6.54-2.66c-2.46 0-4.8 1-6.53 2.66l-87.27 86.36-87.4-86.29a9.18 9.18 0 0 0-6.53-2.66c-2.47 0-4.8 1-6.53 2.66L130.7 155.8a9.24 9.24 0 0 0 0 13.06l87.67 86.62-87.4 87.69a9.22 9.22 0 0 0-2.74 6.53c0 2.46.94 4.8 2.74 6.53l24.93 25.05a9.19 9.19 0 0 0 13.07 0l87.06-87.42 87.14 87.36a9.19 9.19 0 0 0 13.06 0l24.94-25.06a9.23 9.23 0 0 0 2.73-6.53 9.55 9.55 0 0 0-2.8-6.46Z"/>
+</svg>

libs/components/src/search/search.component.css

@@ -0,0 +1,19 @@
+/**
+ * Tailwind doesn't have a good way to style search-cancel-button.
+ */
+bit-search input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 21px;
+  width: 21px;
+  margin: 0;
+  cursor: pointer;
+  background-repeat: no-repeat;
+  mask-image: url("./close-button-white.svg");
+  -webkit-mask-image: url("./close-button-white.svg");
+  background-color: rgba(var(--color-text-muted));
+}
+
+bit-search input[type="search"]::-webkit-search-cancel-button:hover {
+  background-color: rgba(var(--color-text-main));
+}

libs/components/src/tw-theme.css

@@ -79,3 +79,5 @@
 
   --tw-ring-offset-color: #1f242e;
 }
+
+@import "./search/search.component.css";