1 files changed, 7 insertions, 45 deletions

diff --git a/toolkit/content/widgets/moz-message-bar/moz-message-bar.css b/toolkit/content/widgets/moz-message-bar/moz-message-bar.css
index 6d35009982..fa7b08612d 100644
--- a/toolkit/content/widgets/moz-message-bar/moz-message-bar.css
+++ b/toolkit/content/widgets/moz-message-bar/moz-message-bar.css
@@ -6,14 +6,7 @@
   /* Icon */
   --message-bar-icon-color: var(--icon-color-information);
   --message-bar-icon-size: var(--size-item-small);
-  --message-bar-icon-close-color: var(--icon-color);
-  --message-bar-icon-close-url: url("chrome://global/skin/icons/close-12.svg");
-
-  /* Button */
-  --message-bar-button-size-ghost: var(--button-min-height);
-  --message-bar-button-border-radius-ghost: var(--button-border-radius);
-  --message-bar-button-background-color-ghost-hover: var(--button-background-color-hover);
-  --message-bar-button-background-color-ghost-active: var(--button-background-color-active);
+  --message-bar-icon-close-url: url("chrome://global/skin/icons/close.svg");
 
   /* Container */
   --message-bar-container-min-height: var(--size-item-large);
@@ -28,12 +21,13 @@
   --message-bar-text-line-height: 1.5em;
 
   /* Background */
-  --message-bar-background-color: var(--color-background-information);
+  --message-bar-background-color: var(--background-color-information);
 
   background-color: var(--message-bar-background-color);
   border: var(--message-bar-border-width) solid var(--message-bar-border-color);
   border-radius: var(--message-bar-border-radius);
   color: var(--message-bar-text-color);
+  text-align: start;
 }
 
 @media (prefers-contrast) {
@@ -144,31 +138,8 @@
 
 /* Close icon styles */
 
-.close {
+moz-button::part(button) {
   background-image: var(--message-bar-icon-close-url);
-  background-repeat: no-repeat;
-  background-position: center center;
-  -moz-context-properties: fill;
-  fill: currentColor;
-  min-width: auto;
-  min-height: auto;
-  width: var(--message-bar-button-size-ghost);
-  height: var(--message-bar-button-size-ghost);
-  margin: 0;
-  padding: 0;
-  flex-shrink: 0;
-}
-
-.ghost-button {
-  border-radius: var(--message-bar-button-border-radius-ghost);
-}
-
-.ghost-button:enabled:hover {
-  background-color: var(--message-bar-button-background-color-ghost-hover);
-}
-
-.ghost-button:enabled:hover:active {
-  background-color: var(--message-bar-button-background-color-ghost-active);
 }
 
 @media not (prefers-contrast) {
@@ -176,7 +147,7 @@
   /* Colors from: https://www.figma.com/file/zd3B9UyknB2XNZNdrYLm2W/Outreachy?type=design&node-id=59-1921&mode=design&t=ZYS4e6pAbAlXGvun-4 */
 
   :host([type=warning]) {
-    --message-bar-background-color: var(--color-background-warning);
+    --message-bar-background-color: var(--background-color-warning);
 
     .icon {
       --message-bar-icon-color: var(--icon-color-warning);
@@ -184,7 +155,7 @@
   }
 
   :host([type=success]) {
-    --message-bar-background-color: var(--color-background-success);
+    --message-bar-background-color: var(--background-color-success);
 
     .icon {
       --message-bar-icon-color: var(--icon-color-success);
@@ -193,19 +164,10 @@
 
   :host([type=error]),
   :host([type=critical]) {
-    --message-bar-background-color: var(--color-background-critical);
+    --message-bar-background-color: var(--background-color-critical);
 
     .icon {
       --message-bar-icon-color: var(--icon-color-critical);
     }
   }
-
-  .close {
-    fill: var(--message-bar-icon-close-color);
-  }
-
-  .ghost-button {
-    border: none;
-    background-color: transparent;
-  }
 }