From 422b519221514598fb20aa4d2ac414e8e7d8de36 Mon Sep 17 00:00:00 2001
From: Luke Seelenbinder <me@lukeseelenbinder.com>
Date: Tue, 27 Jun 2023 21:06:59 +0200
Subject: [PATCH] Make cancel button consistent across browsers.

---
 package-lock.json |  4 ++--
 package.json      |  2 +-
 src/index.scss    | 28 +++++++++++++++++++++++-----
 src/index.ts      |  4 ++--
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4f69979..1844717 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@stadiamaps/maplibre-search-box",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@stadiamaps/maplibre-search-box",
-      "version": "0.2.0",
+      "version": "0.2.1",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@stadiamaps/api": "^1.0.4"
diff --git a/package.json b/package.json
index 18eb133..5e65cb1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stadiamaps/maplibre-search-box",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "homepage": "https://docs.stadiamaps.com/",
   "repository": "https://github.com/stadiamaps/maplibre-search-box",
   "license": "BSD-3-Clause",
diff --git a/src/index.scss b/src/index.scss
index 2797b1e..c7219c8 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -36,21 +36,37 @@
     .cancel {
       background: #aaa;
       border-radius: 50%;
-      color: #fff;
       cursor: pointer;
       display: block;
       font-size: 1.5rem;
       height: 20px;
+      opacity: 0.5;
       position: absolute;
       right: 5px;
       top: 9px;
       width: 20px;
 
+      &:hover {
+        opacity: 1;
+      }
+
+      &::before,
+      &::after {
+        background-color: #fff;
+        content: " ";
+        height: 10px;
+        left: 9px;
+        position: absolute;
+        top: 5px;
+        width: 2px;
+      }
+
       &::before {
-        content: "\02a2f";
-        display: block;
-        margin-left: 4.5px;
-        margin-top: -4.5px;
+        transform: rotate(45deg);
+      }
+
+      &::after {
+        transform: rotate(-45deg);
       }
     }
 
@@ -123,6 +139,8 @@
     padding: 5px;
 
     a {
+      color: #000;
+
       &:visited {
         color: #000;
       }
diff --git a/src/index.ts b/src/index.ts
index 9a7da4c..31cd65b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,6 @@
-import { IControl, Map } from "maplibre-gl";
+import type { IControl, Map } from "maplibre-gl";
 import {
-  AutocompleteRequest,
+  type AutocompleteRequest,
   GeocodingApi,
   PeliasGeoJSONFeature,
   PeliasLayer,