--- a/browser/base/content/test/alerts/browser_notification_close.js
+++ b/browser/base/content/test/alerts/browser_notification_close.js
@@ -41,17 +41,17 @@ add_task(async function test_notificatio
 
     let alertTitleLabel = alertWindow.document.getElementById("alertTitleLabel");
     is(alertTitleLabel.value, "Test title", "Title text of notification should be present");
     let alertTextLabel = alertWindow.document.getElementById("alertTextLabel");
     is(alertTextLabel.textContent, "Test body 2", "Body text of notification should be present");
     let alertIcon = alertWindow.document.getElementById("alertIcon");
     is(alertIcon.src, faviconURI.spec, "Icon of notification should be present");
 
-    let alertCloseButton = alertWindow.document.querySelector(".alertCloseButton");
+    let alertCloseButton = alertWindow.document.querySelector(".close-icon");
     is(alertCloseButton.localName, "toolbarbutton", "close button found");
     let promiseBeforeUnloadEvent =
       BrowserTestUtils.waitForEvent(alertWindow, "beforeunload");
     let closedTime = alertWindow.Date.now();
     alertCloseButton.click();
     info("Clicked on close button");
     await promiseBeforeUnloadEvent;
 

--- a/toolkit/components/alerts/resources/content/alert.xul
+++ b/toolkit/components/alerts/resources/content/alert.xul
@@ -18,22 +18,22 @@
         role="alert"
         pack="start"
         onload="onAlertLoad();"
         onclick="onAlertClick();"
         onbeforeunload="onAlertBeforeUnload();">
 
   <script type="application/javascript" src="chrome://global/content/alerts/alert.js"/>
 
-  <vbox id="alertBox" class="alertBox">
+  <vbox id="alertBox">
     <box id="alertTitleBox">
       <image id="alertIcon"/>
       <label id="alertTitleLabel" class="alertTitle plain" crop="end"/>
-      <vbox class="alertCloseBox">
-        <toolbarbutton class="alertCloseButton close-icon"
+      <vbox>
+        <toolbarbutton class="close-icon"
                        tooltiptext="&closeAlert.tooltip;"
                        onclick="event.stopPropagation();"
                        oncommand="onAlertClose();"/>
       </vbox>
     </box>
     <box>
       <hbox id="alertImageBox" class="alertImageBox" align="center" pack="center">
         <image id="alertImage"/>

--- a/toolkit/themes/linux/global/alerts/alert.css
+++ b/toolkit/themes/linux/global/alerts/alert.css
@@ -1,23 +1,11 @@
 /* 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/. */
 
-/* ===== alert.css =====================================================
-  == Styles specific to the alerts dialog.
-  ======================================================================= */
+%include ../../../shared/alert.inc.css
 
-@import url("chrome://global/skin/alerts/alert-common.css");
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-.alertBox {
+#alertBox {
   border: 1px solid threedshadow;
   background-color: -moz-Dialog;
 }
 
-.alertCloseButton {
-  -moz-appearance: none;
-  height: 16px;
-  padding: 4px 2px;
-  width: 16px;
-}

--- a/toolkit/themes/linux/global/jar.mn
+++ b/toolkit/themes/linux/global/jar.mn
@@ -29,17 +29,17 @@ toolkit.jar:
    skin/classic/global/radio.css
    skin/classic/global/scrollbox.css
    skin/classic/global/splitter.css
    skin/classic/global/tabbox.css
    skin/classic/global/textbox.css
    skin/classic/global/toolbar.css
    skin/classic/global/toolbarbutton.css
    skin/classic/global/tree.css
-   skin/classic/global/alerts/alert.css                        (alerts/alert.css)
+*  skin/classic/global/alerts/alert.css                        (alerts/alert.css)
    skin/classic/global/arrow/arrow-dn-hov.gif                  (arrow/arrow-dn-hov.gif)
    skin/classic/global/arrow/arrow-up-hov.gif                  (arrow/arrow-up-hov.gif)
 
    skin/classic/global/icons/Authentication.png                (icons/Authentication.png)
    skin/classic/global/icons/autoscroll.png                    (icons/autoscroll.png)
    skin/classic/global/icons/blacklist_favicon.png             (icons/blacklist_favicon.png)
    skin/classic/global/icons/blacklist_large.png               (icons/blacklist_large.png)
    skin/classic/global/icons/Close.gif                         (icons/Close.gif)

--- a/toolkit/themes/osx/global/alerts/alert.css
+++ b/toolkit/themes/osx/global/alerts/alert.css
@@ -1,30 +1,18 @@
 /* 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/. */
 
-/* ===== alert.css =====================================================
-  == Styles specific to the alerts dialog.
-  ======================================================================= */
-
-@import url("chrome://global/skin/alerts/alert-common.css");
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+%include ../../../shared/alert.inc.css
 
 #alertNotification {
   -moz-appearance: none;
   background: transparent;
 }
 
 #alertBox {
   border: 1px solid ThreeDShadow;
   border-radius: 1px;
   background-color: -moz-Dialog;
   color: -moz-DialogText;
 }
 
-.alertCloseButton {
-  -moz-appearance: none;
-  padding: 0;
-  margin: 2px;
-  border: none;
-}

--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -39,17 +39,17 @@ toolkit.jar:
   skin/classic/global/tabbox.css
   skin/classic/global/textbox.css
   skin/classic/global/datetimepicker.css
   skin/classic/global/toolbar.css
   skin/classic/global/toolbarbutton.css
 * skin/classic/global/tree.css
 * skin/classic/global/viewbuttons.css
   skin/classic/global/wizard.css
-  skin/classic/global/alerts/alert.css                               (alerts/alert.css)
+* skin/classic/global/alerts/alert.css                               (alerts/alert.css)
   skin/classic/global/arrow/arrow-dn-dis.gif                         (arrow/arrow-dn-dis.gif)
   skin/classic/global/arrow/arrow-dn-dis.png                         (arrow/arrow-dn-dis.png)
   skin/classic/global/arrow/arrow-dn-sharp.gif                       (arrow/arrow-dn-sharp.gif)
   skin/classic/global/arrow/arrow-dn.gif                             (arrow/arrow-dn.gif)
   skin/classic/global/arrow/arrow-dn.png                             (arrow/arrow-dn.png)
   skin/classic/global/arrow/arrow-lft-dis.gif                        (arrow/arrow-lft-dis.gif)
   skin/classic/global/arrow/arrow-lft-hov.gif                        (arrow/arrow-lft-hov.gif)
   skin/classic/global/arrow/arrow-lft-sharp.gif                      (arrow/arrow-lft-sharp.gif)

rename from toolkit/themes/shared/alert-common.css
rename to toolkit/themes/shared/alert.inc.css
--- a/toolkit/themes/shared/alert-common.css
+++ b/toolkit/themes/shared/alert.inc.css
@@ -1,16 +1,12 @@
 /* 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/. */
 
-/* ===== alert.css =====================================================
-  == Shared styles specific to the alerts dialog.
-  ======================================================================= */
-
 @import url("chrome://global/skin/");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 #alertBox[animate] {
   animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
 }
 
@@ -129,25 +125,29 @@
 #alertSettings {
   -moz-appearance: none;
   background-color: transparent;
   border-width: 0;
   border-radius: 20px;
   min-width: 0;
   list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg");
   -moz-context-properties: fill;
-  fill: #4d4d4d;
-  margin-inline-end: 0;
+  fill: currentColor;
+  margin-inline-end: 4px;
   margin-bottom: 0;
 }
 
 #alertSettings > .button-box {
   padding: 0;
 }
 
+#alertSettings .button-icon {
+  margin: 0;
+}
+
 #alertSettings:hover,
 #alertSettings[open] {
   fill: #ddd;
 }
 
 #alertSettings:hover {
   background-color: rgb(128,128,128);
 }
@@ -160,8 +160,9 @@
 #alertSettings[focusedViaMouse]:-moz-focusring {
   outline: none;
 }
 
 #alertSettings > .button-box > .button-menu-dropmarker,
 #alertSettings > .button-box > .box-inherit > .button-text {
   display: none;
 }
+

