Bug 1867728 - Better approach to style the search bar focus for Windows. r=aleca

Differential Revision: https://phabricator.services.mozilla.com/D195205

--HG--
extra : rebase_source : 6ab73ef3eec37a898046468845c836aa3789e582

mail/themes/shared/mail/search-bar.css

@@ -32,22 +32,16 @@ input {
   }
 
   &:focus-visible {
-    outline: var(--focus-outline);
-    outline-offset: -1px;
+    outline-style: solid;
+    outline-width: 2px;
+    outline-color: var(--search-focus-outline-color);
+    outline-offset: var(--search-outline-offset);
   }
 
   &:-moz-lwtheme:focus-visible {
     color: var(--toolbar-field-focus-color);
     background-color: var(--toolbar-field-focus-background-color);
   }
-
-  @media (-moz-windows-accent-color-in-titlebar) {
-    /* Apply only to unified toolbar. QFB search input has maxlength="192" */
-    &[maxlength="null"]:not(:-moz-lwtheme):focus-visible {
-      outline-offset: var(--focus-outline-offset);
-      outline-color: var(--windows-accent-outline-color);
-    }
-  }
 }
 
 .button {

mail/themes/shared/mail/unifiedToolbar.css

@@ -89,6 +89,13 @@ unified-toolbar {
   & .spacer {
     -moz-window-dragging: drag;
   }
+
+  @media (-moz-windows-accent-color-in-titlebar) {
+    & .search-bar {
+      --search-focus-outline-color: var(--windows-accent-outline-color);
+      --search-outline-offset: var(--focus-outline-offset);
+    }
+  }
 }
 
 unified-toolbar-customization {

mail/themes/shared/mail/variables.css

@@ -57,6 +57,8 @@
   --new-folder-color: light-dark(var(--color-blue-60), var(--color-blue-40));
   --lwt-header-image: none;
   --search-field-placeholder: color-mix(in srgb, currentColor 50%, transparent);
+  --search-focus-outline-color: var(--focus-outline-color);
+  --search-outline-offset: -1px;
   --selected-item-color: light-dark(var(--color-blue-60), var(--color-blue-50));
   --selected-item-text-color: var(--color-white);
   --splitter-color: var(--sidebar-border-color, var(--layout-border-0));