1 files changed, 78 insertions, 0 deletions
diff --git a/browser/components/shopping/content/shopping-message-bar.css b/browser/components/shopping/content/shopping-message-bar.css
new file mode 100644
index 0000000000..f88b18be45
--- /dev/null
+++ b/browser/components/shopping/content/shopping-message-bar.css
@@ -0,0 +1,78 @@
+/* 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/. */
+
+@import url("chrome://global/skin/in-content/common.css");
+
+:host {
+  display: block;
+  border-radius: 4px;
+}
+
+#message-bar-container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0;
+  margin: 0;
+}
+
+:host([type="stale"]) #message-bar-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  column-gap: 8px;
+
+  > span {
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+  }
+}
+
+button {
+  margin-inline-start: 0;
+}
+
+message-bar::part(container) {
+  align-items: start;
+  padding: 0.5rem 0.75rem;
+  gap: 0.75rem;
+}
+
+message-bar::part(icon) {
+  padding: 0;
+}
+
+:host([type=analysis-in-progress]) message-bar::part(icon),
+:host([type=reanalysis-in-progress]) message-bar::part(icon) {
+  border: 1px solid var(--icon-color);
+  border-radius: 50%;
+}
+
+:host([type=analysis-in-progress]) message-bar::part(icon)::after,
+:host([type=reanalysis-in-progress]) message-bar::part(icon)::after {
+  --message-bar-icon-url: conic-gradient(var(--icon-color-information) var(--analysis-progress-pcent, 0%), transparent var(--analysis-progress-pcent, 0%));
+  border-radius: 50%;
+  margin-block: 1px 0;
+  margin-inline: 1px 0;
+  width: calc(var(--icon-size) - 2px);
+  height: calc(var(--icon-size) - 2px);
+}
+
+:host([type=reanalysis-in-progress]) message-bar::part(container),
+:host([type=stale]) message-bar::part(container) {
+  align-items: center;
+  background-color: transparent;
+  padding: 0;
+}
+
+:host([type=thank-you-for-feedback]) message-bar::part(icon) {
+  --message-bar-icon-url: url("chrome://global/skin/icons/check-filled.svg");
+}
+
+:host([type=thank-you-for-feedback]) message-bar::part(container) {
+  text-align: start;
+  align-items: center;
+  gap: 12px;
+}