--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -35,17 +35,16 @@ toolkit.jar:
   skin/classic/global/icons/input-clear.svg                (../../shared/icons/input-clear.svg)
   skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
   skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
   skin/classic/global/icons/spinner-arrow-down.svg         (../../shared/icons/spinner-arrow-down.svg)
   skin/classic/global/icons/spinner-arrow-up.svg           (../../shared/icons/spinner-arrow-up.svg)
   skin/classic/global/icons/menubutton-dropmarker.svg      (../../shared/icons/menubutton-dropmarker.svg)
   skin/classic/global/icons/warning.svg                    (../../shared/incontent-icons/warning.svg)
   skin/classic/global/icons/blocked.svg                    (../../shared/incontent-icons/blocked.svg)
-  skin/classic/global/alerts/alert-common.css              (../../shared/alert-common.css)
   skin/classic/global/narrate.css                          (../../shared/narrate.css)
   skin/classic/global/narrateControls.css                  (../../shared/narrateControls.css)
   skin/classic/global/narrate/arrow.svg                    (../../shared/narrate/arrow.svg)
   skin/classic/global/narrate/back.svg                     (../../shared/narrate/back.svg)
   skin/classic/global/narrate/fast.svg                     (../../shared/narrate/fast.svg)
   skin/classic/global/narrate/forward.svg                  (../../shared/narrate/forward.svg)
   skin/classic/global/narrate/slow.svg                     (../../shared/narrate/slow.svg)
   skin/classic/global/narrate/start.svg                    (../../shared/narrate/start.svg)

--- a/toolkit/themes/windows/global/alerts/alert.css
+++ b/toolkit/themes/windows/global/alerts/alert.css
@@ -1,53 +1,27 @@
 /* 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/. */
 
-/* ===== alert.css =====================================================
-  == Styles specific to the alerts dialog.
-  ======================================================================= */
-
-@import url("chrome://global/skin/alerts/alert-common.css");
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+%include ../../../shared/alert.inc.css
 
 #alertNotification {
   -moz-appearance: none;
   background: transparent;
   padding: 10px;
 }
 
 #alertBox {
   border: 1px solid ThreeDShadow;
   border-radius: 1px;
   background-color: -moz-Dialog;
   color: -moz-DialogText;
   box-shadow: 0 2px 10px rgba(0,0,0,0.59);
 }
 
-.alertCloseButton {
-  -moz-appearance: none;
-  padding: 4px 2px;
-  border: none !important;
-}
-
-.alertCloseBox {
-  /* The close button is larger on Windows and has a large
-     circle around it, so we add more space between the close
-     button and the edge of the window. */
-  margin-inline-end: 2px;
-}
-
-#alertSettings {
-  /* The close button is larger on Windows, so the
-     gear button is moved over to accomodate it and
-     keep the two buttons horizontally aligned together. */
-  margin-inline-end: 5px;
-}
-
 @media (-moz-windows-default-theme) {
   #alertBox {
     border-color: rgba(107,107,107,.3);
     background-color: rgba(255,255,255,.9);
     color: rgba(0,0,0,.9);
   }
 }

--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -27,17 +27,17 @@ toolkit.jar:
   skin/classic/global/preferences.css
   skin/classic/global/printPageSetup.css
   skin/classic/global/printPreview.css
   skin/classic/global/scrollbox.css
   skin/classic/global/splitter.css
   skin/classic/global/toolbar.css
   skin/classic/global/toolbarbutton.css
 * skin/classic/global/tree.css
-  skin/classic/global/alerts/alert.css                     (alerts/alert.css)
+* skin/classic/global/alerts/alert.css                     (alerts/alert.css)
   skin/classic/global/arrow/panelarrow-horizontal.svg      (arrow/panelarrow-horizontal.svg)
   skin/classic/global/arrow/panelarrow-vertical.svg        (arrow/panelarrow-vertical.svg)
   skin/classic/global/dirListing/folder.png                (dirListing/folder.png)
   skin/classic/global/dirListing/up.png                    (dirListing/up.png)
   skin/classic/global/icons/blacklist_favicon.png          (icons/blacklist_favicon.png)
   skin/classic/global/icons/blacklist_large.png            (icons/blacklist_large.png)
   skin/classic/global/icons/Error.png                      (icons/Error.png)
   skin/classic/global/icons/collapse.png                   (icons/collapse.png)