RTL tabs

Correct margins for tabs, tab icons.

src/components/gui/gui.css

@@ -63,7 +63,6 @@
     flex-grow: 1;
     height: 80%;
     margin-bottom: 0;
-    margin-left: -0.5rem;
 
     border-radius: 1rem 1rem 0 0;
     border: 1px solid $ui-black-transparent;
@@ -82,9 +81,24 @@
     white-space: nowrap;
 }
 
+[dir="ltr"] .tab {
+    margin-left: -0.5rem;
+}
+
+[dir="rtl"] .tab {
+    margin-right: -0.5rem;
+}
+
+[dir="ltr"] .tab:nth-of-type(1) {
+    margin-left: 0;
+}
+
+[dir="rtl"] .tab:nth-of-type(1) {
+    margin-right: 0;
+}
+
 /* Use z-indices to force left-on-top for tabs */
 .tab:nth-of-type(1) {
-    margin-left: 0;
     z-index: 3;
 }
 .tab:nth-of-type(2) {
@@ -106,11 +120,18 @@
 }
 
 .tab img {
-    margin-right: 0.125rem;
     width: 1.375rem;
     filter: grayscale(100%);
 }
 
+[dir="ltr"] .tab img {
+    margin-right: 0.125rem;
+}
+
+[dir="rtl"] .tab img {
+    margin-left: 0.125rem;
+}
+
 .tab.is-selected img {
     filter: none;
 }
@@ -191,7 +212,7 @@
     padding-right: $space;
 
     min-height: 0; /* this makes it work in Firefox */
-    
+
     /*
         For making the sprite-selector a scrollable pane
         @todo: Not working in Safari