Style breadcrumbs in RTL (right-to-left) writing mode

Note that this CSS uses some "magic numbers" derived from the computed
values for the `govuk-breadcrumbs` component.

CHANGELOG.md

@@ -12,6 +12,7 @@
 * Use component wrapper on contextual breadcrumbs ([PR #4560](https://github.com/alphagov/govuk_publishing_components/pull/4560))
 * Use component wrapper on contextual sidebar ([PR #4561](https://github.com/alphagov/govuk_publishing_components/pull/4561))
 * Correctly translate 'Published' word to Arabic ([PR #4563](https://github.com/alphagov/govuk_publishing_components/pull/4563))
+* Style breadcrumbs in RTL (right-to-left) writing mode ([PR #4559](https://github.com/alphagov/govuk_publishing_components/pull/4559))
 
 ## 49.0.0
 

app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss

@@ -55,6 +55,22 @@
   }
 }
 
+.gem-c-breadcrumbs[dir="rtl"] {
+  text-align: start;
+
+  .govuk-breadcrumbs__list-item {
+    float: inline-start;
+    margin-inline-end: .625em;
+    padding-inline-end: .978em;
+
+    &::before {
+      transform: rotate(-135deg);
+      left: 0;
+      right: -1.2069em;
+    }
+  }
+}
+
 @include govuk-media-query($media-type: print) {
   .gem-c-breadcrumbs {
     font-size: 12pt;

app/views/govuk_publishing_components/components/docs/breadcrumbs.yml

@@ -121,3 +121,14 @@ examples:
         url: "/section/sub-section"
       - title: "Sub-sub-section"
         url: "/section/sub-section/sub-section"
+  right_to_left:
+    data:
+      collapse_on_mobile: true
+      dir: rtl
+      breadcrumbs:
+      - title: "Section"
+        url: "/section"
+      - title: "Sub-section"
+        url: "/section/sub-section"
+      - title: "Sub-sub-section"
+        url: "/section/sub-section/sub-section"