diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index c2de8eeb8ce5..3eba25241022 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 14aaebe14319..00a50e9339eb 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 {