Bug 1494582 - Adjust toggle input direction for right-to-left layout; r=pbro

MozReview-Commit-ID: 5ItuYNHsmQt

Differential Revision: https://phabricator.services.mozilla.com/D7623

--HG--
extra : moz-landing-system : lando

devtools/client/themes/common.css

@@ -820,6 +820,11 @@ checkbox:-moz-focusring {
   transition: background-color .1s ease-out;
 }
 
+/* For right-to-left layout, the toggle thumb goes in the opposite direction. */
+html[dir="rtl"] .devtools-checkbox-toggle {
+  --x-pos: -.15em;
+}
+
 .devtools-checkbox-toggle:focus {
   box-shadow: 0 0 0 1px var(--blue-55);
 }
@@ -834,6 +839,10 @@ checkbox:-moz-focusring {
   background-color: var(--blue-55);
 }
 
+html[dir="rtl"] .devtools-checkbox-toggle:checked {
+  --x-pos: -1.15em;
+}
+
 .devtools-checkbox-toggle::before {
   position: relative;
   width: calc(1em - .3em);