Issue #3494901: Replace SVG breadcrumb separator with CSS-only arrow.

Closes #3494901

core/themes/claro/css/components/breadcrumb.css

@@ -34,24 +34,24 @@
 
 .breadcrumb__item + .breadcrumb__item::before {
   display: inline-block;
-  padding: 0 0.75rem;
-  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");
+  width: 0.25rem;
+  height: 0.25rem;
+  margin-inline: 0.5rem;
+  content: "";
+  transform: rotate(45deg);
+  border-block-start: 1px solid var(--color-text);
+  border-inline-end: 1px solid var(--color-text);
+  vertical-align: middle;
 }
 
 [dir="rtl"] :is(.breadcrumb__item + .breadcrumb__item::before) {
-  transform: scaleX(-1);
+  transform: rotate(-45deg);
 }
 
 @media (forced-colors: active) {
   .breadcrumb__item + .breadcrumb__item::before {
-    width: 0.3125rem; /* Width and height of the SVG. */
-    height: 0.5rem;
-    content: "";
-    background-color: canvastext;
-    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");
-    mask-size: contain;
-    mask-repeat: no-repeat;
-    mask-position: center;
+    border-block-start-color: CanvasText;
+    border-inline-end-color: CanvasText;
   }
 }