fix: Fix direction of media gallery arrows (#35014)

app/javascript/styles/mastodon/components.scss

@@ -5850,6 +5850,7 @@ a.status-card {
   position: absolute;
   top: 0;
   bottom: 0;
+  transform: scaleX(var(--text-x-direction));
 
   &:hover,
   &:focus,
@@ -5858,11 +5859,11 @@ a.status-card {
   }
 }
 
-.media-modal__nav--left {
+.media-modal__nav--prev {
   inset-inline-start: 0;
 }
 
-.media-modal__nav--right {
+.media-modal__nav--next {
   inset-inline-end: 0;
 }
 

app/javascript/styles/mastodon/css_variables.scss

@@ -35,3 +35,12 @@
   --input-background-color: var(--surface-variant-background-color);
   --on-input-color: #{$secondary-text-color};
 }
+
+body {
+  // Variable for easily inverting directional UI elements,
+  --text-x-direction: 1;
+
+  &.rtl {
+    --text-x-direction: -1;
+  }
+}