Issue #3377202: messages close icon not visible in forced colors mode

dist/css/base/gin.css

@@ -3116,6 +3116,12 @@ a.button.button--danger:active:before {
   right: 0;
 }
 
+@media (forced-colors: active) {
+  .messages .messages__header:before {
+    background-color: linktext !important;
+  }
+}
+
 .messages .button--dismiss {
   position: absolute;
   top: 0;
@@ -3173,6 +3179,12 @@ a.button.button--danger:active:before {
   right: 0;
 }
 
+@media (forced-colors: active) {
+  .messages .button--dismiss .icon-close {
+    background-color: buttonBorder;
+  }
+}
+
 .messages--webform .button--dismiss {
   display: none;
 }
@@ -3216,6 +3228,12 @@ a.button.button--danger:active:before {
           mask-position: center left;
 }
 
+@media (forced-colors: active) {
+  .messages.messages--status .messages__header:before {
+    background-color: buttonBorder;
+  }
+}
+
 .messages.messages--status .button--dismiss .icon-close:link {
   background-color: var(--gin-color-green-light);
 }

styles/base/_messages.scss

@@ -49,6 +49,10 @@
       left: 0;
       width: 1.5rem;
       height: 1.5rem;
+
+      @media (forced-colors: active) {
+        background-color: linktext !important;
+      }
     }
   }
 
@@ -91,6 +95,10 @@
       mask-repeat: no-repeat;
       mask-position: center;
       background-color: #fff;
+
+      @media (forced-colors: active) {
+        background-color: buttonBorder;
+      }
     }
   }
 
@@ -132,6 +140,10 @@
         mask-image: icon('status');
         mask-repeat: no-repeat;
         mask-position: center left;
+
+        @media (forced-colors: active) {
+          background-color: buttonBorder;
+        }
       }
     }