From be1ed2bbcfa8b0a4427ae507f0cda8a34da75ab7 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Fri, 12 May 2023 13:11:38 +0100
Subject: [PATCH] Update tomselect multiselect styling

---
 .../css/admin/components/tom_select.scss      | 31 +++++++++++++------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/app/webpacker/css/admin/components/tom_select.scss b/app/webpacker/css/admin/components/tom_select.scss
index 4c1d31d0e4..076f0a55b2 100644
--- a/app/webpacker/css/admin/components/tom_select.scss
+++ b/app/webpacker/css/admin/components/tom_select.scss
@@ -2,17 +2,28 @@
   min-height: initial;
 }
 
-.ts-wrapper.multi .ts-control [data-value] {
-  text-shadow: none;
-  background-image: none;
-  background-repeat: initial;
-  box-shadow: none;
-  background-color: $spree-blue;
-}
+.ts-wrapper.multi {
+  .ts-control {
+    box-shadow: none;
+    border-color: $pale-blue;
 
-.ts-wrapper.multi .ts-control > div {
-  border: none;
-  background-color: $spree-blue;
+    &:focus {
+      border-color: $spree-green;
+    }
+
+    [data-value] {
+      text-shadow: none;
+      background-image: none;
+      background-repeat: initial;
+      box-shadow: none;
+      background-color: $spree-blue;
+    }
+  }
+
+  .ts-control > div {
+    border: none;
+    background-color: $spree-blue;
+  }
 }
 
 .ts-wrapper.plugin-remove_button .item .remove {