[Glitch] Refactor styles to use logical properties for positioning (#2156)

Port babd86e594 and 45848d6547 to glitch-soc

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>

app/javascript/flavours/glitch/styles/components/modal.scss

@@ -10,8 +10,8 @@
 .modal-root__overlay {
   position: fixed;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
   background: rgba($base-overlay-background, 0.7);
   transition: background 0.5s;
@@ -20,7 +20,7 @@
 .modal-root__container {
   position: fixed;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -41,7 +41,7 @@
 
 .media-modal__zoom-button {
   position: absolute;
-  right: 64px;
+  inset-inline-end: 64px;
   top: 8px;
   z-index: 100;
   pointer-events: auto;
@@ -93,7 +93,7 @@
   & > div {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
     box-sizing: border-box;
@@ -292,8 +292,8 @@
   }
 
   &__extra {
-    padding-right: 65px;
-    padding-left: 185px;
+    padding-inline-end: 65px;
+    padding-inline-start: 185px;
     text-align: center;
   }
 }
@@ -325,7 +325,7 @@
 .onboarding-modal__page-four,
 .onboarding-modal__page-five {
   p {
-    text-align: left;
+    text-align: start;
   }
 
   .figure {
@@ -345,7 +345,7 @@
 
     &.non-interactive {
       pointer-events: none;
-      text-align: left;
+      text-align: start;
     }
   }
 }
@@ -360,11 +360,11 @@
       margin: 0 10px;
 
       &:first-child {
-        margin-left: 0;
+        margin-inline-start: 0;
       }
 
       &:last-child {
-        margin-right: 0;
+        margin-inline-end: 0;
       }
 
       p {
@@ -410,7 +410,7 @@
   display: inline-block;
   max-width: 30px;
   max-height: auto;
-  margin-left: 10px;
+  margin-inline-start: 10px;
 }
 
 .boost-modal,
@@ -497,9 +497,9 @@
 
   & > div {
     flex: 1 1 auto;
-    text-align: right;
+    text-align: end;
     color: $lighter-text-color;
-    padding-right: 10px;
+    padding-inline-end: 10px;
   }
 
   .button {
@@ -711,7 +711,7 @@
     & > span {
       font-size: 17px;
       font-weight: 500;
-      margin-left: 10px;
+      margin-inline-start: 10px;
     }
   }
 
@@ -735,11 +735,11 @@
   }
 
   .emoji-mart-search {
-    padding-right: 10px;
+    padding-inline-end: 10px;
   }
 
   .emoji-mart-search-icon {
-    right: 10px + 5px;
+    inset-inline-end: 10px + 5px;
   }
 }
 
@@ -797,7 +797,7 @@
 
 .report-modal__comment {
   padding: 20px;
-  border-right: 1px solid $ui-secondary-color;
+  border-inline-end: 1px solid $ui-secondary-color;
   max-width: 320px;
 
   p {
@@ -947,7 +947,7 @@
         & > .react-toggle,
         & > .icon,
         button:first-child {
-          margin-right: 10px;
+          margin-inline-end: 10px;
         }
       }
     }
@@ -980,8 +980,8 @@
 }
 
 .confirmation-modal__do_not_ask_again {
-  padding-left: 20px;
-  padding-right: 20px;
+  padding-inline-start: 20px;
+  padding-inline-end: 20px;
   padding-bottom: 10px;
   font-size: 14px;
 
@@ -1023,7 +1023,7 @@
     border: 1px solid darken($simple-background-color, 14%);
     border-radius: 4px;
     padding: 6px 10px;
-    padding-right: 30px;
+    padding-inline-end: 30px;
   }
 }
 
@@ -1047,7 +1047,7 @@
     &__label {
       color: $inverted-text-color;
       margin: 0;
-      margin-left: 8px;
+      margin-inline-start: 8px;
     }
   }
 }
@@ -1058,7 +1058,7 @@
   .report-modal__close {
     position: absolute;
     top: 10px;
-    right: 10px;
+    inset-inline-end: 10px;
   }
 }
 
@@ -1204,13 +1204,13 @@
     width: 100%;
     height: 100%;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
   }
 
   &__preview {
     position: absolute;
     bottom: 10px;
-    right: 10px;
+    inset-inline-end: 10px;
     z-index: 2;
     cursor: move;
     transition: opacity 0.1s ease;
@@ -1270,7 +1270,7 @@
 
   ul {
     padding: 10px;
-    margin-left: 12px;
+    margin-inline-start: 12px;
     list-style: disc inside;
   }