Issue #3377216 by Moni_10, bnjmnm, bunty oberoi, Mukeysh: Breadcrumb icon &...

Issue #3377216 by Moni_10, bnjmnm, bunty oberoi, Mukeysh: Breadcrumb icon & dividers forced-color visbility issues

dist/css/components/breadcrumb.css

@@ -49,6 +49,12 @@
   background: none;
 }
 
+@media (forced-colors: active) {
+  .gin-breadcrumb__item + .gin-breadcrumb__item::before {
+    opacity: 1;
+  }
+}
+
 .gin-breadcrumb__item:first-of-type .gin-breadcrumb__link {
   position: relative;
 }
@@ -86,10 +92,22 @@
   right: 0;
 }
 
+@media (forced-colors: active) {
+  .gin-breadcrumb__item:first-of-type .gin-breadcrumb__link::before {
+    background: linktext;
+  }
+}
+
 .gin-breadcrumb__item:first-of-type .gin-breadcrumb__link:hover::before {
   background-color: var(--gin-color-primary);
 }
 
+@media (forced-colors: active) {
+  .gin-breadcrumb__item:first-of-type .gin-breadcrumb__link:hover::before {
+    background: linktext;
+  }
+}
+
 .gin-breadcrumb__item:first-of-type + .gin-breadcrumb__item::before {
   content: "";
   opacity: .3;
@@ -111,6 +129,12 @@
   margin-left: .75em;
 }
 
+@media (forced-colors: active) {
+  .gin-breadcrumb__item:first-of-type + .gin-breadcrumb__item::before {
+    opacity: 1;
+  }
+}
+
 .gin-breadcrumb__link, .gin-breadcrumb__text {
   font-size: var(--gin-font-size-xs);
   line-height: 2;

styles/components/breadcrumb.scss

@@ -40,6 +40,10 @@
     display: inline-block;
     padding: 0 .5em;
     background: none;
+
+    @media (forced-colors: active) {
+      opacity: 1;
+    }
   }
 
   &__item:first-of-type &__link {
@@ -59,10 +63,19 @@
       mask-image: icon('backtosite');
       mask-size: 100% 100%;
       mask-position: center center;
+
+      // forced color style for breadcrumbs
+      @media (forced-colors: active) {
+        background: linktext;
+      }
     }
 
     &:hover::before {
       background-color: var(--gin-color-primary);
+
+      @media (forced-colors: active) {
+        background: linktext;
+      }
     }
   }
 
@@ -75,6 +88,10 @@
     padding-left: .75em;
     padding-right: 0;
     margin-right: .75em;
+
+    @media (forced-colors: active) {
+      opacity: 1;
+    }
   }
 
   &__link,