From ab4a24f9024bcee7bf56fec9af915b00d402a6e0 Mon Sep 17 00:00:00 2001
From: Cristina Chumillas <ckrina@1206650.no-reply.drupal.org>
Date: Tue, 12 Apr 2022 16:12:37 +0200
Subject: [PATCH] Issue #3269341 by mherchel, KurtTrowbridge: Claro <details>
 element not rendering properly in forced colors

---
 core/themes/claro/css/components/details.css      | 11 +++++------
 core/themes/claro/css/components/details.pcss.css | 11 +++++------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index c2de8eeb8ce..3eba2524102 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -169,15 +169,14 @@
   }
 }
 
-@media screen and (-ms-high-contrast: active) {
+@media (forced-colors: active) {
   .claro-details__summary::before {
     width: 0.5625rem;
     height: 0.5625rem;
     transition: transform var(--details-transform-transition-duration) ease-in 0s, margin var(--details-transform-transition-duration) ease-in 0s;
     transform: rotate(135deg); /* LTR */
-    border: 0.125rem solid;
-    border-bottom-color: transparent;
-    border-left-color: transparent;
+    border-top: 0.125rem solid;
+    border-right: 0.125rem solid;
     background: none;
   }
 
@@ -291,7 +290,7 @@
   transform: rotate(-90deg); /* for LTR and RTL */
 }
 
-@media screen and (-ms-high-contrast: active) {
+@media (forced-colors: active) {
   .claro-details__summary:hover::before,
   .claro-details__summary:hover:focus::before {
     background: none;
@@ -559,7 +558,7 @@
   font-weight: normal;
 }
 
-@media screen and (-ms-high-contrast: active) {
+@media (forced-colors: active) {
   .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
   .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
   .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css
index 14aaebe1431..00a50e9339e 100644
--- a/core/themes/claro/css/components/details.pcss.css
+++ b/core/themes/claro/css/components/details.pcss.css
@@ -155,15 +155,14 @@
   }
 }
 
-@media screen and (-ms-high-contrast: active) {
+@media (forced-colors: active) {
   .claro-details__summary::before {
     width: 0.5625rem;
     height: 0.5625rem;
     transition: transform var(--details-transform-transition-duration) ease-in 0s, margin var(--details-transform-transition-duration) ease-in 0s;
     transform: rotate(135deg); /* LTR */
-    border: 0.125rem solid;
-    border-bottom-color: transparent;
-    border-left-color: transparent;
+    border-top: 0.125rem solid;
+    border-right: 0.125rem solid;
     background: none;
   }
 
@@ -272,7 +271,7 @@
   transform: rotate(-90deg); /* for LTR and RTL */
 }
 
-@media screen and (-ms-high-contrast: active) {
+@media (forced-colors: active) {
   .claro-details__summary:hover::before,
   .claro-details__summary:hover:focus::before {
     background: none;
@@ -528,7 +527,7 @@
   font-weight: normal;
 }
 
-@media screen and (-ms-high-contrast: active) {
+@media (forced-colors: active) {
   .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
   .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
   .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {