1 files changed, 89 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/search-bar.css b/comm/mail/themes/shared/mail/search-bar.css
new file mode 100644
index 0000000000..001be77aa0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/search-bar.css
@@ -0,0 +1,89 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Primary CSS file inside the search-bar shadowRoot */
+
+@import url("chrome://messenger/skin/widgets.css");
+
+form {
+  --padding-block: 6px;
+  --search-icon-clearance: 30px;
+  position: relative;
+  min-height: max(1.2em, calc(1.2em + 2 * var(--padding-block)));
+  height: 100%;
+  max-height: 2em;
+}
+
+input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 1rem;
+  border: 1px solid var(--color-gray-40);
+  border-radius: var(--button-border-radius);
+  padding-inline: var(--padding-block) var(--search-icon-clearance);
+  background-color: var(--layout-background-0);
+}
+
+input:-moz-lwtheme {
+  color: var(--toolbar-field-color);
+  background-color: var(--toolbar-field-background-color);
+  border-color: var(--toolbar-field-border-color);
+}
+
+input:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: -1px;
+}
+
+@media (-moz-windows-accent-color-in-titlebar) {
+  input:not(:-moz-lwtheme):focus-visible {
+    outline-offset: var(--focus-outline-offset);
+    outline-color: var(--windows-accent-outline-color);
+  }
+}
+
+input:-moz-lwtheme:focus-visible {
+  color: var(--toolbar-field-focus-color);
+  background-color: var(--toolbar-field-focus-background-color);
+}
+
+.button {
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block: 0;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.button.button-flat.icon-button {
+  padding: 4px;
+  margin: 0;
+}
+
+.button.button-flat.icon-button:focus-visible {
+  outline-offset: -1px;
+}
+
+div {
+  display: none;
+  position: absolute;
+  pointer-events: none;
+  color: var(--search-field-placeholder);
+  inset-inline-start: 1ch;
+  inset-inline-end: var(--search-icon-clearance);
+  flex-direction: column;
+  justify-content: space-around;
+  text-overflow: clip;
+  overflow: hidden;
+  white-space: nowrap;
+  inset-block: 0;
+}
+
+input:placeholder-shown + div {
+  display: flex;
+}