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

Closes #3494901

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

@@ -32,26 +32,33 @@
   font-weight: bold;
 }
 
+.breadcrumb__item + .breadcrumb__item {
+  position: relative;
+  padding-left: 1rem;
+}
+
 .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");
+  position: absolute;
+  top: 50%;
+  left: 0.3rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  content: "";
+  transform: translateY(-50%);
+  vertical-align: middle;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 8'%3e%3cpath fill='currentColor' d='m1.2.6-.7.8L3.1 4 .5 6.6l.7.8L4.6 4z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-size: contain;
 }
 
 [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;
   }
 }