Issue #3373994: Details chevrons not visible in forced colors mode

dist/css/components/tabs.css

@@ -416,27 +416,29 @@
   margin-top: var(--gin-spacing-m);
 }
 
-.claro-details__summary::before,
-.claro-details[open] > .claro-details__summary::before {
-  background: var(--gin-color-text);
-  -webkit-mask-image: url("../../media/sprite.svg#handle-view");
-          mask-image: url("../../media/sprite.svg#handle-view");
-  -webkit-mask-repeat: no-repeat;
-          mask-repeat: no-repeat;
-  -webkit-mask-position: center center;
-          mask-position: center center;
-  -webkit-mask-size: 100% 100%;
-          mask-size: 100% 100%;
-}
-
-[dir="ltr"] .claro-details__summary::before,
-[dir="ltr"] .claro-details[open] > .claro-details__summary::before {
-  left: 1.125rem;
-}
-
-[dir="rtl"] .claro-details__summary::before,
-[dir="rtl"] .claro-details[open] > .claro-details__summary::before {
-  right: 1.125rem;
+@media not (forced-colors: active) {
+  .claro-details__summary::before,
+  .claro-details[open] > .claro-details__summary::before {
+    background: var(--gin-color-text);
+    -webkit-mask-image: url("../../media/sprite.svg#handle-view");
+            mask-image: url("../../media/sprite.svg#handle-view");
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    -webkit-mask-position: center center;
+            mask-position: center center;
+    -webkit-mask-size: 100% 100%;
+            mask-size: 100% 100%;
+  }
+
+  [dir="ltr"] .claro-details__summary::before,
+  [dir="ltr"] .claro-details[open] > .claro-details__summary::before {
+    left: 1.125rem;
+  }
+
+  [dir="rtl"] .claro-details__summary::before,
+  [dir="rtl"] .claro-details[open] > .claro-details__summary::before {
+    right: 1.125rem;
+  }
 }
 
 .claro-details__summary:hover::before,