fixes for #5158 -- required reflow of solution to #5090 for safari co…

…nsistency. Will need to regression test more.

src/components/searchfield/_searchfield-new.scss

@@ -58,22 +58,23 @@
     }
   }
 
-  &:not(.is-open) {
+  &:not(.is-Ropen) {
     .icon:not(.close) {
       top: 8px;
     }
   }
 
   .btn-icon.close {
+    align-items: center;
+    display: flex;
+    justify-content: center;
     overflow: visible;
-
-    &:not(.is-empty) {
-      top: 6px;
-    }
+    top: 50%;
+    transform: translateY(-50%);
 
     & > svg.close.icon {
-      top: calc(50% - 6px);
-      transform: translateY(-50%);
+      position: relative;
+      top: 1px;
     }
   }
 }

src/components/searchfield/_searchfield-toolbar.scss

@@ -995,10 +995,21 @@ html[dir='rtl'] {
 .header > .toolbar > .buttonset > .toolbar-searchfield-wrapper.non-collapsible.has-go-button.has-categories {
   button.close:not(.is-empty) {
     height: auto;
-    top: 5px;
+    top: 50%;
+    transform: translateY(-50%);
 
     svg.close {
       display: block;
+      top: 0px !important;
     }
   }
 }
+
+/**
+ * there is no "new" theme file for toolbar, so placing hotfix here
+ */
+html[class*='theme-new-'] .header > .toolbar > .buttonset > .toolbar-searchfield-wrapper.non-collapsible.has-go-button.has-categories {
+  button.close:not(.is-empty) svg.close {
+    top: 1px !important;
+  }
+}

src/components/searchfield/_searchfield.scss

@@ -585,3 +585,21 @@ html[dir='rtl'] {
     transform: translateY(-50%);
   }
 }
+
+/**
+ * need explicit theme-classic on these base
+ * close button rules just because it's a bit hairy
+ * at this point to un-target other rules
+ */
+html[class*='theme-classic-'] {
+  .btn-icon.close {
+    top: 50%;
+    transform: translateY(-50%);
+
+    & > svg.close.icon {
+      position: relative;
+      right: unset;
+      top: -1px;
+    }
+  }
+}