Issue #3223270 by mherchel, javi-er: Olivero: Messages "close" icon not...

Issue #3223270 by mherchel, javi-er: Olivero: Messages "close" icon not visible in IE11 High Contrast (and maybe others)

(cherry picked from commit 87d16e4c)

core/themes/olivero/css/components/messages.css

@@ -201,9 +201,9 @@
     left: 50%;
     display: block;
     width: 2.0625rem;
-    height: 2px;
+    height: 0;
     content: "";
-    background-color: #7e96a7;
+    border-top: solid 2px #7e96a7;
   }
 
 .messages__close:before {
@@ -216,7 +216,7 @@
 
 .messages__close:hover::before,
     .messages__close:hover::after {
-      background-color: #fff;
+      border-color: #fff;
     }
 
 .messages__close:focus {

core/themes/olivero/css/components/messages.pcss.css

@@ -99,9 +99,9 @@
     left: 50%;
     display: block;
     width: 33px;
-    height: 2px;
+    height: 0;
     content: "";
-    background-color: var(--color--gray-30);
+    border-top: solid 2px var(--color--gray-30);
   }
 
   &:before {
@@ -115,7 +115,7 @@
   &:hover {
     &::before,
     &::after {
-      background-color: var(--color--white);
+      border-color: var(--color--white);
     }
   }