From f28942cef991c9285236ea3ecace98c9b65c5242 Mon Sep 17 00:00:00 2001
From: Plastikmensch <Plastikmensch@users.noreply.github.com>
Date: Sun, 16 Apr 2023 17:45:18 +0200
Subject: [PATCH] [Glitch] Refactor styles to use logical properties for
 positioning (#2156)

Port babd86e594bbdd6dcc512d522ccbb4b24c1355e3 and 45848d654709678ba35d9e97e0b3df3e3916cd75 to glitch-soc

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>
---
 .../flavours/glitch/styles/about.scss         |   4 +-
 .../flavours/glitch/styles/accessibility.scss |   2 +-
 .../flavours/glitch/styles/accounts.scss      |  12 +-
 .../flavours/glitch/styles/admin.scss         |  93 +++---
 .../flavours/glitch/styles/basics.scss        |   2 +-
 .../glitch/styles/components/about.scss       |   4 +-
 .../glitch/styles/components/accounts.scss    |  43 +--
 .../styles/components/announcements.scss      |  10 +-
 .../glitch/styles/components/columns.scss     |  42 +--
 .../styles/components/compose_form.scss       |  29 +-
 .../glitch/styles/components/directory.scss   |   2 +-
 .../glitch/styles/components/doodle.scss      |   8 +-
 .../glitch/styles/components/drawer.scss      |  14 +-
 .../glitch/styles/components/emoji.scss       |   9 +-
 .../styles/components/emoji_picker.scss       |  10 +-
 .../styles/components/error_boundary.scss     |   4 +-
 .../glitch/styles/components/explore.scss     |   4 +-
 .../styles/components/local_settings.scss     |   6 +-
 .../glitch/styles/components/media.scss       |  40 +--
 .../glitch/styles/components/misc.scss        |  80 +++---
 .../glitch/styles/components/modal.scss       |  54 ++--
 .../styles/components/privacy_policy.scss     |   6 +-
 .../glitch/styles/components/search.scss      |  10 +-
 .../glitch/styles/components/sensitive.scss   |   2 +-
 .../glitch/styles/components/signed_out.scss  |   2 +-
 .../styles/components/single_column.scss      |  11 +-
 .../glitch/styles/components/status.scss      |  64 +++--
 .../flavours/glitch/styles/containers.scss    |   6 +-
 .../flavours/glitch/styles/forms.scss         |  37 +--
 .../flavours/glitch/styles/modal.scss         |   2 +-
 .../flavours/glitch/styles/polls.scss         |   2 +-
 .../flavours/glitch/styles/rich_text.scss     |   6 +-
 .../flavours/glitch/styles/rtl.scss           | 267 +-----------------
 .../flavours/glitch/styles/statuses.scss      |  11 +-
 .../flavours/glitch/styles/tables.scss        |  22 +-
 .../flavours/glitch/styles/widgets.scss       |   8 +-
 36 files changed, 349 insertions(+), 579 deletions(-)

diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss
index 0183c43d5e..0f02563b48 100644
--- a/app/javascript/flavours/glitch/styles/about.scss
+++ b/app/javascript/flavours/glitch/styles/about.scss
@@ -28,14 +28,14 @@ $fluid-breakpoint: $maximum-width + 20px;
     position: relative;
     border-bottom: 1px solid lighten($ui-base-color, 8%);
     padding: 1em 1.75em;
-    padding-left: 3em;
+    padding-inline-start: 3em;
     font-weight: 500;
     counter-increment: list-counter;
 
     &::before {
       content: counter(list-counter);
       position: absolute;
-      left: 0;
+      inset-inline-start: 0;
       top: 50%;
       transform: translateY(-50%);
       background: $highlight-text-color;
diff --git a/app/javascript/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss
index fb2376abfd..c7fc74b2ad 100644
--- a/app/javascript/flavours/glitch/styles/accessibility.scss
+++ b/app/javascript/flavours/glitch/styles/accessibility.scss
@@ -25,7 +25,7 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
     content: '\F00C';
     font-size: 50%;
     font-family: FontAwesome;
-    right: -0.55em;
+    inset-inline-end: -0.55em;
     top: -0.44em;
   }
 }
diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss
index b1faf07c27..6268135a6c 100644
--- a/app/javascript/flavours/glitch/styles/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/accounts.scss
@@ -73,8 +73,8 @@
     }
 
     .display-name {
-      margin-left: 15px;
-      text-align: left;
+      margin-inline-start: 15px;
+      text-align: start;
 
       i[data-hidden] {
         display: none;
@@ -139,21 +139,21 @@
 
   .older {
     float: left;
-    padding-left: 0;
+    padding-inline-start: 0;
 
     .fa {
       display: inline-block;
-      margin-right: 5px;
+      margin-inline-end: 5px;
     }
   }
 
   .newer {
     float: right;
-    padding-right: 0;
+    padding-inline-start: 0;
 
     .fa {
       display: inline-block;
-      margin-left: 5px;
+      margin-inline-start: 5px;
     }
   }
 
diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss
index 240c90735e..58223143f2 100644
--- a/app/javascript/flavours/glitch/styles/admin.scss
+++ b/app/javascript/flavours/glitch/styles/admin.scss
@@ -117,7 +117,7 @@ $content-width: 840px;
         text-overflow: ellipsis;
 
         i.fa {
-          margin-right: 5px;
+          margin-inline-end: 5px;
         }
 
         &:hover {
@@ -186,7 +186,10 @@ $content-width: 840px;
   }
 
   .content {
-    padding: 55px 15px 20px 25px;
+    padding-top: 55px;
+    padding-bottom: 20px;
+    padding-inline-start: 25px;
+    padding-inline-end: 15px;
 
     @media screen and (max-width: $no-columns-breakpoint) {
       max-width: none;
@@ -202,11 +205,12 @@ $content-width: 840px;
         flex-wrap: wrap;
         align-items: center;
         justify-content: space-between;
-        margin: -15px -15px 0 0;
+        margin-top: -15px;
+        margin-inline-end: -15px;
 
         & > * {
           margin-top: 15px;
-          margin-right: 15px;
+          margin-inline-end: 15px;
         }
       }
 
@@ -385,7 +389,7 @@ $content-width: 840px;
           z-index: 10;
           width: 100%;
           height: calc(100% - 56px);
-          left: 0;
+          inset-inline-start: 0;
           bottom: 0;
           overflow-y: auto;
           background: $ui-base-color;
@@ -470,10 +474,11 @@ body,
 .filters {
   display: flex;
   flex-wrap: wrap;
+  gap: 40px;
 
   .filter-subset {
     flex: 0 0 auto;
-    margin: 0 40px 20px 0;
+    margin-bottom: 20px;
 
     &:last-child {
       margin-bottom: 30px;
@@ -485,7 +490,7 @@ body,
 
       li {
         display: inline-block;
-        margin-right: 5px;
+        margin-inline-end: 5px;
       }
     }
 
@@ -563,7 +568,10 @@ body,
 
   & > strong {
     display: block;
-    margin: 0 0 10px -5px;
+    margin-top: 0;
+    margin-bottom: 10px;
+    margin-inline-end: 0;
+    margin-inline-start: -5px;
     font-weight: 500;
     font-size: 14px;
     line-height: 18px;
@@ -588,7 +596,7 @@ body,
 
   .activity-stream {
     flex: 2 0 0;
-    margin-right: 20px;
+    margin-inline-end: 20px;
     max-width: calc(100% - 60px);
 
     .entry {
@@ -632,20 +640,23 @@ body,
   margin-bottom: 5px;
 
   #form_status_batch_action {
-    margin: 0 5px 5px 0;
+    margin-bottom: 5px;
+    margin-inline-end: 5px;
     font-size: 14px;
   }
 
   input.button {
-    margin: 0 5px 5px 0;
+    margin-bottom: 5px;
+    margin-inline-end: 5px;
   }
 
   .media-spoiler-toggle-buttons {
-    margin-left: auto;
+    margin-inline-start: auto;
 
     .button {
       overflow: visible;
-      margin: 0 0 5px 5px;
+      margin-bottom: 5px;
+      margin-inline-start: 5px;
       float: right;
     }
   }
@@ -667,7 +678,7 @@ body,
 
 .special-action-button,
 .back-link {
-  text-align: right;
+  text-align: end;
   flex: 1 1 auto;
 }
 
@@ -685,7 +696,7 @@ body,
   display: block;
   line-height: 20px;
   padding: 15px;
-  padding-left: 15px * 2 + 40px;
+  padding-inline-start: 15px * 2 + 40px;
   background: $ui-base-color;
   border-bottom: 1px solid darken($ui-base-color, 8%);
   position: relative;
@@ -712,7 +723,7 @@ body,
 
   &__avatar {
     position: absolute;
-    left: 15px;
+    inset-inline-start: 15px;
     top: 15px;
 
     .avatar {
@@ -780,7 +791,7 @@ a.name-tag,
   .avatar {
     display: block;
     margin: 0;
-    margin-right: 5px;
+    margin-inline-end: 5px;
     border-radius: 50%;
   }
 
@@ -794,7 +805,7 @@ a.name-tag,
 
 .speech-bubble {
   margin-bottom: 20px;
-  border-left: 4px solid $ui-highlight-color;
+  border-inline-start: 4px solid $ui-highlight-color;
 
   &.positive {
     border-left-color: $success-green;
@@ -810,7 +821,7 @@ a.name-tag,
 
   &__bubble {
     padding: 16px;
-    padding-left: 14px;
+    padding-inline-start: 14px;
     font-size: 15px;
     line-height: 20px;
     border-radius: 4px 4px 4px 0;
@@ -824,7 +835,7 @@ a.name-tag,
 
   &__owner {
     padding: 8px;
-    padding-left: 12px;
+    padding-inline-start: 12px;
   }
 
   time {
@@ -848,7 +859,7 @@ a.name-tag,
       border: 0;
 
       &__avatar-wrapper {
-        margin-left: 0;
+        margin-inline-start: 0;
       }
     }
 
@@ -857,7 +868,7 @@ a.name-tag,
       font-weight: 500;
       color: $darker-text-color;
       text-transform: uppercase;
-      text-align: right;
+      text-align: end;
 
       a {
         color: inherit;
@@ -908,7 +919,7 @@ a.name-tag,
 
         &__icon {
           color: $dark-text-color;
-          margin-right: 4px;
+          margin-inline-end: 4px;
           font-weight: 500;
         }
       }
@@ -1106,7 +1117,7 @@ a.name-tag,
 
   > h4 {
     position: sticky;
-    left: 0;
+    inset-inline-start: 0;
   }
 
   &__table {
@@ -1118,7 +1129,7 @@ a.name-tag,
     &__date {
       white-space: nowrap;
       padding: 10px 0;
-      text-align: left;
+      text-align: start;
       min-width: 120px;
 
       &.retention__table__average {
@@ -1176,7 +1187,7 @@ a.name-tag,
 
     &__total {
       display: block;
-      margin-right: 10px;
+      margin-inline-end: 10px;
       font-weight: 500;
       font-size: 28px;
       color: $primary-text-color;
@@ -1278,7 +1289,7 @@ a.sparkline {
     }
 
     &__value {
-      text-align: right;
+      text-align: end;
       color: $darker-text-color;
       padding: 11px 10px;
     }
@@ -1289,7 +1300,7 @@ a.sparkline {
       height: 8px;
       border-radius: 50%;
       background: $ui-highlight-color;
-      margin-right: 10px;
+      margin-inline-end: 10px;
 
       @for $i from 0 through 10 {
         &--#{10 * $i} {
@@ -1325,7 +1336,7 @@ a.sparkline {
     }
 
     &__rules {
-      margin-left: 30px;
+      margin-inline-start: 30px;
     }
   }
 
@@ -1447,7 +1458,7 @@ a.sparkline {
       height: 21px;
       position: absolute;
       bottom: 0;
-      right: 15px;
+      inset-inline-end: 15px;
       background: linear-gradient(to left, $ui-base-color, transparent);
       pointer-events: none;
     }
@@ -1527,7 +1538,7 @@ a.sparkline {
     background: $ui-base-color;
     position: relative;
     padding: 15px;
-    padding-left: 15px * 2 + 40px;
+    padding-inline-start: 15px * 2 + 40px;
     border-bottom: 1px solid darken($ui-base-color, 8%);
 
     &:first-child {
@@ -1547,7 +1558,7 @@ a.sparkline {
 
     &__avatar {
       position: absolute;
-      left: 15px;
+      inset-inline-start: 15px;
       top: 15px;
       border-radius: 4px;
       width: 40px;
@@ -1563,7 +1574,7 @@ a.sparkline {
       .username {
         color: $primary-text-color;
         font-weight: 500;
-        margin-right: 5px;
+        margin-inline-end: 5px;
 
         a {
           color: inherit;
@@ -1578,7 +1589,7 @@ a.sparkline {
       }
 
       time {
-        margin-left: 5px;
+        margin-inline-start: 5px;
         vertical-align: baseline;
       }
     }
@@ -1613,8 +1624,8 @@ a.sparkline {
     &__actions {
       position: absolute;
       top: 15px;
-      right: 15px;
-      text-align: right;
+      inset-inline-end: 15px;
+      text-align: end;
     }
   }
 }
@@ -1637,7 +1648,7 @@ a.sparkline {
       flex: 0 0 auto;
       width: 200px;
       padding: 15px;
-      padding-right: 0;
+      padding-inline-end: 0;
 
       .button {
         display: block;
@@ -1723,7 +1734,7 @@ a.sparkline {
 
   &__rules {
     list-style: disc;
-    padding-left: 15px;
+    padding-inline-start: 15px;
     margin-bottom: 20px;
     color: $darker-text-color;
 
@@ -1812,7 +1823,7 @@ a.sparkline {
 
   li {
     counter-increment: step 1;
-    padding-left: 2.5rem;
+    padding-inline-start: 2.5rem;
     padding-bottom: 8px;
     position: relative;
     margin-bottom: 8px;
@@ -1822,7 +1833,7 @@ a.sparkline {
       content: counter(step);
       font-size: 0.625rem;
       font-weight: 500;
-      left: 0;
+      inset-inline-start: 0;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -1841,7 +1852,7 @@ a.sparkline {
       background: $highlight-text-color;
       bottom: 0;
       top: calc(1.875rem + 1px);
-      left: 0.6875rem;
+      inset-inline-start: 0.6875rem;
     }
 
     &:last-child {
diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss
index 84977eb397..8ea3e78819 100644
--- a/app/javascript/flavours/glitch/styles/basics.scss
+++ b/app/javascript/flavours/glitch/styles/basics.scss
@@ -266,7 +266,7 @@ button {
   overflow: hidden;
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: -1000;
 }
 
diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss
index 6664a5756c..7058274736 100644
--- a/app/javascript/flavours/glitch/styles/components/about.scss
+++ b/app/javascript/flavours/glitch/styles/components/about.scss
@@ -5,7 +5,7 @@
   &__preview {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -211,7 +211,7 @@
   }
 
   .account__avatar-wrapper {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 
   .account__relationship {
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index b95cffbb41..a5ba370aa5 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -31,7 +31,7 @@
     padding: 0;
 
     & > .account__avatar-wrapper {
-      margin: 0 8px 0 0;
+      margin-inline-end: 8px;
     }
 
     & > .display-name {
@@ -57,8 +57,8 @@
 
 .account__avatar-wrapper {
   float: left;
-  margin-left: 12px;
-  margin-right: 12px;
+  margin-inline-start: 12px;
+  margin-inline-end: 12px;
 }
 
 .account__avatar {
@@ -74,7 +74,7 @@
   &-inline {
     display: inline-block;
     vertical-align: middle;
-    margin-right: 5px;
+    margin-inline-end: 5px;
   }
 
   &-composite {
@@ -95,7 +95,7 @@
       display: block;
       position: absolute;
       top: 50%;
-      left: 50%;
+      inset-inline-start: 50%;
       transform: translate(-50%, -50%);
       color: $primary-text-color;
       text-shadow: 1px 1px 2px $base-shadow-color;
@@ -128,7 +128,7 @@
 
     position: absolute;
     bottom: 0;
-    right: 0;
+    inset-inline-end: 0;
     z-index: 1;
 
     img {
@@ -198,12 +198,12 @@
   text-decoration: none;
   overflow: hidden;
   flex: 0 1 100%;
-  border-left: 1px solid lighten($ui-base-color, 8%);
+  border-inline-start: 1px solid lighten($ui-base-color, 8%);
   padding: 10px 0;
   border-bottom: 4px solid transparent;
 
   &:first-child {
-    border-left: 0;
+    border-inline-start: 0;
   }
 
   &.active {
@@ -247,12 +247,12 @@
 
 .account-authorize__avatar {
   float: left;
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 
 .notification__report {
   padding: 8px 10px;
-  padding-left: 68px;
+  padding-inline-start: 68px;
   position: relative;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
   min-height: 54px;
@@ -272,14 +272,15 @@
 
   &__avatar {
     position: absolute;
-    left: 10px;
+    inset-inline-start: 10px;
     top: 10px;
   }
 }
 
 .notification__message {
-  margin-left: 42px;
-  padding: 8px 0 0 26px;
+  margin-inline-start: 42px;
+  padding-top:8px;
+  padding-inline-start: 26px;
   cursor: default;
   color: $darker-text-color;
   font-size: 15px;
@@ -346,7 +347,7 @@
   &__icons {
     position: absolute;
     top: 50%;
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translate(-50%, -50%);
     font-size: 24px;
   }
@@ -387,7 +388,7 @@
         content: '';
         position: absolute;
         bottom: 0;
-        left: 50%;
+        inset-inline-start: 50%;
         width: 0;
         height: 0;
         transform: translateX(-50%);
@@ -431,7 +432,7 @@
 
   &__message {
     position: relative;
-    margin-left: 58px;
+    margin-inline-start: 58px;
     color: $dark-text-color;
     padding: 8px 0;
     padding-top: 0;
@@ -446,7 +447,7 @@
   }
 
   &__icon-wrapper {
-    left: -26px;
+    inset-inline-start: -26px;
     position: absolute;
   }
 
@@ -500,7 +501,7 @@
   &__info {
     position: absolute;
     top: 10px;
-    left: 10px;
+    inset-inline-start: 10px;
   }
 
   &__image {
@@ -544,7 +545,7 @@
     margin-top: -81px;
     height: 130px;
     overflow: hidden;
-    margin-left: -2px; // aligns the pfp with content below
+    margin-inline-start: -2px; // aligns the pfp with content below
 
     .account-role {
       margin: 0 2px;
@@ -635,8 +636,8 @@
       color: $darker-text-color;
 
       .columns-area--mobile & {
-        padding-left: 20px;
-        padding-right: 20px;
+        padding-inline-start: 20px;
+        padding-inline-end: 20px;
       }
     }
 
diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.scss
index feaff81f52..be27120a7d 100644
--- a/app/javascript/flavours/glitch/styles/components/announcements.scss
+++ b/app/javascript/flavours/glitch/styles/components/announcements.scss
@@ -84,13 +84,13 @@
       display: block;
       font-weight: 500;
       margin-bottom: 10px;
-      padding-right: 18px;
+      padding-inline-end: 18px;
     }
 
     &__unread {
       position: absolute;
       top: 19px;
-      right: 19px;
+      inset-inline-end: 19px;
       display: block;
       background: $highlight-text-color;
       border-radius: 50%;
@@ -104,7 +104,7 @@
     color: $darker-text-color;
     position: absolute;
     bottom: 3px;
-    right: 0;
+    inset-inline-end: 0;
   }
 }
 
@@ -121,7 +121,7 @@
   flex-wrap: wrap;
   align-items: center;
   margin-top: 15px;
-  margin-left: -2px;
+  margin-inline-start: -2px;
   width: calc(100% - (90px - 33px));
 
   &__item {
@@ -162,7 +162,7 @@
       font-size: 13px;
       font-weight: 500;
       text-align: center;
-      margin-left: 6px;
+      margin-inline-start: 6px;
       color: $darker-text-color;
     }
 
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 907f820d6c..a72afe7261 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -182,7 +182,8 @@ $ui-header-height: 55px;
   cursor: pointer;
   flex: 0 0 auto;
   font-size: 16px;
-  padding: 0 5px 0 0;
+  padding: 0;
+  padding-inline-end: 5px;
   z-index: 3;
 
   &:hover {
@@ -190,13 +191,14 @@ $ui-header-height: 55px;
   }
 
   &:last-child {
-    padding: 0 15px 0 0;
+    padding: 0;
+    padding-inline-end: 15px;;
   }
 }
 
 .column-back-button__icon {
   display: inline-block;
-  margin-right: 5px;
+  margin-inline-end: 5px;
 }
 
 .column-back-button--slim {
@@ -209,7 +211,7 @@ $ui-header-height: 55px;
   font-size: 16px;
   padding: 15px;
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
   top: -48px;
 }
 
@@ -263,7 +265,7 @@ $ui-header-height: 55px;
 
 .column-link__icon {
   display: inline-block;
-  margin-right: 5px;
+  margin-inline-end: 5px;
 }
 
 .column-subheading {
@@ -289,8 +291,8 @@ $ui-header-height: 55px;
       content: '';
       position: absolute;
       bottom: -13px;
-      left: 0;
-      right: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
       margin: 0 auto;
       width: 60%;
       pointer-events: none;
@@ -329,7 +331,7 @@ $ui-header-height: 55px;
     color: inherit;
     background: transparent;
     font: inherit;
-    text-align: left;
+    text-align: start;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -377,7 +379,7 @@ $ui-header-height: 55px;
 .column-header__buttons {
   height: 48px;
   display: flex;
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 
 .column-header__links {
@@ -385,7 +387,7 @@ $ui-header-height: 55px;
 }
 
 .column-header__links .text-btn {
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 
 .column-header__button {
@@ -444,7 +446,7 @@ $ui-header-height: 55px;
   @media screen and (min-width: $no-gap-breakpoint) {
     b,
     i {
-      margin-right: 5px;
+      margin-inline-end: 5px;
     }
 
     br {
@@ -530,12 +532,12 @@ $ui-header-height: 55px;
     padding: 5px;
 
     &:first-child {
-      padding-right: 7px;
+      padding-inline-end: 7px;
     }
 
     &:last-child {
-      padding-left: 7px;
-      margin-left: 5px;
+      padding-inline-start: 7px;
+      margin-inline-start: 5px;
     }
   }
 }
@@ -559,7 +561,7 @@ $ui-header-height: 55px;
 
 .column-header__icon {
   display: inline-block;
-  margin-right: 5px;
+  margin-inline-end: 5px;
 }
 
 .column-settings__pillbar {
@@ -725,7 +727,7 @@ $ui-header-height: 55px;
 
 .column-inline-form {
   padding: 7px 15px;
-  padding-right: 5px;
+  padding-inline-end: 5px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -801,12 +803,12 @@ $ui-header-height: 55px;
 
     &__placeholder {
       color: $dark-text-color;
-      padding-left: 2px;
+      padding-inline-start: 2px;
       font-size: 12px;
     }
 
     &__value-container {
-      padding-left: 6px;
+      padding-inline-start: 6px;
     }
 
     &__multi-value {
@@ -889,7 +891,7 @@ $ui-header-height: 55px;
   &__close {
     position: absolute;
     top: 10px;
-    right: 10px;
+    inset-inline-end: 10px;
   }
 
   h2 {
@@ -948,7 +950,7 @@ $ui-header-height: 55px;
 
   &__background {
     position: absolute;
-    left: 0;
+    inset-inline-start: 0;
     bottom: 0;
     height: 220px;
     width: auto;
diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss
index 1c2e0aeb4d..d7b8281ee4 100644
--- a/app/javascript/flavours/glitch/styles/components/compose_form.scss
+++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss
@@ -4,7 +4,7 @@
   .emoji-picker-dropdown {
     position: absolute;
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
 
     ::-webkit-scrollbar-track:hover,
     ::-webkit-scrollbar-track:active {
@@ -113,8 +113,8 @@
     width: 18px;
     height: 18px;
     flex: 0 0 auto;
-    margin-left: 5px;
-    margin-right: 10px;
+    margin-inline-start: 5px;
+    margin-inline-end: 10px;
     top: -1px;
     border-radius: 4px;
     vertical-align: middle;
@@ -254,13 +254,14 @@
   display: block;
   position: absolute;
   top: 29px;
-  right: 5px;
+  inset-inline-end: 5px;
   bottom: 5px;
   overflow: hidden;
 
   & > .textarea_icon {
     display: block;
-    margin: 2px 0 0 2px;
+    margin-top: 2px;
+    margin-inline-start: 2px;
     width: 24px;
     height: 24px;
     color: $lighter-text-color;
@@ -334,7 +335,7 @@
 
     &__uses {
       flex: 0 0 auto;
-      text-align: right;
+      text-align: end;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -403,8 +404,8 @@
     position: absolute;
     z-index: 2;
     bottom: 0;
-    left: 0;
-    right: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     box-sizing: border-box;
     background: linear-gradient(
       0deg,
@@ -435,7 +436,7 @@
 
   .fa {
     font-size: 34px;
-    margin-right: 10px;
+    margin-inline-end: 10px;
   }
 
   span {
@@ -462,7 +463,7 @@
 .upload-progress__tracker {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   height: 6px;
   border-radius: 6px;
   background: $ui-highlight-color;
@@ -515,7 +516,7 @@
 
 .character-counter__wrapper {
   align-self: center;
-  margin-right: 4px;
+  margin-inline-end: 4px;
 }
 
 .privacy-dropdown.active {
@@ -567,7 +568,7 @@
     color: $lighter-text-color;
 
     &:not(:first-child) {
-      margin-left: 10px;
+      margin-inline-start: 10px;
     }
 
     strong {
@@ -635,11 +636,11 @@
     }
 
     .emoji-mart-search {
-      padding-right: 10px;
+      padding-inline-end: 10px;
     }
 
     .emoji-mart-search-icon {
-      right: 10px + 5px;
+      inset-inline-end: 10px + 5px;
     }
 
     .emoji-mart-scroll {
diff --git a/app/javascript/flavours/glitch/styles/components/directory.scss b/app/javascript/flavours/glitch/styles/components/directory.scss
index 5c763764d8..db9a23bce2 100644
--- a/app/javascript/flavours/glitch/styles/components/directory.scss
+++ b/app/javascript/flavours/glitch/styles/components/directory.scss
@@ -55,7 +55,7 @@
     width: 18px;
     height: 18px;
     flex: 0 0 auto;
-    margin-right: 10px;
+    margin-inline-end: 10px;
     top: -1px;
     border-radius: 50%;
     vertical-align: middle;
diff --git a/app/javascript/flavours/glitch/styles/components/doodle.scss b/app/javascript/flavours/glitch/styles/components/doodle.scss
index 52c7cd54a0..c3b67da4a5 100644
--- a/app/javascript/flavours/glitch/styles/components/doodle.scss
+++ b/app/javascript/flavours/glitch/styles/components/doodle.scss
@@ -35,8 +35,8 @@ $doodle-background: #d9e1e8;
       label {
         display: inline-block;
         width: 70px;
-        text-align: right;
-        margin-right: 2px;
+        text-align: end;
+        margin-inline-end: 2px;
       }
 
       input[type='number'],
@@ -46,14 +46,14 @@ $doodle-background: #d9e1e8;
 
       span.val {
         display: inline-block;
-        text-align: left;
+        text-align: start;
         width: 50px;
       }
     }
   }
 
   .doodle-palette {
-    padding-right: 0 !important;
+    padding-inline-end: 0 !important;
     border: 1px solid black;
     line-height: 0.2rem;
     flex-grow: 0;
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index ec8a3da9e5..b16d085f8c 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -8,11 +8,11 @@
   flex: none;
 
   &:first-child {
-    padding-left: 10px;
+    padding-inline-start: 10px;
   }
 
   &:last-child {
-    padding-right: 10px;
+    padding-inline-end: 10px;
   }
 
   @include single-column('screen and (max-width: 630px)') {
@@ -126,7 +126,7 @@
 
 .navigation-bar__profile {
   flex: 1 1 auto;
-  margin-left: 8px;
+  margin-inline-start: 8px;
   overflow: hidden;
 }
 
@@ -150,7 +150,7 @@
 
     .fa {
       display: inline-block;
-      margin-right: 5px;
+      margin-inline-end: 5px;
     }
   }
 
@@ -187,7 +187,7 @@
 .drawer__inner {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   background: lighten($ui-base-color, 13%);
   box-sizing: border-box;
   padding: 0;
@@ -237,14 +237,14 @@
 .pseudo-drawer {
   background: lighten($ui-base-color, 13%);
   font-size: 13px;
-  text-align: left;
+  text-align: start;
 }
 
 .drawer__backdrop {
   cursor: pointer;
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: 100%;
   height: 100%;
   background: rgba($base-overlay-background, 0.5);
diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss
index 4427f2080d..f76288978d 100644
--- a/app/javascript/flavours/glitch/styles/components/emoji.scss
+++ b/app/javascript/flavours/glitch/styles/components/emoji.scss
@@ -31,7 +31,7 @@
 .emoji-picker-dropdown__modifiers {
   position: absolute;
   top: 60px;
-  right: 11px;
+  inset-inline-end: 11px;
   cursor: pointer;
 }
 
@@ -39,7 +39,7 @@
   position: absolute;
   z-index: 4;
   top: -4px;
-  left: -8px;
+  inset-inline-start: -8px;
   background: $simple-background-color;
   border-radius: 4px;
   box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
@@ -72,7 +72,10 @@
 
 .emoji-button {
   display: block;
-  padding: 5px 5px 2px 2px;
+  padding-top: 5px;
+  padding-bottom: 2px;
+  padding-inline-start: 2px;
+  padding-inline-end: 5px;
   outline: 0;
   cursor: pointer;
 
diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss
index 6bb9827b3a..e402838dbf 100644
--- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss
+++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss
@@ -71,7 +71,7 @@
 .emoji-mart-anchor-bar {
   position: absolute;
   bottom: -3px;
-  left: 0;
+  inset-inline-start: 0;
   width: 100%;
   height: 3px;
   background-color: darken($ui-highlight-color, 3%);
@@ -106,7 +106,7 @@
 
 .emoji-mart-search {
   padding: 10px;
-  padding-right: 45px;
+  padding-inline-end: 45px;
   background: $simple-background-color;
   position: relative;
 
@@ -114,7 +114,7 @@
     font-size: 16px;
     font-weight: 400;
     padding: 7px 9px;
-    padding-right: 25px;
+    padding-inline-end: 25px;
     font-family: inherit;
     display: block;
     width: 100%;
@@ -142,7 +142,7 @@
 .emoji-mart-search-icon {
   position: absolute;
   top: 18px;
-  right: 45px + 5px;
+  inset-inline-end: 45px + 5px;
   z-index: 2;
   padding: 2px 5px 1px;
   border: 0;
@@ -177,7 +177,7 @@
     content: '';
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
     background-color: rgba($ui-secondary-color, 0.7);
diff --git a/app/javascript/flavours/glitch/styles/components/error_boundary.scss b/app/javascript/flavours/glitch/styles/components/error_boundary.scss
index 3176690e2c..fbbb1ceb02 100644
--- a/app/javascript/flavours/glitch/styles/components/error_boundary.scss
+++ b/app/javascript/flavours/glitch/styles/components/error_boundary.scss
@@ -17,8 +17,8 @@
 
   ul {
     list-style: disc;
-    margin-left: 0;
-    padding-left: 1em;
+    margin-inline-start: 0;
+    padding-inline-start: 1em;
   }
 
   textarea.web_app_crash-stacktrace {
diff --git a/app/javascript/flavours/glitch/styles/components/explore.scss b/app/javascript/flavours/glitch/styles/components/explore.scss
index bad77fc1ce..8f67b365fd 100644
--- a/app/javascript/flavours/glitch/styles/components/explore.scss
+++ b/app/javascript/flavours/glitch/styles/components/explore.scss
@@ -20,7 +20,7 @@
 
   .search .fa {
     top: 10px;
-    right: 10px;
+    inset-inline-end: 10px;
     color: $dark-text-color;
   }
 
@@ -104,7 +104,7 @@
       object-fit: fill;
       position: absolute;
       top: 0;
-      left: 0;
+      inset-inline-start: 0;
       z-index: 0;
 
       &--hidden {
diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss
index 52516cfb52..dee42bfdd9 100644
--- a/app/javascript/flavours/glitch/styles/components/local_settings.scss
+++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss
@@ -20,12 +20,12 @@
   .boolean label,
   .radio_buttons label {
     position: relative;
-    padding-left: 28px;
+    padding-inline-start: 28px;
     padding-top: 3px;
 
     input {
       position: absolute;
-      left: 0;
+      inset-inline-start: 0;
       top: 0;
     }
   }
@@ -149,7 +149,7 @@
 
   ul {
     padding: 10px;
-    margin-left: 12px;
+    margin-inline-start: 12px;
     list-style: disc inside;
   }
 
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index 6d6b8bc0e9..e1a6ae3099 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -49,7 +49,7 @@
   color: $primary-text-color;
   background: rgba($base-overlay-background, 0.5);
   bottom: 6px;
-  left: 6px;
+  inset-inline-start: 6px;
   padding: 2px 6px;
   border-radius: 2px;
   font-size: 11px;
@@ -133,7 +133,7 @@
   object-fit: cover;
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: 0;
   background: $base-overlay-background;
 
@@ -207,16 +207,16 @@
 .media-modal__closer {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
 }
 
 .media-modal__navigation {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
   pointer-events: none;
   transition: opacity 0.3s linear;
@@ -259,18 +259,18 @@
 }
 
 .media-modal__nav--left {
-  left: 0;
+  inset-inline-start: 0;
 }
 
 .media-modal__nav--right {
-  right: 0;
+  inset-inline-end: 0;
 }
 
 .media-modal__overlay {
   max-width: 600px;
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   bottom: 0;
   margin: 0 auto;
 
@@ -357,7 +357,7 @@
 
 .media-modal__close {
   position: absolute;
-  right: 8px;
+  inset-inline-end: 8px;
   top: 8px;
   z-index: 100;
 }
@@ -502,8 +502,8 @@
     position: absolute;
     z-index: 2;
     bottom: 0;
-    left: 0;
-    right: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     box-sizing: border-box;
     background: linear-gradient(
       0deg,
@@ -531,7 +531,7 @@
     display: none;
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
     z-index: 4;
@@ -654,7 +654,7 @@
     &.active {
       overflow: visible;
       width: 50px;
-      margin-right: 16px;
+      margin-inline-end: 16px;
     }
 
     &::before {
@@ -665,7 +665,7 @@
       display: block;
       position: absolute;
       height: 4px;
-      left: 0;
+      inset-inline-start: 0;
       top: 50%;
       transform: translate(0, -50%);
     }
@@ -675,7 +675,7 @@
       position: absolute;
       height: 4px;
       border-radius: 4px;
-      left: 0;
+      inset-inline-start: 0;
       top: 50%;
       transform: translate(0, -50%);
       background: lighten($ui-highlight-color, 8%);
@@ -688,8 +688,8 @@
       width: 12px;
       height: 12px;
       top: 50%;
-      left: 0;
-      margin-left: -6px;
+      inset-inline-start: 0;
+      margin-inline-start: -6px;
       transform: translate(0, -50%);
       background: lighten($ui-highlight-color, 8%);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
@@ -760,7 +760,7 @@
       width: 12px;
       height: 12px;
       top: 10px;
-      margin-left: -6px;
+      margin-inline-start: -6px;
       background: lighten($ui-highlight-color, 8%);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
 
diff --git a/app/javascript/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.scss
index 86b8b99c1b..6275001156 100644
--- a/app/javascript/flavours/glitch/styles/components/misc.scss
+++ b/app/javascript/flavours/glitch/styles/components/misc.scss
@@ -281,13 +281,15 @@
     display: inline-flex;
     align-items: center;
     width: auto !important;
-    padding: 0 4px 0 2px;
+    padding: 0;
+    padding-inline-end: 4px;
+    padding-inline-start: 2px;
   }
 
   &__counter {
     display: inline-block;
     width: auto;
-    margin-left: 4px;
+    margin-inline-start: 4px;
     font-size: 12px;
     font-weight: 500;
   }
@@ -375,7 +377,7 @@ body > [data-popper-placement] {
 }
 
 .notification__favourite-icon-wrapper {
-  left: 0;
+  inset-inline-start: 0;
   position: absolute;
 
   .fa.star-icon {
@@ -654,7 +656,7 @@ body > [data-popper-placement] {
   }
 
   &.right {
-    left: -9px;
+    inset-inline-start: -9px;
 
     &::before {
       transform: rotate(-90deg);
@@ -666,7 +668,7 @@ body > [data-popper-placement] {
   }
 
   &.left {
-    right: -9px;
+    inset-inline-end: -9px;
 
     &::before {
       transform: rotate(90deg);
@@ -749,8 +751,8 @@ body > [data-popper-placement] {
   display: block;
   line-height: 18px;
   max-width: 311px;
-  right: 0;
-  text-align: left;
+  inset-inline-end: 0;
+  text-align: start;
   z-index: 9999;
 
   & > ul {
@@ -764,12 +766,12 @@ body > [data-popper-placement] {
   }
 
   &.dropdown__right {
-    right: 0;
+    inset-inline-end: 0;
   }
 
   &.dropdown__left {
     & > ul {
-      left: -98px;
+      inset-inline-start: -98px;
     }
   }
 
@@ -834,23 +836,23 @@ body > [data-popper-placement] {
   .drawer {
     flex: 0 0 auto;
     padding: 10px;
-    padding-left: 5px;
-    padding-right: 5px;
+    padding-inline-start: 5px;
+    padding-inline-end: 5px;
 
     &:first-child {
-      padding-left: 10px;
+      padding-inline-start: 10px;
     }
 
     &:last-child {
-      padding-right: 10px;
+      padding-inline-end: 10px;
     }
   }
 
   .columns-area > div {
     .column,
     .drawer {
-      padding-left: 5px;
-      padding-right: 5px;
+      padding-inline-start: 5px;
+      padding-inline-end: 5px;
     }
   }
 }
@@ -897,12 +899,12 @@ body > [data-popper-placement] {
   }
 
   span {
-    margin-left: 5px;
+    margin-inline-start: 5px;
     display: none;
   }
 
   span.icon {
-    margin-left: 0;
+    margin-inline-start: 0;
     display: inline;
   }
 }
@@ -912,7 +914,7 @@ body > [data-popper-placement] {
 
   &__badge {
     position: absolute;
-    left: 9px;
+    inset-inline-start: 9px;
     top: -13px;
     background: $ui-highlight-color;
     border: 2px solid lighten($ui-base-color, 8%);
@@ -926,7 +928,7 @@ body > [data-popper-placement] {
 
   &__issue-badge {
     position: absolute;
-    left: 11px;
+    inset-inline-start: 11px;
     bottom: 1px;
     display: block;
     background: $error-red;
@@ -1039,7 +1041,7 @@ body > [data-popper-placement] {
   margin-top: auto;
   margin-bottom: auto;
   line-height: 0;
-  left: 8px;
+  inset-inline-start: 8px;
   opacity: 0;
   transition: opacity 0.25s ease;
 }
@@ -1058,7 +1060,7 @@ body > [data-popper-placement] {
   margin-top: auto;
   margin-bottom: auto;
   line-height: 0;
-  right: 10px;
+  inset-inline-end: 10px;
   opacity: 1;
   transition: opacity 0.25s ease;
 }
@@ -1070,7 +1072,7 @@ body > [data-popper-placement] {
 .react-toggle-thumb {
   position: absolute;
   top: 1px;
-  left: 1px;
+  inset-inline-start: 1px;
   width: 22px;
   height: 22px;
   border: 1px solid $ui-base-color;
@@ -1082,7 +1084,7 @@ body > [data-popper-placement] {
 }
 
 .react-toggle--checked .react-toggle-thumb {
-  left: 27px;
+  inset-inline-start: 27px;
   border-color: $ui-highlight-color;
 }
 
@@ -1176,7 +1178,7 @@ body > [data-popper-placement] {
 
   thead {
     position: absolute;
-    left: -9999px;
+    inset-inline-start: -9999px;
   }
 
   td {
@@ -1318,9 +1320,9 @@ button.icon-button.active i.fa-retweet {
   overflow: hidden;
   position: absolute;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   bottom: -1px;
-  padding-left: 15px; // space for the box shadow to be visible
+  padding-inline-start: 15px; // space for the box shadow to be visible
   z-index: 999;
   align-items: center;
   justify-content: flex-end;
@@ -1335,7 +1337,7 @@ button.icon-button.active i.fa-retweet {
     align-items: center;
     justify-content: center;
     background: lighten($ui-base-color, 8%);
-    border-left: 1px solid lighten($ui-base-color, 20%);
+    border-inline-start: 1px solid lighten($ui-base-color, 20%);
     box-shadow: 0 0 5px black;
     border-bottom: 1px solid $ui-base-color;
   }
@@ -1381,7 +1383,7 @@ button.icon-button.active i.fa-retweet {
   overflow: visible;
   position: absolute;
   top: 50%;
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
@@ -1473,7 +1475,7 @@ button.icon-button.active i.fa-retweet {
 
 .spoiler-button {
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: 100%;
   height: 100%;
   position: absolute;
@@ -1481,7 +1483,7 @@ button.icon-button.active i.fa-retweet {
 
   &--minified {
     display: flex;
-    left: 4px;
+    inset-inline-start: 4px;
     top: 4px;
     width: auto;
     height: auto;
@@ -1539,7 +1541,7 @@ button.icon-button.active i.fa-retweet {
   color: $darker-text-color;
   display: inline-block;
   margin-bottom: 14px;
-  margin-left: 8px;
+  margin-inline-start: 8px;
   vertical-align: middle;
 }
 
@@ -1589,7 +1591,7 @@ button.icon-button.active i.fa-retweet {
   display: flex;
   height: 100vh;
   justify-content: center;
-  left: 0;
+  inset-inline-start: 0;
   opacity: 0;
   position: fixed;
   top: 0;
@@ -1614,9 +1616,9 @@ button.icon-button.active i.fa-retweet {
 .upload-area__background {
   position: absolute;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   bottom: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: -1;
   border-radius: 4px;
   background: $ui-base-color;
@@ -1646,7 +1648,7 @@ button.icon-button.active i.fa-retweet {
   height: 3px;
   position: fixed;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: 9999;
 }
 
@@ -1657,7 +1659,7 @@ button.icon-button.active i.fa-retweet {
 .icon-badge {
   position: absolute;
   display: block;
-  right: -0.25em;
+  inset-inline-end: -0.25em;
   top: -0.25em;
   background-color: $ui-highlight-color;
   border-radius: 50%;
@@ -1710,7 +1712,7 @@ button.icon-button.active i.fa-retweet {
     &__relative-time {
       font-size: 15px;
       color: $darker-text-color;
-      padding-left: 15px;
+      padding-inline-start: 15px;
     }
 
     &__names {
@@ -1759,8 +1761,8 @@ button.icon-button.active i.fa-retweet {
 
 .ui .flash-message {
   margin-top: 10px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
   margin-bottom: 0;
   min-width: 75%;
 }
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index 65060f4224..354e5a04fc 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/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;
   }
 
diff --git a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss
index 93123075ee..cab78402b2 100644
--- a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss
+++ b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss
@@ -89,7 +89,7 @@
     &::before {
       content: counter(list-counter) '.';
       position: absolute;
-      left: 0;
+      inset-inline-start: 0;
     }
   }
 
@@ -101,13 +101,13 @@
     width: 0.375em;
     height: 0.375em;
     top: 0.5em;
-    left: 0.25em;
+    inset-inline-start: 0.25em;
   }
 
   ul > li,
   ol > li {
     position: relative;
-    padding-left: 1.75em;
+    padding-inline-start: 1.75em;
   }
 
   & > ul > li p {
diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss
index a6e98a868f..f93e14d76c 100644
--- a/app/javascript/flavours/glitch/styles/components/search.scss
+++ b/app/javascript/flavours/glitch/styles/components/search.scss
@@ -8,7 +8,7 @@
 
   display: block;
   padding: 15px;
-  padding-right: 30px;
+  padding-inline-end: 30px;
   line-height: 18px;
   font-size: 16px;
 
@@ -44,7 +44,7 @@
   .fa {
     position: absolute;
     top: 16px;
-    right: 10px;
+    inset-inline-end: 10px;
     z-index: 2;
     display: inline-block;
     opacity: 0;
@@ -98,7 +98,7 @@
 
   .fa {
     display: inline-block;
-    margin-right: 5px;
+    margin-inline-end: 5px;
   }
 }
 
@@ -120,7 +120,7 @@
 
     .fa {
       display: inline-block;
-      margin-right: 5px;
+      margin-inline-end: 5px;
     }
   }
 
@@ -170,7 +170,7 @@
       flex: 0 0 auto;
       font-size: 24px;
       font-weight: 500;
-      text-align: right;
+      text-align: end;
       color: $secondary-text-color;
       text-decoration: none;
     }
diff --git a/app/javascript/flavours/glitch/styles/components/sensitive.scss b/app/javascript/flavours/glitch/styles/components/sensitive.scss
index 490951fb4c..c77515eb70 100644
--- a/app/javascript/flavours/glitch/styles/components/sensitive.scss
+++ b/app/javascript/flavours/glitch/styles/components/sensitive.scss
@@ -4,7 +4,7 @@
   align-items: center;
   position: absolute;
   top: 4px;
-  left: 4px;
+  inset-inline-start: 4px;
   z-index: 100;
 }
 
diff --git a/app/javascript/flavours/glitch/styles/components/signed_out.scss b/app/javascript/flavours/glitch/styles/components/signed_out.scss
index efb49305dc..18492983e5 100644
--- a/app/javascript/flavours/glitch/styles/components/signed_out.scss
+++ b/app/javascript/flavours/glitch/styles/components/signed_out.scss
@@ -101,7 +101,7 @@
   }
 
   .account__avatar-wrapper {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 
   .spacer {
diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index 036b3f6ef1..6563fa47b5 100644
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -30,7 +30,7 @@
     line-height: 18px;
     font-size: 16px;
     padding: 15px;
-    padding-right: 30px;
+    padding-inline-end: 30px;
   }
 
   .search__icon .fa {
@@ -130,7 +130,7 @@
     line-height: 18px;
     font-size: 16px;
     padding: 15px;
-    padding-right: 30px;
+    padding-inline-end: 30px;
   }
 
   .search__icon .fa {
@@ -174,11 +174,12 @@
   }
 
   .notification__report {
-    padding: 15px 15px 15px (48px + 15px * 2);
+    padding: 15px;
+    padding-inline-start: (48px + 15px * 2);
     min-height: 48px + 2px;
 
     &__avatar {
-      left: 15px;
+      inset-inline-start: 15px;
       top: 17px;
     }
   }
@@ -265,7 +266,7 @@
     .navigation-panel {
       margin: 0;
       background: $ui-base-color;
-      border-left: 1px solid lighten($ui-base-color, 8%);
+      border-inline-start: 1px solid lighten($ui-base-color, 8%);
       height: 100vh;
     }
 
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 1a7dfe9aed..5aca096910 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -164,9 +164,10 @@
 
   .status__content__spoiler-icon {
     display: inline-block;
-    margin: 0 0 0 5px;
-    border-left: 1px solid currentColor;
-    padding: 0 0 0 4px;
+    margin-inline-start: 5px;
+    border-inline-start: 1px solid currentColor;
+    padding: 0;
+    padding-inline-start: 4px;
     font-size: 16px;
     vertical-align: -2px;
   }
@@ -195,7 +196,7 @@
 }
 
 .status__prepend-icon-wrapper {
-  left: -26px;
+  inset-inline-start: -26px;
   position: absolute;
 }
 
@@ -241,7 +242,7 @@
   @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
     // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
     // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
-    padding-right: 28px; // 12px + 16px
+    padding-inline-end: 28px; // 12px + 16px
   }
 
   @keyframes fade {
@@ -310,8 +311,8 @@
     &.has-background::before {
       display: block;
       position: absolute;
-      left: 0;
-      right: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
       top: 0;
       bottom: 0;
       background-image: linear-gradient(
@@ -339,8 +340,8 @@
         position: absolute;
         top: 0;
         bottom: 0;
-        left: 0;
-        right: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         background: linear-gradient(
           rgba($ui-base-color, 0),
           rgba($ui-base-color, 1)
@@ -395,7 +396,7 @@
   display: inline-block;
   color: $dark-text-color;
   font-size: 14px;
-  text-align: right;
+  text-align: end;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -436,8 +437,8 @@
   .status__visibility-icon,
   .status__reply-icon,
   .text-icon {
-    padding-left: 2px;
-    padding-right: 2px;
+    padding-inline-start: 2px;
+    padding-inline-end: 2px;
   }
 
   .status__collapse-button.active > .fa-angle-double-up {
@@ -503,7 +504,7 @@
 .status__prepend {
   margin-top: -2px;
   margin-bottom: 8px;
-  margin-left: 58px;
+  margin-inline-start: 58px;
   color: $dark-text-color;
   font-size: 14px;
   position: relative;
@@ -526,10 +527,10 @@
 }
 
 .status__action-bar-button {
-  margin-right: 18px;
+  margin-inline-end: 18px;
 
   &.icon-button--with-counter {
-    margin-right: 14px;
+    margin-inline-end: 14px;
   }
 }
 
@@ -610,7 +611,7 @@
   font-weight: 500;
   font-size: 12px;
   line-height: 17px;
-  margin-left: 6px;
+  margin-inline-start: 6px;
 }
 
 .status__display-name,
@@ -681,12 +682,12 @@ a.status__display-name,
 
 .detailed-status__display-avatar {
   float: left;
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 
 .status__avatar {
   flex: none;
-  margin: 0 10px 0 0;
+  margin-inline-end: 10px;
   height: 48px;
   width: 48px;
 }
@@ -739,9 +740,9 @@ a.status__display-name,
 
   &__actions {
     bottom: 0;
-    left: 0;
+    inset-inline-start: 0;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     top: 0;
     display: flex;
     justify-content: center;
@@ -826,7 +827,8 @@ a.status-card {
 .status-card__content {
   flex: 1 1 auto;
   overflow: hidden;
-  padding: 14px 14px 14px 8px;
+  padding: 14px;
+  padding-inline-start: 8px;
 }
 
 .status-card__description {
@@ -852,7 +854,7 @@ a.status-card {
     position: absolute;
     transform-origin: 50% 50%;
     top: 50%;
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translate(-50%, -50%);
   }
 }
@@ -919,7 +921,7 @@ a.status-card.compact:hover {
   object-fit: fill;
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: 0;
   background: $base-overlay-background;
 
@@ -941,7 +943,7 @@ a.status-card.compact:hover {
     color: $dark-text-color;
     padding: 8px 18px;
     cursor: default;
-    border-right: 1px solid lighten($ui-base-color, 8%);
+    border-inline-end: 1px solid lighten($ui-base-color, 8%);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -956,7 +958,7 @@ a.status-card.compact:hover {
   &__list {
     list-style: none;
     padding: 4px 0;
-    padding-left: 8px;
+    padding-inline-start: 8px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -1016,10 +1018,10 @@ a.status-card.compact:hover {
       content: '';
       position: absolute;
       top: 0;
-      left: 0;
+      inset-inline-start: 0;
       width: 100%;
       height: 100%;
-      border-left: 4px solid $highlight-text-color;
+      border-inline-start: 4px solid $highlight-text-color;
       pointer-events: none;
     }
   }
@@ -1028,12 +1030,12 @@ a.status-card.compact:hover {
 .picture-in-picture {
   position: fixed;
   bottom: 20px;
-  right: 20px;
+  inset-inline-end: 20px;
   width: 300px;
 
   &.left {
-    right: unset;
-    left: 20px;
+    inset-inline-end: unset;
+    inset-inline-start: 20px;
   }
 
   &__footer {
@@ -1059,7 +1061,7 @@ a.status-card.compact:hover {
     }
 
     .account__avatar {
-      margin-right: 10px;
+      margin-inline-end: 10px;
     }
 
     .display-name {
diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss
index b908515460..d75ccecee9 100644
--- a/app/javascript/flavours/glitch/styles/containers.scss
+++ b/app/javascript/flavours/glitch/styles/containers.scss
@@ -18,7 +18,7 @@
 
     .logo {
       height: 42px;
-      margin-right: 10px;
+      margin-inline-end: 10px;
     }
 
     a {
@@ -75,7 +75,7 @@
     height: 40px;
     @include avatar-size(40px);
 
-    margin-right: 10px;
+    margin-inline-end: 10px;
 
     img {
       width: 100%;
@@ -104,6 +104,6 @@
     display: block;
     font-size: 32px;
     line-height: 40px;
-    margin-left: 10px;
+    margin-inline-start: 10px;
   }
 }
diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
index 602de9002e..bb44d1bace 100644
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ b/app/javascript/flavours/glitch/styles/forms.scss
@@ -54,12 +54,12 @@ code {
 
       .radio > label {
         position: relative;
-        padding-left: 28px;
+        padding-inline-start: 28px;
 
         input {
           position: absolute;
           top: -2px;
-          left: 0;
+          inset-inline-start: 0;
         }
       }
     }
@@ -79,7 +79,7 @@ code {
 
       .label_input,
       .hint {
-        padding-left: 28px;
+        padding-inline-start: 28px;
       }
 
       .label_input__wrapper {
@@ -89,7 +89,7 @@ code {
       label.checkbox {
         position: absolute;
         top: 2px;
-        left: 0;
+        inset-inline-start: 0;
       }
 
       label a {
@@ -160,7 +160,7 @@ code {
 
     li {
       list-style: disc;
-      margin-left: 18px;
+      margin-inline-start: 18px;
     }
   }
 
@@ -226,7 +226,7 @@ code {
 
     &.select .hint {
       margin-top: 6px;
-      margin-left: 150px;
+      margin-inline-start: 150px;
     }
   }
 
@@ -381,13 +381,13 @@ code {
         width: auto;
         position: relative;
         padding-top: 5px;
-        padding-left: 25px;
+        padding-inline-start: 25px;
         flex: 1 1 auto;
       }
 
       input[type='checkbox'] {
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         top: 5px;
         margin: 0;
       }
@@ -518,10 +518,10 @@ code {
     font-weight: 500;
     outline: 0;
     margin-bottom: 10px;
-    margin-right: 10px;
+    margin-inline-end: 10px;
 
     &:last-child {
-      margin-right: 0;
+      margin-inline-end: 0;
     }
 
     &:active,
@@ -573,8 +573,8 @@ code {
       no-repeat right 8px center / auto 16px;
     border: 1px solid darken($ui-base-color, 14%);
     border-radius: 4px;
-    padding-left: 10px;
-    padding-right: 30px;
+    padding-inline-start: 10px;
+    padding-inline-end: 30px;
     height: 41px;
   }
 
@@ -589,7 +589,7 @@ code {
 
     &__append {
       position: absolute;
-      right: 3px;
+      inset-inline-end: 3px;
       top: 1px;
       padding: 10px;
       padding-bottom: 9px;
@@ -607,7 +607,7 @@ code {
         display: block;
         position: absolute;
         top: 0;
-        right: 0;
+        inset-inline-end: 0;
         bottom: 1px;
         width: 5px;
         background-image: linear-gradient(
@@ -781,7 +781,7 @@ code {
 
   li {
     display: inline-block;
-    margin-right: 10px;
+    margin-inline-end: 10px;
   }
 
   a {
@@ -867,7 +867,8 @@ code {
   flex: 0 0 auto;
   background: $simple-background-color;
   padding: 4px;
-  margin: 0 10px 20px 0;
+  margin-inline-end: 10px;
+  margin-bottom: 20px;
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   display: inline-block;
 
@@ -940,7 +941,7 @@ code {
 
   .actions {
     padding: 30px 0;
-    padding-right: 20px;
+    padding-inline-end: 20px;
     flex: 0 0 auto;
   }
 }
@@ -993,7 +994,7 @@ code {
   border-radius: 4px;
   display: flex;
   align-items: center;
-  padding-right: 4px;
+  padding-inline-end: 4px;
   position: relative;
   top: 1px;
   transition: border-color 300ms linear;
diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.scss
index 6170877b22..29b1f162b4 100644
--- a/app/javascript/flavours/glitch/styles/modal.scss
+++ b/app/javascript/flavours/glitch/styles/modal.scss
@@ -25,7 +25,7 @@
       height: 100%;
       position: absolute;
       bottom: 0;
-      left: 0;
+      inset-inline-start: 0;
     }
   }
 }
diff --git a/app/javascript/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.scss
index a4ce14a094..6f1cf0589e 100644
--- a/app/javascript/flavours/glitch/styles/polls.scss
+++ b/app/javascript/flavours/glitch/styles/polls.scss
@@ -277,7 +277,7 @@
     border: 1px solid darken($simple-background-color, 14%);
     border-radius: 4px;
     padding: 6px 10px;
-    padding-right: 30px;
+    padding-inline-end: 30px;
   }
 
   .icon-button.disabled {
diff --git a/app/javascript/flavours/glitch/styles/rich_text.scss b/app/javascript/flavours/glitch/styles/rich_text.scss
index e608183534..5ea3ca7f84 100644
--- a/app/javascript/flavours/glitch/styles/rich_text.scss
+++ b/app/javascript/flavours/glitch/styles/rich_text.scss
@@ -13,8 +13,8 @@
   }
 
   blockquote {
-    padding-left: 10px;
-    border-left: 3px solid $darker-text-color;
+    padding-inline-start: 10px;
+    border-inline-start: 3px solid $darker-text-color;
     color: $darker-text-color;
     white-space: normal;
 
@@ -75,7 +75,7 @@
 
   ul,
   ol {
-    margin-left: 2em;
+    margin-inline-start: 2em;
 
     p {
       margin: 0;
diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss
index 64a5c2c03d..ebc35bb0ce 100644
--- a/app/javascript/flavours/glitch/styles/rtl.scss
+++ b/app/javascript/flavours/glitch/styles/rtl.scss
@@ -1,131 +1,43 @@
 body.rtl {
   direction: rtl;
 
-  .column-header > button {
-    text-align: right;
-    padding-left: 0;
-    padding-right: 15px;
-  }
-
-  .radio-button__input {
-    margin-right: 0;
-    margin-left: 10px;
-  }
-
-  .display-name {
-    text-align: right;
-  }
-
-  .notification__message {
-    margin-left: 0;
-    margin-right: 68px;
+  .reactions-bar {
+    direction: rtl;
   }
 
   .drawer__inner__mastodon > img {
     transform: scaleX(-1);
   }
 
-  .notification__favourite-icon-wrapper {
-    left: auto;
-    right: -26px;
-  }
-
-  .column-link__icon,
-  .column-header__icon {
-    margin-right: 0;
-    margin-left: 5px;
-  }
-
-  .compose-form .character-counter__wrapper {
-    margin-right: 0;
-    margin-left: 4px;
-  }
-
   .boost-modal__status-time {
     float: left;
   }
 
-  .navigation-bar__profile {
-    margin-left: 0;
-    margin-right: 8px;
-  }
-
-  .search__input {
+  .compose-form .autosuggest-textarea__textarea {
     padding-right: 10px;
-    padding-left: 30px;
-  }
-
-  .search__icon .fa {
-    right: auto;
-    left: 10px;
+    padding-left: 10px + 22px;
   }
 
   .columns-area {
     direction: rtl;
   }
 
-  .column-header__buttons {
-    left: 0;
-    right: auto;
-    margin-left: 0;
-    margin-right: -15px;
-  }
-
-  .column-inline-form .icon-button {
-    margin-left: 0;
-    margin-right: 5px;
-  }
-
-  .column-header__links .text-btn {
-    margin-left: 10px;
-    margin-right: 0;
+  .react-swipeable-view-container > * {
+    direction: rtl;
   }
 
   .account__avatar-wrapper {
     float: right;
   }
 
-  .column-header__back-button {
-    padding-left: 5px;
-    padding-right: 0;
-  }
-
   .column-header__setting-arrows {
     float: left;
-
-    .column-header__setting-btn {
-      &:first-child {
-        padding-left: 7px;
-        padding-right: 5px;
-      }
-
-      &:last-child {
-        padding-right: 7px;
-        padding-left: 5px;
-        margin-right: 5px;
-        margin-left: 0;
-      }
-    }
-  }
-
-  .setting-toggle__label {
-    margin-left: 0;
-    margin-right: 8px;
   }
 
   .setting-meta__label {
     float: left;
   }
 
-  .status__avatar {
-    margin-left: 10px;
-    margin-right: 0;
-
-    // Those are used for public pages
-    left: auto;
-    right: 10px;
-  }
-
   .activity-stream .status.light {
     padding-left: 10px;
     padding-right: 68px;
@@ -142,16 +54,6 @@ body.rtl {
     padding-left: 0;
   }
 
-  .status__prepend {
-    margin-left: 0;
-    margin-right: 58px;
-  }
-
-  .status__prepend-icon-wrapper {
-    left: auto;
-    right: -26px;
-  }
-
   .activity-stream .pre-header .pre-header__icon {
     left: auto;
     right: 42px;
@@ -162,138 +64,34 @@ body.rtl {
     margin-left: 8px;
   }
 
-  .account__avatar-overlay-overlay {
-    right: auto;
-    left: 0;
-  }
-
-  .column-back-button--slim-button {
-    right: auto;
-    left: 0;
-  }
-
   .status__relative-time,
   .activity-stream .status.light .status__header .status__meta {
     float: left;
     text-align: left;
   }
 
-  .status__action-bar {
-    &__counter {
-      margin-right: 0;
-      margin-left: 11px;
-
-      .status__action-bar-button {
-        margin-right: 0;
-        margin-left: 4px;
-      }
-    }
-  }
-
   .status__action-bar-button {
     float: right;
-    margin-right: 0;
-    margin-left: 18px;
   }
 
   .status__action-bar-dropdown {
     float: right;
   }
 
-  .privacy-dropdown__dropdown {
-    margin-left: 0;
-    margin-right: 40px;
-  }
-
-  .privacy-dropdown__option__icon {
-    margin-left: 10px;
-    margin-right: 0;
-  }
-
   .detailed-status__display-name .display-name {
     text-align: right;
   }
 
   .detailed-status__display-avatar {
-    margin-right: 0;
-    margin-left: 10px;
     float: right;
   }
 
-  .detailed-status__favorites,
-  .detailed-status__reblogs {
-    margin-left: 0;
-    margin-right: 6px;
-  }
-
-  .fa-ul {
-    margin-left: 2.14285714em;
-  }
-
-  .fa-li {
-    left: auto;
-    right: -2.14285714em;
-  }
-
   .admin-wrapper {
     direction: rtl;
   }
 
-  .admin-wrapper .sidebar ul a i.fa,
-  a.table-action-link i.fa {
-    margin-right: 0;
-    margin-left: 5px;
-  }
-
-  .simple_form .check_boxes .checkbox label {
-    padding-left: 0;
-    padding-right: 25px;
-  }
-
-  .simple_form .input.with_label.boolean label.checkbox {
-    padding-left: 25px;
-    padding-right: 0;
-  }
-
-  .simple_form .check_boxes .checkbox input[type='checkbox'],
-  .simple_form .input.boolean input[type='checkbox'] {
-    left: auto;
-    right: 0;
-  }
-
-  .simple_form .input.radio_buttons .radio {
-    left: auto;
-    right: 0;
-  }
-
-  .simple_form .input.radio_buttons .radio > label {
-    padding-right: 28px;
-    padding-left: 0;
-  }
-
-  .simple_form .input-with-append .input input {
-    padding-left: 142px;
-    padding-right: 0;
-  }
-
-  .simple_form .input.boolean label.checkbox {
-    left: auto;
-    right: 0;
-  }
-
-  .simple_form .input.boolean .label_input,
-  .simple_form .input.boolean .hint {
-    padding-left: 0;
-    padding-right: 28px;
-  }
-
   .simple_form .label_input__append {
-    right: auto;
-    left: 3px;
-
     &::after {
-      right: auto;
-      left: 0;
       background-image: linear-gradient(
         to left,
         rgba(darken($ui-base-color, 10%), 0),
@@ -308,49 +106,6 @@ body.rtl {
       no-repeat left 8px center / auto 16px;
   }
 
-  .table th,
-  .table td {
-    text-align: right;
-  }
-
-  .filters .filter-subset {
-    margin-right: 0;
-    margin-left: 45px;
-  }
-
-  @media screen and (min-width: 631px) {
-    .column,
-    .drawer {
-      padding-left: 5px;
-      padding-right: 5px;
-
-      &:first-child {
-        padding-left: 5px;
-        padding-right: 10px;
-      }
-    }
-
-    .columns-area > div {
-      .column,
-      .drawer {
-        padding-left: 5px;
-        padding-right: 5px;
-      }
-    }
-  }
-
-  .columns-area--mobile .column,
-  .columns-area--mobile .drawer {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .card__bar .display-name {
-    margin-left: 0;
-    margin-right: 15px;
-    text-align: right;
-  }
-
   .fa-chevron-left::before {
     content: '\F054';
   }
@@ -358,14 +113,4 @@ body.rtl {
   .fa-chevron-right::before {
     content: '\F053';
   }
-
-  .column-back-button__icon {
-    margin-right: 0;
-    margin-left: 5px;
-  }
-
-  .simple_form .input.radio_buttons .radio > label input {
-    left: auto;
-    right: 0;
-  }
 }
diff --git a/app/javascript/flavours/glitch/styles/statuses.scss b/app/javascript/flavours/glitch/styles/statuses.scss
index f7037d9dc5..77e9d38bdd 100644
--- a/app/javascript/flavours/glitch/styles/statuses.scss
+++ b/app/javascript/flavours/glitch/styles/statuses.scss
@@ -93,7 +93,7 @@
     width: 20px;
     height: auto;
     vertical-align: middle;
-    margin-right: 5px;
+    margin-inline-end: 5px;
     fill: $primary-text-color;
   }
 
@@ -154,11 +154,12 @@ a.button.logo-button {
   }
 
   .status {
-    padding: 15px 15px 15px (48px + 15px * 2);
+    padding: 15px;
+    padding-inline-start: (48px + 15px * 2);
     min-height: 48px + 2px;
 
     &__avatar {
-      left: 15px;
+      inset-inline-start: 15px;
       top: 17px;
 
       .account__avatar {
@@ -175,7 +176,7 @@ a.button.logo-button {
       padding: 8px 0;
       padding-bottom: 2px;
       margin: initial;
-      margin-left: 48px + 15px * 2;
+      margin-inline-start: 48px + 15px * 2;
       padding-top: 15px;
     }
 
@@ -184,7 +185,7 @@ a.button.logo-button {
       margin: initial;
       float: initial;
       width: auto;
-      left: -32px;
+      inset-inline-start: -32px;
     }
 
     .media-gallery,
diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss
index 14daf591e7..0c730f1a79 100644
--- a/app/javascript/flavours/glitch/styles/tables.scss
+++ b/app/javascript/flavours/glitch/styles/tables.scss
@@ -10,7 +10,7 @@
     line-height: 18px;
     vertical-align: top;
     border-top: 1px solid $ui-base-color;
-    text-align: left;
+    text-align: start;
     background: darken($ui-base-color, 4%);
   }
 
@@ -91,12 +91,12 @@
 
       &:first-child {
         border-radius: 4px 0 0;
-        border-left: 1px solid darken($ui-base-color, 8%);
+        border-inline-start: 1px solid darken($ui-base-color, 8%);
       }
 
       &:last-child {
         border-radius: 0 4px 0 0;
-        border-right: 1px solid darken($ui-base-color, 8%);
+        border-inline-end: 1px solid darken($ui-base-color, 8%);
       }
     }
   }
@@ -125,7 +125,7 @@ button.table-action-link,
 a.table-action-link {
   text-decoration: none;
   display: inline-block;
-  margin-right: 5px;
+  margin-inline-end: 5px;
   padding: 0 10px;
   color: $darker-text-color;
   font-weight: 500;
@@ -136,11 +136,11 @@ a.table-action-link {
 
   i.fa {
     font-weight: 400;
-    margin-right: 5px;
+    margin-inline-end: 5px;
   }
 
   &:first-child {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 }
 
@@ -172,7 +172,7 @@ a.table-action-link {
     &__actions,
     &__content {
       padding: 8px 0;
-      padding-right: 16px;
+      padding-inline-end: 16px;
       flex: 1 1 auto;
     }
   }
@@ -188,8 +188,8 @@ a.table-action-link {
     align-items: center;
 
     &__actions {
-      text-align: right;
-      padding-right: 16px - 5px;
+      text-align: end;
+      padding-inline-end: 16px - 5px;
     }
   }
 
@@ -296,7 +296,7 @@ a.table-action-link {
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-right: 10px;
+        margin-inline-end: 10px;
 
         .emojione {
           width: 32px;
@@ -315,7 +315,7 @@ a.table-action-link {
 
       &__extra {
         flex: 0 0 auto;
-        text-align: right;
+        text-align: end;
         color: $darker-text-color;
         font-weight: 500;
       }
diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss
index 0f2b7ac5b3..f54d2f2e58 100644
--- a/app/javascript/flavours/glitch/styles/widgets.scss
+++ b/app/javascript/flavours/glitch/styles/widgets.scss
@@ -165,7 +165,7 @@
     margin-bottom: 15px;
 
     .fa {
-      margin-right: 5px;
+      margin-inline-end: 5px;
       color: $darker-text-color;
     }
   }
@@ -298,7 +298,7 @@
     padding: 10px;
 
     &:first-child {
-      text-align: left;
+      text-align: start;
     }
   }
 
@@ -329,9 +329,9 @@
 
   tbody td.accounts-table__extra {
     width: 120px;
-    text-align: right;
+    text-align: end;
     color: $darker-text-color;
-    padding-right: 16px;
+    padding-inline-end: 16px;
 
     a {
       text-decoration: none;