From 0e490542a7ebe441b3930fe76eac3cc7ff54659a Mon Sep 17 00:00:00 2001
From: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>
Date: Thu, 20 Apr 2023 10:03:43 -0700
Subject: [PATCH] RTL

---
 .gitignore                                    |   1 +
 .stylelintrc.js                               |  40 +
 app/locale.ts                                 |  62 +-
 app/main.ts                                   |   2 +
 images/icons/v2/chevron-left-20.svg           |   1 +
 package.json                                  |   7 +-
 settings.html                                 |   2 +-
 .../src/components/ArtFrame.module.scss       |  11 +-
 .../src/components/ArtPackPreview.module.scss |   9 +-
 .../src/components/ConfirmModal.module.scss   |   2 +-
 .../src/elements/Button.module.scss           |   6 +-
 .../src/elements/ConfirmDialog.module.scss    |   6 +-
 .../src/elements/CopyText.module.scss         |   3 +-
 .../src/elements/DropZone.module.scss         |   3 +-
 .../src/elements/LabeledCheckbox.module.scss  |   2 +-
 .../src/elements/LabeledInput.module.scss     |   6 +-
 .../src/elements/MessageBubble.module.scss    |   3 +-
 .../src/elements/MessageMeta.module.scss      |   2 +-
 .../src/elements/MessageSticker.module.scss   |   3 +-
 .../src/elements/PageHeader.module.scss       |  11 +-
 .../src/elements/StickerPreview.module.scss   |   7 +-
 .../src/elements/Toast.module.scss            |   3 +-
 sticker-creator/src/index.scss                |   3 +-
 .../src/routes/art/AppStage.module.scss       |  25 +-
 .../src/routes/art/MetaStage.module.scss      |   4 +-
 .../src/routes/art/UploadStage.module.scss    |   3 +-
 stylesheets/_conversation.scss                |  34 +-
 stylesheets/_emoji.scss                       |   6 +-
 stylesheets/_global.scss                      |  78 +-
 stylesheets/_mixins.scss                      |  98 +-
 stylesheets/_modules.scss                     | 844 ++++++++++--------
 stylesheets/_options.scss                     |   2 +-
 .../components/AddGroupMembersModal.scss      |   2 +-
 .../AddUserToAnotherGroupModal.scss           |   3 +-
 stylesheets/components/AudioCapture.scss      |   5 +-
 stylesheets/components/Avatar.scss            |   4 +-
 stylesheets/components/AvatarEditor.scss      |   6 +-
 .../components/AvatarModalButtons.scss        |   4 +-
 stylesheets/components/AvatarPreview.scss     |   4 +-
 stylesheets/components/AvatarTextEditor.scss  |   2 +-
 stylesheets/components/BadgeDialog.scss       |   6 +-
 .../BadgeSustainerInstructionsDialog.scss     |   3 +-
 .../components/BetterAvatarBubble.scss        |   2 +-
 stylesheets/components/Button.scss            |  12 +-
 stylesheets/components/CallingButton.scss     |  17 +-
 .../CallingScreenSharingController.scss       |   7 +-
 .../CallingSelectPresentingSourcesModal.scss  |   2 +-
 stylesheets/components/ChatColorPicker.scss   |   6 +-
 stylesheets/components/Checkbox.scss          |   2 +-
 stylesheets/components/CircleCheckbox.scss    |   6 +-
 stylesheets/components/CompositionArea.scss   |  30 +-
 stylesheets/components/CompositionInput.scss  |  41 +-
 .../components/CompositionRecording.scss      |   8 +-
 .../components/CompositionRecordingDraft.scss |   3 +-
 .../components/CompositionTextArea.scss       |   9 +-
 stylesheets/components/ContactModal.scss      |   9 +-
 stylesheets/components/ContactPill.scss       |   6 +-
 stylesheets/components/ContactPills.scss      |   3 +-
 .../ContactSpoofingReviewDialog.scss          |   5 +-
 .../ContactSpoofingReviewDialogPerson.scss    |   5 +-
 stylesheets/components/ContextMenu.scss       |  14 +-
 .../components/ConversationDetails.scss       |  42 +-
 .../components/ConversationHeader.scss        |  38 +-
 stylesheets/components/ConversationHero.scss  |  14 +-
 .../ConversationMergeNotification.scss        |   9 +-
 stylesheets/components/ConversationView.scss  |   3 +-
 stylesheets/components/CustomColorEditor.scss |   8 +-
 .../CustomizingPreferredReactionsModal.scss   |   3 +-
 stylesheets/components/DebugLogWindow.scss    |   5 +-
 .../components/DisappearingTimeDialog.scss    |   5 +-
 .../components/DisappearingTimerSelect.scss   |   2 +-
 .../EditConversationAttributesModal.scss      |   9 +-
 .../components/EditHistoryMessagesModal.scss  |   3 +-
 .../components/EditUsernameModalBody.scss     |  11 +-
 .../components/ForwardMessageModal.scss       |  10 +-
 stylesheets/components/GradientDial.scss      |   9 +-
 stylesheets/components/GroupDialog.scss       |  17 +-
 stylesheets/components/GroupInput.scss        |   2 +-
 stylesheets/components/HueSlider.scss         |   4 +-
 stylesheets/components/IncomingCallBar.scss   |  17 +-
 stylesheets/components/Input.scss             |  13 +-
 .../InstallScreenChoosingDeviceNameStep.scss  |   3 +-
 .../components/InstallScreenErrorStep.scss    |   7 +-
 .../InstallScreenQrCodeNotScannedStep.scss    |   6 +-
 .../components/InstallScreenSignalLogo.scss   |   4 +-
 .../components/InstallScreenUpdateDialog.scss |  12 +-
 stylesheets/components/LeftPaneDialog.scss    |  23 +-
 .../components/LeftPaneSearchInput.scss       |   9 +-
 stylesheets/components/Lightbox.scss          |  39 +-
 stylesheets/components/ListTile.scss          |  10 +-
 stylesheets/components/MediaEditor.scss       |  22 +-
 .../components/MediaQualitySelector.scss      |   9 +-
 stylesheets/components/MessageAudio.scss      |   8 +-
 stylesheets/components/MessageBody.scss       |   3 +-
 stylesheets/components/MessageDetail.scss     |  21 +-
 stylesheets/components/MiniPlayer.scss        |  11 +-
 stylesheets/components/Modal.scss             |  28 +-
 stylesheets/components/MyStories.scss         |  13 +-
 .../components/OutgoingGiftBadgeModal.scss    |   6 +-
 stylesheets/components/PermissionsPopup.scss  |   2 +-
 stylesheets/components/PlaybackButton.scss    |   2 +-
 .../components/PlaybackRateButton.scss        |   8 +-
 stylesheets/components/Preferences.scss       |  25 +-
 stylesheets/components/ProfileEditor.scss     |   6 +-
 stylesheets/components/Quote.scss             |  53 +-
 .../components/ReactionPickerPicker.scss      |  35 +-
 stylesheets/components/RecordingComposer.scss |   9 +-
 .../components/SafetyNumberChangeDialog.scss  |  22 +-
 .../components/SafetyNumberViewer.scss        |  12 +-
 stylesheets/components/ScrollDownButton.scss  |   5 +-
 stylesheets/components/SearchInput.scss       |  18 +-
 .../SearchResultsLoadingFakeRow.scss          |   8 +-
 stylesheets/components/Select.scss            |   8 +-
 stylesheets/components/SelectModeActions.scss |   3 +-
 stylesheets/components/SendStoryModal.scss    |  26 +-
 .../components/SignalConnectionsModal.scss    |   9 +-
 stylesheets/components/Slider.scss            |   2 +-
 stylesheets/components/StagedLinkPreview.scss |  11 +-
 stylesheets/components/StickerManager.scss    |  24 +-
 stylesheets/components/Stories.scss           |  22 +-
 .../components/StoriesSettingsModal.scss      |  28 +-
 stylesheets/components/StoryCreator.scss      |  26 +-
 stylesheets/components/StoryDetailsModal.scss |  10 +-
 stylesheets/components/StoryImage.scss        |   2 +-
 stylesheets/components/StoryLinkPreview.scss  |  12 +-
 stylesheets/components/StoryListItem.scss     |  12 +-
 stylesheets/components/StoryViewer.scss       |  64 +-
 .../components/StoryViewsNRepliesModal.scss   |  42 +-
 stylesheets/components/SystemMessage.scss     |  16 +-
 stylesheets/components/TextAttachment.scss    |  17 +-
 .../components/TimelineDateHeader.scss        |   3 +-
 .../components/TimelineFloatingHeader.scss    |   2 +-
 stylesheets/components/TimelineWarning.scss   |   3 +-
 stylesheets/components/TimelineWarnings.scss  |   2 +-
 stylesheets/components/TitleBarContainer.scss |   4 +-
 stylesheets/components/Toast.scss             |  22 +-
 stylesheets/components/Waveform.scss          |   2 +-
 ts/background.ts                              |   5 +
 ts/components/AvatarPopup.tsx                 |   4 +-
 ts/components/AvatarTextEditor.tsx            |   1 +
 ts/components/CallingPreCallInfo.tsx          |   4 +-
 ts/components/DebugLogWindow.tsx              |   1 +
 ts/components/ForwardMessagesModal.tsx        |  18 +-
 ts/components/GradientDial.tsx                |   5 +-
 ts/components/IncomingCallBar.tsx             |   8 +-
 ts/components/Input.tsx                       |   4 +-
 ts/components/LeftPane.tsx                    |  12 +-
 ts/components/Lightbox.tsx                    |  17 +-
 ts/components/ListTile.stories.tsx            |  10 +-
 ts/components/ListView.tsx                    |   3 +-
 ts/components/MediaEditor.tsx                 |   5 +-
 ts/components/MiniPlayer.tsx                  |   4 +-
 ts/components/ProfileEditor.tsx               |   6 +-
 ts/components/SafetyNumberChangeDialog.tsx    |   3 +-
 ts/components/SendStoryModal.tsx              |   5 +-
 ts/components/SharedGroupNames.tsx            |   4 +-
 ts/components/Slider.tsx                      |   5 +-
 ts/components/StandaloneRegistration.tsx      |   1 +
 ts/components/StoriesSettingsModal.tsx        |  13 +-
 ts/components/StoryDistributionListName.tsx   |   3 +-
 ts/components/StoryViewer.tsx                 |   5 +-
 ts/components/TextAttachment.tsx              |   1 +
 ts/components/Tooltip.stories.tsx             |   4 +-
 ts/components/UserText.tsx                    |  12 +
 .../conversation/ChangeNumberNotification.tsx |   6 +-
 ts/components/conversation/ContactModal.tsx   |   5 +-
 .../ContactSpoofingReviewDialog.tsx           |   6 +-
 .../conversation/ConversationHeader.tsx       |  15 +-
 .../DeliveryIssueNotification.tsx             |   4 +-
 ts/components/conversation/Message.tsx        |  36 +-
 ts/components/conversation/MessageBody.tsx    |   6 +-
 .../conversation/WaveformScrubber.tsx         |   6 +-
 .../ConfirmAdditionsModal.tsx                 |   4 +-
 .../ConversationDetailsHeader.tsx             |   4 +-
 .../conversationList/GroupListItem.tsx        |   6 +-
 .../conversationList/PhoneNumberCheckbox.tsx  |   6 +-
 ts/components/emoji/EmojiPicker.tsx           |   3 +-
 .../InstallScreenChoosingDeviceNameStep.tsx   |   1 +
 .../leftPane/LeftPaneSearchHelper.tsx         |   4 +-
 ts/components/stickers/StickerButton.tsx      |   3 +-
 .../stickers/StickerManagerPackRow.tsx        |   3 +-
 .../stickers/StickerPreviewModal.tsx          |   3 +-
 ts/quill/mentions/completion.tsx              |   3 +-
 ts/state/ducks/user.ts                        |   1 +
 ts/state/smart/CallManager.tsx                |   2 +-
 .../quill/mentions/completion_test.tsx        |   7 +-
 ts/test-node/app/locale_test.ts               |  23 +-
 ts/test-node/app/menu_test.ts                 |  12 +-
 ts/types/RendererConfig.ts                    |   1 +
 ts/types/Util.ts                              |   2 +
 ts/util/keyboard.ts                           |  20 +
 ts/util/lint/exceptions.json                  |   8 +
 ts/util/setupI18n.ts                          |   3 +
 ts/window.d.ts                                |   2 +
 ts/windows/main/phase1-ipc.ts                 |   2 +
 yarn.lock                                     | 414 ++++++++-
 196 files changed, 2117 insertions(+), 1217 deletions(-)
 create mode 100644 .stylelintrc.js
 create mode 100644 images/icons/v2/chevron-left-20.svg
 create mode 100644 ts/components/UserText.tsx
 create mode 100644 ts/util/keyboard.ts

diff --git a/.gitignore b/.gitignore
index 2676ec8882..ef4be0355a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,7 @@ release/
 /sql/
 /start.sh
 .eslintcache
+.stylelintcache
 tsconfig.tsbuildinfo
 .smartling-source.sh
 
diff --git a/.stylelintrc.js b/.stylelintrc.js
new file mode 100644
index 0000000000..b0bab44123
--- /dev/null
+++ b/.stylelintrc.js
@@ -0,0 +1,40 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+module.exports = {
+  extends: [
+    'stylelint-config-recommended-scss',
+    'stylelint-config-css-modules',
+  ],
+  plugins: ['stylelint-use-logical-spec'],
+  rules: {
+    // Disabled from recommended set to get stylelint working initially
+    'block-no-empty': null,
+    'declaration-block-no-duplicate-properties': null,
+    'declaration-block-no-shorthand-property-overrides': null,
+    'font-family-no-missing-generic-family-keyword': null,
+    'no-duplicate-selectors': null,
+    'no-descending-specificity': null,
+    'selector-pseudo-element-no-unknown': null,
+    'scss/at-import-partial-extension': null,
+    'scss/comment-no-empty': null,
+    'scss/no-global-function-names': null,
+    'scss/operator-no-newline-after': null,
+    'scss/operator-no-unspaced': null,
+    'scss/function-no-unknown': null,
+    'unit-no-unknown': null,
+    // RTL
+    'liberty/use-logical-spec': [
+      'always',
+      {
+        except: [/\btop\b/, /\bbottom\b/, /\bwidth\b/, /\bheight\b/],
+      },
+    ],
+    'declaration-property-value-disallowed-list': {
+      // Use dir="ltr/rtl" instead
+      direction: ['ltr', 'rtl', 'auto'],
+      transform: [/translate3d\(/, /translateX\(/, /translate\(/],
+      translate: [/./],
+    },
+  },
+};
diff --git a/app/locale.ts b/app/locale.ts
index fa24602a6e..fc6568e924 100644
--- a/app/locale.ts
+++ b/app/locale.ts
@@ -5,11 +5,17 @@ import { join } from 'path';
 import { readFileSync } from 'fs';
 import { merge } from 'lodash';
 import * as LocaleMatcher from '@formatjs/intl-localematcher';
+import { z } from 'zod';
 import { setupI18n } from '../ts/util/setupI18n';
 
 import type { LoggerType } from '../ts/types/Logging';
 import type { LocaleMessagesType } from '../ts/types/I18N';
 import type { LocalizerType } from '../ts/types/Util';
+import * as Errors from '../ts/types/errors';
+
+const TextInfoSchema = z.object({
+  direction: z.enum(['ltr', 'rtl']),
+});
 
 function getLocaleMessages(locale: string): LocaleMessagesType {
   const targetFile = join(__dirname, '..', '_locales', locale, 'messages.json');
@@ -17,25 +23,64 @@ function getLocaleMessages(locale: string): LocaleMessagesType {
   return JSON.parse(readFileSync(targetFile, 'utf-8'));
 }
 
+export type LocaleDirection = 'ltr' | 'rtl';
+
 export type LocaleType = {
   i18n: LocalizerType;
   name: string;
+  direction: LocaleDirection;
   messages: LocaleMessagesType;
 };
 
+function getLocaleDirection(
+  localeName: string,
+  logger: LoggerType
+): LocaleDirection {
+  const locale = new Intl.Locale(localeName);
+  // TC39 proposal is now `locale.getTextInfo()` but in browsers its currently
+  // `locale.textInfo`
+  try {
+    // @ts-expect-error -- TS doesn't know about this method
+    if (typeof locale.getTextInfo === 'function') {
+      return TextInfoSchema.parse(
+        // @ts-expect-error -- TS doesn't know about this method
+        locale.getTextInfo()
+      ).direction;
+    }
+    // @ts-expect-error -- TS doesn't know about this property
+    if (typeof locale.textInfo === 'object') {
+      return TextInfoSchema.parse(
+        // @ts-expect-error -- TS doesn't know about this property
+        locale.textInfo
+      ).direction;
+    }
+  } catch (error) {
+    logger.error(
+      'locale: Error getting text info for locale',
+      Errors.toLogFormat(error)
+    );
+  }
+  return 'ltr';
+}
+
 function finalize(
   messages: LocaleMessagesType,
   backupMessages: LocaleMessagesType,
-  localeName: string
+  localeName: string,
+  logger: LoggerType
 ) {
   // We start with english, then overwrite that with anything present in locale
   const finalMessages = merge(backupMessages, messages);
 
   const i18n = setupI18n(localeName, finalMessages);
 
+  const direction = getLocaleDirection(localeName, logger);
+  logger.info(`locale: Text info direction for ${localeName}: ${direction}`);
+
   return {
     i18n,
     name: localeName,
+    direction,
     messages: finalMessages,
   };
 }
@@ -45,17 +90,11 @@ export function load({
   logger,
 }: {
   preferredSystemLocales: Array<string>;
-  logger: Pick<LoggerType, 'warn' | 'info'>;
+  logger: LoggerType;
 }): LocaleType {
   if (preferredSystemLocales == null) {
     throw new TypeError('locale: `preferredSystemLocales` is required');
   }
-  if (!logger.info) {
-    throw new TypeError('locale: `logger.info` is required');
-  }
-  if (!logger.warn) {
-    throw new TypeError('locale: `logger.warn` is required');
-  }
 
   if (preferredSystemLocales.length === 0) {
     logger.warn('locale: `preferredSystemLocales` was empty');
@@ -83,5 +122,10 @@ export function load({
   const matchedLocaleMessages = getLocaleMessages(matchedLocale);
   const englishMessages = getLocaleMessages('en');
 
-  return finalize(matchedLocaleMessages, englishMessages, matchedLocale);
+  return finalize(
+    matchedLocaleMessages,
+    englishMessages,
+    matchedLocale,
+    logger
+  );
 }
diff --git a/app/main.ts b/app/main.ts
index 4433faca6e..f909afc323 100644
--- a/app/main.ts
+++ b/app/main.ts
@@ -177,6 +177,7 @@ const defaultWebPrefs = {
     getEnvironment() !== Environment.Production ||
     !isProduction(app.getVersion()),
   spellcheck: false,
+  enableBlinkFeatures: 'CSSPseudoDir,CSSLogical',
 };
 
 const DISABLE_GPU =
@@ -2259,6 +2260,7 @@ ipc.on('get-config', async event => {
   const parsed = rendererConfigSchema.safeParse({
     name: packageJson.productName,
     resolvedTranslationsLocale: getResolvedMessagesLocale().name,
+    resolvedTranslationsLocaleDirection: getResolvedMessagesLocale().direction,
     preferredSystemLocales: getPreferredSystemLocales(),
     version: app.getVersion(),
     buildCreation: config.get<number>('buildCreation'),
diff --git a/images/icons/v2/chevron-left-20.svg b/images/icons/v2/chevron-left-20.svg
new file mode 100644
index 0000000000..a7d56fadf1
--- /dev/null
+++ b/images/icons/v2/chevron-left-20.svg
@@ -0,0 +1 @@
+<svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.7168 9.71191C1.7168 9.46289 1.812 9.25049 2.00244 9.06006L7.71533 3.47168C7.87646 3.31055 8.07422 3.22998 8.30859 3.22998C8.78467 3.22998 9.16553 3.59619 9.16553 4.07227C9.16553 4.30664 9.07031 4.51904 8.90918 4.6875L3.75293 9.71191L8.90918 14.7363C9.06299 14.8975 9.16553 15.1099 9.16553 15.3442C9.16553 15.8276 8.78467 16.1938 8.30859 16.1938C8.07422 16.1938 7.87646 16.1133 7.71533 15.9521L2.00244 10.3638C1.8047 10.1733 1.7168 9.96094 1.7168 9.71191Z" fill="#000"/></svg>
diff --git a/package.json b/package.json
index e850b266e2..51fbf16d86 100644
--- a/package.json
+++ b/package.json
@@ -44,11 +44,12 @@
     "test-node-coverage": "nyc --reporter=lcov --reporter=text mocha --recursive test/modules ts/test-node ts/test-both",
     "test-lint-intl": "ts-node ./build/intl-linter/linter.ts --test",
     "eslint": "eslint --cache . --cache-strategy content --max-warnings 0",
-    "lint": "run-s --print-label lint-prettier check:types eslint",
+    "lint": "run-s --print-label lint-prettier lint-css check:types eslint",
     "lint-deps": "node ts/util/lint/linter.js",
     "lint-license-comments": "ts-node ts/util/lint/license_comments.ts",
     "lint-prettier": "pprettier --check '**/*.{ts,tsx,d.ts,js,json,html,scss,md,yml,yaml}' '!node_modules/**'",
     "lint-intl": "ts-node ./build/intl-linter/linter.ts",
+    "lint-css": "stylelint '**/*.scss' --cache",
     "danger:local": "./danger/danger.sh local --base main",
     "danger:ci": "./danger/danger.sh ci --base origin/main",
     "format": "pprettier --write '**/*.{ts,tsx,d.ts,js,json,html,scss,md,yml,yaml}' '!node_modules/**'",
@@ -285,6 +286,10 @@
     "sass-loader": "10.2.0",
     "sinon": "11.1.1",
     "style-loader": "1.0.0",
+    "stylelint": "15.4.0",
+    "stylelint-config-css-modules": "4.2.0",
+    "stylelint-config-recommended-scss": "10.0.0",
+    "stylelint-use-logical-spec": "5.0.0",
     "svgo": "3.0.2",
     "terser-webpack-plugin": "5.1.1",
     "ts-loader": "4.1.0",
diff --git a/settings.html b/settings.html
index 4cec0187bb..464a434f73 100644
--- a/settings.html
+++ b/settings.html
@@ -1,7 +1,7 @@
 <!-- Copyright 2021 Signal Messenger, LLC -->
 <!-- SPDX-License-Identifier: AGPL-3.0-only -->
 
-<html>
+<html dir="auto">
   <head>
     <meta
       http-equiv="Content-Security-Policy"
diff --git a/sticker-creator/src/components/ArtFrame.module.scss b/sticker-creator/src/components/ArtFrame.module.scss
index 59a3c0147f..d30612b16d 100644
--- a/sticker-creator/src/components/ArtFrame.module.scss
+++ b/sticker-creator/src/components/ArtFrame.module.scss
@@ -124,7 +124,7 @@ $emoji-height: 64px;
   width: $width - (2 * $guide-offset);
   height: $height - (2 * $guide-offset);
   position: absolute;
-  left: $guide-offset - $border-width;
+  inset-inline-start: $guide-offset - $border-width;
   top: $guide-offset - $border-width;
   pointer-events: none;
 
@@ -132,7 +132,7 @@ $emoji-height: 64px;
     width: $emoji-width;
     height: $emoji-height;
     position: absolute;
-    left: calc(($width - $emoji-width) / 2);
+    inset-inline-start: calc(($width - $emoji-width) / 2);
     top: calc(($height - $emoji-height) / 2);
   }
 }
@@ -140,7 +140,7 @@ $emoji-height: 64px;
 .close-button {
   position: absolute;
   top: 8px;
-  right: 8px;
+  inset-inline-end: 8px;
   width: 20px;
   height: 20px;
 
@@ -169,7 +169,7 @@ $emoji-height: 64px;
   height: 32px;
   position: absolute;
   top: 6px;
-  right: 6px;
+  inset-inline-end: 6px;
   border: none;
   border-radius: 16px;
   padding: 0;
@@ -202,7 +202,8 @@ $emoji-height: 64px;
 
 .emoji-name-input {
   width: 100%;
-  padding: 7px 8px;
+  padding-block: 7px;
+  padding-inline: 8px;
   border-radius: 4px;
   background-color: transparent;
   font-size: 14px;
diff --git a/sticker-creator/src/components/ArtPackPreview.module.scss b/sticker-creator/src/components/ArtPackPreview.module.scss
index 6d144674e2..2eaf382cf3 100644
--- a/sticker-creator/src/components/ArtPackPreview.module.scss
+++ b/sticker-creator/src/components/ArtPackPreview.module.scss
@@ -30,7 +30,8 @@
 
 .title-bar {
   height: 36px;
-  padding: 9px 16px;
+  padding-block: 9px;
+  padding-inline: 16px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -61,7 +62,8 @@
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  padding: 0 16px 0 12px;
+  padding-block: 0;
+  padding-inline: 12px 16px;
   overflow: auto;
   justify-items: center;
 
@@ -76,7 +78,8 @@
 }
 
 .meta {
-  padding: 18px 16px;
+  padding-block: 18px;
+  padding-inline: 16px;
   display: flex;
 
   @include light-theme {
diff --git a/sticker-creator/src/components/ConfirmModal.module.scss b/sticker-creator/src/components/ConfirmModal.module.scss
index 0893b48372..14f79b26fb 100644
--- a/sticker-creator/src/components/ConfirmModal.module.scss
+++ b/sticker-creator/src/components/ConfirmModal.module.scss
@@ -9,6 +9,6 @@
   justify-content: center;
   align-items: center;
   position: fixed;
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
 }
diff --git a/sticker-creator/src/elements/Button.module.scss b/sticker-creator/src/elements/Button.module.scss
index 1bfd60cc0e..856f56669b 100644
--- a/sticker-creator/src/elements/Button.module.scss
+++ b/sticker-creator/src/elements/Button.module.scss
@@ -9,7 +9,8 @@
   border: none;
   min-width: 80px;
   height: 36px;
-  padding: 0 25px;
+  padding-block: 0;
+  padding-inline: 25px;
   border-radius: 4px;
   display: flex;
   justify-content: center;
@@ -89,7 +90,8 @@
   composes: base;
   height: 28px;
   border-radius: 15px;
-  padding: 0 17px;
+  padding-block: 0;
+  padding-inline: 17px;
 
   @include light-theme() {
     color: $color-gray-90;
diff --git a/sticker-creator/src/elements/ConfirmDialog.module.scss b/sticker-creator/src/elements/ConfirmDialog.module.scss
index d938e98ea2..b073e6c400 100644
--- a/sticker-creator/src/elements/ConfirmDialog.module.scss
+++ b/sticker-creator/src/elements/ConfirmDialog.module.scss
@@ -9,7 +9,8 @@
   max-width: 468px;
   width: 100%;
   height: 138px;
-  padding: 16px 16px 8px 16px;
+  padding-block: 16px 8px;
+  padding-inline: 16px;
   display: flex;
   flex-direction: column;
   border-radius: 8px;
@@ -70,7 +71,8 @@
   composes: base;
   height: 28px;
   border-radius: 15px;
-  padding: 0 17px;
+  padding-block: 0;
+  padding-inline: 17px;
 
   @include light-theme() {
     color: $color-gray-90;
diff --git a/sticker-creator/src/elements/CopyText.module.scss b/sticker-creator/src/elements/CopyText.module.scss
index f415641f98..306134d5a9 100644
--- a/sticker-creator/src/elements/CopyText.module.scss
+++ b/sticker-creator/src/elements/CopyText.module.scss
@@ -19,7 +19,8 @@
   flex-grow: 1;
   height: 36px;
   line-height: 34px;
-  padding: 0 12px;
+  padding-block: 0;
+  padding-inline: 12px;
   border-radius: 4px;
   background-color: transparent;
   font-size: 14px;
diff --git a/sticker-creator/src/elements/DropZone.module.scss b/sticker-creator/src/elements/DropZone.module.scss
index 029f6f7ad1..831997a292 100644
--- a/sticker-creator/src/elements/DropZone.module.scss
+++ b/sticker-creator/src/elements/DropZone.module.scss
@@ -24,7 +24,8 @@
 }
 
 .text {
-  margin: 16px 0 0 0;
+  margin-block: 16px 0;
+  margin-inline: 0;
   font-family: $inter;
   font-size: 14px;
   font-weight: normal;
diff --git a/sticker-creator/src/elements/LabeledCheckbox.module.scss b/sticker-creator/src/elements/LabeledCheckbox.module.scss
index add5761157..8216187fc8 100644
--- a/sticker-creator/src/elements/LabeledCheckbox.module.scss
+++ b/sticker-creator/src/elements/LabeledCheckbox.module.scss
@@ -54,7 +54,7 @@
 }
 
 .label {
-  margin-left: 11px;
+  margin-inline-start: 11px;
   position: relative;
   user-select: none;
 }
diff --git a/sticker-creator/src/elements/LabeledInput.module.scss b/sticker-creator/src/elements/LabeledInput.module.scss
index 4f3f5bf569..6e59cc86b5 100644
--- a/sticker-creator/src/elements/LabeledInput.module.scss
+++ b/sticker-creator/src/elements/LabeledInput.module.scss
@@ -25,7 +25,8 @@
   width: 100%;
   height: 34px;
   line-height: 34px;
-  padding: 0 12px;
+  padding-block: 0;
+  padding-inline: 12px;
   border-radius: 4px;
   background-color: transparent;
   font-size: 14px;
@@ -47,7 +48,8 @@
 
   &:focus {
     outline: none;
-    padding: 0 11px;
+    padding-block: 0;
+    padding-inline: 11px;
 
     @include light-theme() {
       border: 2px solid $color-ultramarine;
diff --git a/sticker-creator/src/elements/MessageBubble.module.scss b/sticker-creator/src/elements/MessageBubble.module.scss
index 190755bb7e..361bf0d57b 100644
--- a/sticker-creator/src/elements/MessageBubble.module.scss
+++ b/sticker-creator/src/elements/MessageBubble.module.scss
@@ -6,7 +6,8 @@
 
 .base {
   background-color: $color-ultramarine;
-  padding: 6px 12px;
+  padding-block: 6px;
+  padding-inline: 12px;
   border-radius: 18px;
   color: $color-white-alpha-90;
   font: {
diff --git a/sticker-creator/src/elements/MessageMeta.module.scss b/sticker-creator/src/elements/MessageMeta.module.scss
index 764f7f0435..b443b1c5ae 100644
--- a/sticker-creator/src/elements/MessageMeta.module.scss
+++ b/sticker-creator/src/elements/MessageMeta.module.scss
@@ -13,7 +13,7 @@
 }
 
 .item {
-  margin-left: 6px;
+  margin-inline-start: 6px;
   font: {
     size: 11px;
     family: $inter;
diff --git a/sticker-creator/src/elements/MessageSticker.module.scss b/sticker-creator/src/elements/MessageSticker.module.scss
index 01ba728cf9..9e184df369 100644
--- a/sticker-creator/src/elements/MessageSticker.module.scss
+++ b/sticker-creator/src/elements/MessageSticker.module.scss
@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .base {
-  padding: 6px 12px;
+  padding-block: 6px;
+  padding-inline: 12px;
 }
 
 .image {
diff --git a/sticker-creator/src/elements/PageHeader.module.scss b/sticker-creator/src/elements/PageHeader.module.scss
index 117e0bac11..fabf9d9489 100644
--- a/sticker-creator/src/elements/PageHeader.module.scss
+++ b/sticker-creator/src/elements/PageHeader.module.scss
@@ -12,9 +12,11 @@
   margin-bottom: 30px;
   border-bottom-width: 1px;
   border-bottom-style: solid;
-  padding: 0 64px;
+  padding-block: 0;
+  padding-inline: 64px;
   @include small-screen() {
-    padding: 0 32px;
+    padding-block: 0;
+    padding-inline: 32px;
   }
   display: flex;
   flex-direction: row;
@@ -32,11 +34,12 @@
 
 .guidelines {
   text-decoration: none;
-  padding: 12px 16px;
+  padding-block: 12px;
+  padding-inline: 16px;
 }
 
 .icon {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
 
 .grow {
diff --git a/sticker-creator/src/elements/StickerPreview.module.scss b/sticker-creator/src/elements/StickerPreview.module.scss
index 229ee87af4..0f9babcf1d 100644
--- a/sticker-creator/src/elements/StickerPreview.module.scss
+++ b/sticker-creator/src/elements/StickerPreview.module.scss
@@ -24,7 +24,8 @@
 
 .frame {
   width: 50%;
-  padding: 12px 12px 3px 12px;
+  padding-block: 12px 3px;
+  padding-inline: 12px;
 }
 
 .frame-light {
@@ -77,7 +78,7 @@
 .arrow-left {
   composes: arrow;
   border-width: 8px 8px 8px 0;
-  left: -8px;
+  inset-inline-start: -8px;
 
   @include light-theme() {
     border-color: transparent $color-white transparent transparent;
@@ -91,7 +92,7 @@
 .arrow-right {
   composes: arrow;
   border-width: 8px 0 8px 8px;
-  right: -8px;
+  inset-inline-end: -8px;
 
   @include light-theme() {
     border-color: transparent transparent transparent $color-white;
diff --git a/sticker-creator/src/elements/Toast.module.scss b/sticker-creator/src/elements/Toast.module.scss
index c611ebb353..5d2a611a7a 100644
--- a/sticker-creator/src/elements/Toast.module.scss
+++ b/sticker-creator/src/elements/Toast.module.scss
@@ -6,7 +6,8 @@
 @import '../fonts.scss';
 
 .base {
-  padding: 8px 12px;
+  padding-block: 8px;
+  padding-inline: 12px;
   border-radius: 4px;
   border: none;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 20px 0px rgba(0, 0, 0, 0.33);
diff --git a/sticker-creator/src/index.scss b/sticker-creator/src/index.scss
index d5da601f33..a2cb46de50 100644
--- a/sticker-creator/src/index.scss
+++ b/sticker-creator/src/index.scss
@@ -46,7 +46,8 @@ button.grey {
   border-radius: 5px;
   border: solid 1px $color-gray-25;
   cursor: pointer;
-  margin: 1em auto;
+  margin-block: 1em;
+  margin-inline: auto;
   padding: 1em;
   font-family: inherit;
 
diff --git a/sticker-creator/src/routes/art/AppStage.module.scss b/sticker-creator/src/routes/art/AppStage.module.scss
index 1ad32eaf80..80970be7b8 100644
--- a/sticker-creator/src/routes/art/AppStage.module.scss
+++ b/sticker-creator/src/routes/art/AppStage.module.scss
@@ -31,10 +31,12 @@
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  padding: 0 64px;
+  padding-block: 0;
+  padding-inline: 64px;
 
   @include small-screen() {
-    padding: 0 32px;
+    padding-block: 0;
+    padding-inline: 32px;
   }
 }
 
@@ -47,13 +49,15 @@
 }
 
 .footer {
-  margin: 16px 64px;
+  margin-block: 16px;
+  margin-inline: 64px;
   display: flex;
   flex-direction: row;
   align-items: center;
 
   @include small-screen() {
-    margin: 16px 32px;
+    margin-block: 16px;
+    margin-inline: 32px;
   }
 }
 
@@ -64,12 +68,19 @@
 }
 
 .button {
-  margin-left: 12px;
+  margin-inline-start: 12px;
 }
 
 .toaster {
   position: fixed;
   bottom: 16px;
-  left: 50%;
-  transform: translate(-50%, 0px);
+  inset-inline-start: 50%;
+  &:dir(ltr) {
+    // stylelint-disable-next-line declaration-property-value-disallowed-list
+    transform: translate(-50%, 0px);
+  }
+  &:dir(rtl) {
+    // stylelint-disable-next-line declaration-property-value-disallowed-list
+    transform: translate(50%, 0px)
+  }
 }
diff --git a/sticker-creator/src/routes/art/MetaStage.module.scss b/sticker-creator/src/routes/art/MetaStage.module.scss
index 9e9966faad..355279d30c 100644
--- a/sticker-creator/src/routes/art/MetaStage.module.scss
+++ b/sticker-creator/src/routes/art/MetaStage.module.scss
@@ -90,7 +90,7 @@
 .edit-button {
   position: absolute;
   top: 6px;
-  right: 6px;
+  inset-inline-end: 6px;
   content: '';
   width: 32px;
   height: 32px;
@@ -111,7 +111,7 @@
     width: 24px;
     height: 24px;
     top: 5px;
-    left: 5px;
+    inset-inline-start: 5px;
     mask-image: url(/src/assets/icons/compose-outline-24.svg);
     mask-size: 22px;
     -webkit-mask-image: url(/src/assets/icons/compose-outline-24.svg);
diff --git a/sticker-creator/src/routes/art/UploadStage.module.scss b/sticker-creator/src/routes/art/UploadStage.module.scss
index 08068e8393..d3325099b6 100644
--- a/sticker-creator/src/routes/art/UploadStage.module.scss
+++ b/sticker-creator/src/routes/art/UploadStage.module.scss
@@ -27,5 +27,6 @@
 }
 
 .progress {
-  margin: 24px 0;
+  margin-block: 24px;
+  margin-inline: 0;
 }
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index dd0e8f395a..6378ae313d 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -3,12 +3,26 @@
 
 @import './mixins';
 
-@keyframes panel--in {
+@keyframes panel--in--ltr {
   from {
+    // stylelint-disable-next-line declaration-property-value-disallowed-list
     transform: translateX(500px);
   }
 
   to {
+    // stylelint-disable-next-line declaration-property-value-disallowed-list
+    transform: translateX(0);
+  }
+}
+
+@keyframes panel--in--rtl {
+  from {
+    // stylelint-disable-next-line declaration-property-value-disallowed-list
+    transform: translateX(-500px);
+  }
+
+  to {
+    // stylelint-disable-next-line declaration-property-value-disallowed-list
     transform: translateX(0);
   }
 }
@@ -24,7 +38,7 @@
 
   .panel {
     height: calc(100% - #{$header-height} - var(--title-bar-drag-area-height));
-    left: 0;
+    inset-inline-start: 0;
     overflow-y: overlay;
     position: absolute;
     top: calc(#{$header-height} + var(--title-bar-drag-area-height));
@@ -42,7 +56,12 @@
 
   .panel {
     &:not(.main) {
-      animation: panel--in 350ms cubic-bezier(0.17, 0.17, 0, 1);
+      &:dir(ltr) {
+        animation: panel--in--ltr 350ms cubic-bezier(0.17, 0.17, 0, 1);
+      }
+      &:dir(rtl) {
+        animation: panel--in--rtl 350ms cubic-bezier(0.17, 0.17, 0, 1);
+      }
     }
 
     &--static {
@@ -50,7 +69,14 @@
     }
 
     &--remove {
-      transform: translateX(100%);
+      &:dir(ltr) {
+        // stylelint-disable-next-line declaration-property-value-disallowed-list
+        transform: translateX(100%);
+      }
+      &:dir(rtl) {
+        // stylelint-disable-next-line declaration-property-value-disallowed-list
+        transform: translateX(-100%);
+      }
       transition: transform 350ms cubic-bezier(0.17, 0.17, 0, 1);
     }
   }
diff --git a/stylesheets/_emoji.scss b/stylesheets/_emoji.scss
index 5ba924741b..adc859b9c0 100644
--- a/stylesheets/_emoji.scss
+++ b/stylesheets/_emoji.scss
@@ -21,7 +21,8 @@ span.emoji {
 span.emoji-sizer {
   line-height: 0.81em;
   font-size: 1em;
-  margin: -2px 0;
+  margin-block: -2px;
+  margin-inline: 0;
 }
 
 span.emoji-outer {
@@ -46,8 +47,7 @@ span.emoji-inner {
 img.emoji {
   height: 1.4em;
   margin-bottom: -5px;
-  margin-left: 2px;
-  margin-right: 2px;
+  margin-inline: 2px;
   vertical-align: baseline;
   width: 1.4em;
 }
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 0af6f6f2f9..2177a32f7e 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -81,8 +81,7 @@ audio {
 .dark-overlay {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   bottom: 0;
 
   opacity: 0.25;
@@ -117,7 +116,8 @@ button.grey {
   border-radius: 5px;
   border: solid 1px $color-gray-25;
   cursor: pointer;
-  margin: 1em auto;
+  margin-block: 1em;
+  margin-inline: auto;
   padding: 1em;
   font-family: inherit;
 
@@ -174,7 +174,8 @@ $loading-height: 16px;
   position: relative;
   &::before {
     display: block;
-    margin: 0px auto;
+    margin-block: 0px;
+    margin-inline: auto;
     content: ' ';
     height: $loading-height;
     width: $loading-height;
@@ -189,7 +190,7 @@ $loading-height: 16px;
 
 .x {
   display: inline-block;
-  float: right;
+  float: inline-end;
   cursor: pointer;
   border-radius: 50%;
   width: 22px;
@@ -233,11 +234,11 @@ $loading-height: 16px;
 .app-loading-screen {
   z-index: $z-index-on-top-of-everything;
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   top: 0;
   bottom: 0;
-  padding: 0 16px;
+  padding-block: 0;
+  padding-inline: 16px;
 
   &--without-titlebar {
     /* There is no titlebar during loading screen on Windows */
@@ -263,15 +264,17 @@ $loading-height: 16px;
   .container {
     display: flex;
     gap: 7px;
-    margin: 6px 0 22px 0;
+    margin-block: 6px 22px;
+    margin-inline: 0;
 
     .dot {
       width: 14px;
       height: 14px;
       border: 3px solid $color-white;
       border-radius: 50%;
-      float: left;
-      margin: 0 6px;
+      float: inline-start;
+      margin-block: 0;
+      margin-inline: 6px;
       transform: scale(0);
 
       animation: loading 1500ms ease infinite 0ms;
@@ -294,7 +297,8 @@ $loading-height: 16px;
       max-width: 400px;
       overflow: hidden;
       width: 100%;
-      margin: 12px 0 26px 0;
+      margin-block: 12px 26px;
+      margin-inline: 0;
     }
 
     &--bar {
@@ -303,7 +307,14 @@ $loading-height: 16px;
       display: block;
       height: 100%;
       width: 100%;
-      transform: translateX(-100%);
+      &:dir(ltr) {
+        // stylelint-disable-next-line declaration-property-value-disallowed-list
+        transform: translateX(-100%);
+      }
+      &:dir(rtl) {
+        // stylelint-disable-next-line declaration-property-value-disallowed-list
+        transform: translateX(100%);
+      }
       transition: transform 500ms linear;
     }
   }
@@ -318,8 +329,7 @@ $loading-height: 16px;
 
 .full-screen-flow {
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   top: 0;
   bottom: 0;
 
@@ -376,15 +386,13 @@ $loading-height: 16px;
 
   .body-text {
     max-width: 22em;
-    text-align: left;
-    margin-left: auto;
-    margin-right: auto;
+    text-align: start;
+    margin-inline: auto;
   }
   .body-text-wide {
     max-width: 30em;
-    text-align: left;
-    margin-left: auto;
-    margin-right: auto;
+    text-align: start;
+    margin-inline: auto;
   }
 
   form {
@@ -394,11 +402,11 @@ $loading-height: 16px;
   .step {
     height: 100%;
     width: 100%;
-    padding: 70px 0 50px;
+    padding-block: 70px 50px;
+    padding-inline: 0;
   }
   .step-body {
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline: auto;
     max-width: 35em;
   }
 
@@ -493,8 +501,7 @@ $loading-height: 16px;
     min-width: 300px;
     padding: 0.75em;
     margin-top: 1em;
-    margin-left: 0.5em;
-    margin-right: 0.5em;
+    margin-inline: 0.5em;
     color: $color-white;
     background: $color-ultramarine;
     box-shadow: 2px 2px 4px $color-black-alpha-40;
@@ -523,7 +530,8 @@ $loading-height: 16px;
     @include button-reset;
 
     display: block;
-    margin: 0.5em auto;
+    margin-block: 0.5em;
+    margin-inline: auto;
     text-align: center;
     text-decoration: underline;
     color: $color-ultramarine;
@@ -567,13 +575,11 @@ $loading-height: 16px;
     bottom: 50px;
     margin-top: auto;
     padding-bottom: 2em;
-    padding-left: 20px;
-    padding-right: 20px;
+    padding-inline: 20px;
 
     .instructions {
-      text-align: left;
-      margin-left: auto;
-      margin-right: auto;
+      text-align: start;
+      margin-inline: auto;
       margin-bottom: 2em;
       margin-top: 2em;
       max-width: 30em;
@@ -582,16 +588,16 @@ $loading-height: 16px;
       clear: both;
     }
     .android {
-      float: left;
+      float: inline-start;
     }
     .apple {
-      float: right;
+      float: inline-end;
     }
     .label {
-      float: left;
+      float: inline-start;
     }
     .body {
-      float: left;
+      float: inline-start;
     }
   }
 }
diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
index 7499e5feb2..9506f4dce1 100644
--- a/stylesheets/_mixins.scss
+++ b/stylesheets/_mixins.scss
@@ -189,8 +189,68 @@
 
 // Icons
 
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return (
+      str-slice($string, 1, $index - 1) + $replace +
+        str-replace(
+          str-slice($string, $index + str-length($search)),
+          $search,
+          $replace
+        )
+    );
+  }
+
+  @return $string;
+}
+
+$rtl-icon-map: (
+  'chevron-left-16.svg': 'chevron-right-16.svg',
+  'chevron-right-16.svg': 'chevron-left-16.svg',
+
+  'chevron-left-20.svg': 'chevron-right-20.svg',
+  'chevron-right-20.svg': 'chevron-left-20.svg',
+
+  'chevron-left-24.svg': 'chevron-right-24.svg',
+  'chevron-right-24.svg': 'chevron-left-24.svg',
+
+  'arrow-left-32.svg': 'arrow-right-32.svg',
+  'arrow-right-32.svg': 'arrow-left-32.svg',
+
+  // Ignored cases:
+  'phone-right-outline-24.svg': '',
+  'phone-right-solid-24.svg': '',
+);
+
+@function get-rtl-svg($svg) {
+  @each $ltr, $rtl in $rtl-icon-map {
+    @if str-index($svg, $ltr) {
+      @if $rtl == '' {
+        @return $ltr;
+      }
+      @return str-replace($svg, $ltr, $rtl);
+    }
+  }
+  @if str-index($svg, 'left') or str-index($svg, 'right') {
+    @error "Missing RTL icon for #{$svg}";
+  }
+  @return false;
+}
+
 @mixin color-svg($svg, $color, $stretch: true, $mask-origin: null) {
-  -webkit-mask: url($svg) no-repeat center;
+  $rtl-svg: get-rtl-svg($svg);
+  @if $rtl-svg {
+    :dir(ltr) & {
+      -webkit-mask: url($svg) no-repeat center;
+    }
+    :dir(rtl) & {
+      -webkit-mask: url($rtl-svg) no-repeat center;
+    }
+  } @else {
+    -webkit-mask: url($svg) no-repeat center;
+  }
   @if $stretch {
     -webkit-mask-size: 100%;
   }
@@ -260,7 +320,7 @@
 
   position: absolute;
   top: 8px;
-  right: 8px;
+  inset-inline-end: 8px;
   width: 18px;
   height: 18px;
   z-index: $z-index-above-base;
@@ -514,7 +574,8 @@
 
 @mixin button-small {
   @include rounded-corners;
-  padding: 7px 14px;
+  padding-block: 7px;
+  padding-inline: 14px;
 }
 
 // Modals
@@ -522,7 +583,8 @@
 @mixin modal-reset {
   @include popper-shadow();
   border-radius: 8px;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   max-height: 100%;
   max-width: 360px;
   padding: 16px;
@@ -546,7 +608,7 @@
   @include button-reset;
 
   position: absolute;
-  right: 12px;
+  inset-inline-end: 12px;
   top: 12px;
 
   height: 24px;
@@ -646,7 +708,8 @@
 
 @mixin normal-input {
   @include font-body-1;
-  padding: 8px 12px;
+  padding-block: 8px;
+  padding-inline: 12px;
   border-radius: 6px;
   border-width: 2px;
   border-style: solid;
@@ -752,3 +815,26 @@
     @content;
   }
 }
+
+@mixin position-absolute-center {
+  position: absolute;
+  top: 50%;
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  left: 50%;
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  transform: translate(-50%, -50%);
+}
+
+@mixin position-absolute-center-x {
+  position: absolute;
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  left: 50%;
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  transform: translateX(-50%);
+}
+
+@mixin position-absolute-center-y {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 52a065a694..fbb1f7f369 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -9,7 +9,7 @@
 .module-title-bar-drag-area {
   -webkit-app-region: drag;
   height: var(--title-bar-drag-area-height);
-  left: 0;
+  inset-inline-start: 0;
   position: fixed;
   top: 0;
   width: 100%;
@@ -25,7 +25,8 @@
 
 .module-splash-screen__logo {
   @include color-svg('../images/signal-logo.svg', $color-white);
-  margin: 24px 0;
+  margin-block: 24px;
+  margin-inline: 0;
 
   &.module-img--256 {
     height: 256px;
@@ -60,8 +61,7 @@
   flex-direction: row;
   align-items: stretch;
   outline: none;
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-inline: 16px;
   transition-property: background, translate;
   transition-duration: 0.1s;
   transition-timing-function: ease-out;
@@ -86,18 +86,23 @@
 
 @keyframes module-message__shake {
   0% {
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
     transform: translateX(0px);
   }
   25% {
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
     transform: translateX(-5px);
   }
   50% {
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
     transform: translateX(0px);
   }
   75% {
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
     transform: translateX(5px);
   }
   100% {
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
     transform: translateX(0px);
   }
 }
@@ -148,24 +153,24 @@
 }
 
 .module-message__buttons--incoming {
-  padding-left: 8px;
+  padding-inline-start: 8px;
 
   & > * {
-    margin-left: 12px;
+    margin-inline-start: 12px;
     &:first-child {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
   }
 }
 
 .module-message__buttons--outgoing {
-  padding-right: 8px;
+  padding-inline-end: 8px;
   flex-direction: row-reverse;
 
   & > * {
-    margin-right: 12px;
+    margin-inline-end: 12px;
     &:first-child {
-      margin-right: 0;
+      margin-inline-end: 0;
     }
   }
 }
@@ -280,11 +285,11 @@
 }
 
 .module-message__error--outgoing {
-  left: 8px;
+  inset-inline-start: 8px;
 }
 
 .module-message__error--incoming {
-  right: 8px;
+  inset-inline-end: 8px;
 }
 
 .module-message__container-outer {
@@ -322,12 +327,9 @@ $message-padding-horizontal: 12px;
   min-width: 0px;
   overflow: hidden;
 
-  padding: {
-    left: $message-padding-horizontal;
-    right: $message-padding-horizontal;
-    top: $message-padding-vertical;
-    bottom: $message-padding-vertical;
-  }
+  padding-inline: $message-padding-horizontal;
+  padding-top: $message-padding-vertical;
+  padding-bottom: $message-padding-vertical;
 
   .module-message--collapsed-above & {
     margin-top: 1px;
@@ -337,16 +339,16 @@ $message-padding-horizontal: 12px;
   }
 
   .module-message--incoming.module-message--collapsed-above & {
-    border-top-left-radius: $collapsed-border-radius;
+    border-start-start-radius: $collapsed-border-radius;
   }
   .module-message--incoming.module-message--collapsed-below & {
-    border-bottom-left-radius: $collapsed-border-radius;
+    border-end-start-radius: $collapsed-border-radius;
   }
   .module-message--outgoing.module-message--collapsed-above & {
-    border-top-right-radius: $collapsed-border-radius;
+    border-start-end-radius: $collapsed-border-radius;
   }
   .module-message--outgoing.module-message--collapsed-below & {
-    border-bottom-right-radius: $collapsed-border-radius;
+    border-end-end-radius: $collapsed-border-radius;
   }
 }
 
@@ -369,7 +371,14 @@ $message-padding-horizontal: 12px;
 
 .module-message__wrapper--select-mode {
   .module-message--incoming {
-    translate: calc(16px + 22px) 0;
+    &:dir(ltr) {
+      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+      translate: calc(16px + 22px) 0;
+    }
+    &:dir(rtl) {
+      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+      translate: calc(-16px - 22px) 0;
+    }
   }
 }
 
@@ -384,8 +393,8 @@ $message-padding-horizontal: 12px;
 .module-message__select-checkbox {
   position: absolute;
   top: 50%;
-  left: 16px;
-  translate: 0 -50%;
+  inset-inline-start: 16px;
+  transform: translateY(-50%);
   width: 18px;
   height: 18px;
   border-radius: 9999px;
@@ -433,7 +442,7 @@ $message-padding-horizontal: 12px;
   padding-top: 4px;
 
   .module-message__text--outgoing {
-    text-align: right;
+    text-align: end;
   }
 }
 
@@ -553,7 +562,7 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__tap-to-view__spinner-container {
-  margin-right: 6px;
+  margin-inline-end: 6px;
 
   flex-grow: 0;
   flex-shrink: 0;
@@ -563,7 +572,7 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__tap-to-view__icon {
-  margin-right: 6px;
+  margin-inline-end: 6px;
 
   flex-grow: 0;
   flex-shrink: 0;
@@ -630,12 +639,9 @@ $message-padding-horizontal: 12px;
   text-align: center;
   position: relative;
 
-  margin: {
-    left: -$message-padding-horizontal;
-    right: -$message-padding-horizontal;
-    top: -$message-padding-vertical;
-    bottom: -$message-padding-vertical;
-  }
+  margin-inline: -$message-padding-horizontal;
+  margin-top: -$message-padding-vertical;
+  margin-bottom: -$message-padding-vertical;
 
   line-height: 0;
   overflow: hidden;
@@ -660,12 +666,9 @@ $message-padding-horizontal: 12px;
   // To ensure that images are centered if they aren't full width of bubble
   text-align: center;
 
-  margin: {
-    left: -$message-padding-horizontal;
-    right: -$message-padding-horizontal;
-    top: -$message-padding-vertical - 1px;
-    bottom: -$message-padding-vertical + 3px;
-  }
+  margin-inline: -$message-padding-horizontal;
+  margin-top: -$message-padding-vertical - 1px;
+  margin-bottom: -$message-padding-vertical + 3px;
 
   &--with-content-below {
     margin-bottom: 5px;
@@ -717,16 +720,14 @@ $message-padding-horizontal: 12px;
   user-select: none;
 }
 .module-message__generic-attachment__spinner-container {
-  padding-left: 4px;
-  padding-right: 4px;
+  padding-inline: 4px;
 }
 
 .module-message__generic-attachment__icon {
   background: url('../images/file-gradient.svg') no-repeat center;
   height: 44px;
   width: 56px;
-  margin-left: -13px;
-  margin-right: -14px;
+  margin-inline: -13px -14px;
   margin-bottom: -4px;
 
   // So we can center the extension text inside this icon
@@ -739,7 +740,7 @@ $message-padding-horizontal: 12px;
   position: absolute;
 
   top: -1px;
-  right: -4px;
+  inset-inline-end: -4px;
 
   height: 16px;
   width: 16px;
@@ -767,8 +768,7 @@ $message-padding-horizontal: 12px;
   // Along with flow layout in parent item, centers text
   text-align: center;
   width: 25px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 
   // We don't have much room for text here, cut it off without ellipse
   overflow-x: hidden;
@@ -780,7 +780,7 @@ $message-padding-horizontal: 12px;
 
 .module-message__generic-attachment__text {
   flex-grow: 1;
-  margin-left: 8px;
+  margin-inline-start: 8px;
   // The width of the icon plus our 8px margin plus 1px leeway
   max-width: calc(100% - 36px);
 }
@@ -853,8 +853,7 @@ $message-padding-horizontal: 12px;
 
   display: block;
 
-  margin-left: -$message-padding-horizontal;
-  margin-right: -$message-padding-horizontal;
+  margin-inline: -$message-padding-horizontal;
   width: calc(100% + 24px);
   outline: none;
 
@@ -874,7 +873,8 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__link-preview__content {
-  padding: $message-padding-vertical $message-padding-horizontal;
+  padding-block: $message-padding-vertical;
+  padding-inline: $message-padding-horizontal;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -889,7 +889,7 @@ $message-padding-horizontal: 12px;
 
 .module-message__link-preview__icon_container {
   margin: -2px;
-  margin-right: 8px;
+  margin-inline-end: 8px;
   display: inline-block;
 }
 
@@ -951,8 +951,7 @@ $message-padding-horizontal: 12px;
     &:before {
       content: '•';
       font-size: 50%;
-      margin-left: 0.2rem;
-      margin-right: 0.2rem;
+      margin-inline: 0.2rem;
     }
   }
 }
@@ -1107,7 +1106,7 @@ $message-padding-horizontal: 12px;
   font-style: normal;
 
   &--inline {
-    float: right;
+    float: inline-end;
     margin-top: -14px;
   }
 }
@@ -1117,7 +1116,7 @@ $message-padding-horizontal: 12px;
   @include font-caption;
   color: $color-gray-60;
   cursor: pointer;
-  margin-right: 6px;
+  margin-inline-end: 6px;
   z-index: $z-index-base;
 
   @include dark-theme {
@@ -1138,7 +1137,7 @@ $message-padding-horizontal: 12px;
   width: 100%;
   // Because this is absolutely positioned, we 100% is too big, take it down by parent
   //   padding sizes.
-  padding-right: 24px;
+  padding-inline-end: 24px;
 
   // This is so all clicks go right through to the underlying image.
   pointer-events: none;
@@ -1215,9 +1214,8 @@ $message-padding-horizontal: 12px;
   width: 12px;
   height: 12px;
   display: inline-block;
-  margin-left: 6px;
+  margin-inline: 6px;
   // High margin to leave space for the increase when we go to two checks
-  margin-right: 6px;
   margin-bottom: 2px;
 }
 
@@ -1245,7 +1243,7 @@ $message-padding-horizontal: 12px;
 }
 .module-message__metadata__status-icon--delivered {
   // We reduce the margin size to keep the overall width the same
-  margin-right: 0px;
+  margin-inline-end: 0px;
   width: 18px;
 
   @include light-theme {
@@ -1258,7 +1256,7 @@ $message-padding-horizontal: 12px;
 .module-message__metadata__status-icon--read,
 .module-message__metadata__status-icon--viewed {
   // We reduce the margin size to keep the overall width the same
-  margin-right: 0px;
+  margin-inline-end: 0px;
   width: 18px;
 
   @include light-theme {
@@ -1294,7 +1292,7 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__metadata__spinner-container {
-  margin-left: 6px;
+  margin-inline-start: 6px;
 }
 
 .module-message__send-message-button {
@@ -1306,8 +1304,7 @@ $message-padding-horizontal: 12px;
 
   margin-top: $message-padding-vertical;
   margin-bottom: -$message-padding-vertical;
-  margin-left: -$message-padding-horizontal;
-  margin-right: -$message-padding-horizontal;
+  margin-inline: -$message-padding-horizontal;
 
   text-align: center;
   padding: 10px;
@@ -1344,7 +1341,7 @@ $message-padding-horizontal: 12px;
   align-items: flex-end;
   display: flex;
   justify-content: center;
-  margin-right: 8px;
+  margin-inline-end: 8px;
   padding-bottom: 6px;
 
   &--with-reactions {
@@ -1358,12 +1355,9 @@ $message-padding-horizontal: 12px;
   background-color: $color-ultramarine;
   position: relative;
 
-  margin: {
-    left: -$message-padding-horizontal;
-    right: -$message-padding-horizontal;
-    top: -$message-padding-vertical;
-    bottom: $message-padding-vertical;
-  }
+  margin-inline: -$message-padding-horizontal;
+  margin-top: -$message-padding-vertical;
+  margin-bottom: $message-padding-vertical;
 
   &--outgoing {
     @include light-theme {
@@ -1381,8 +1375,7 @@ $message-padding-horizontal: 12px;
 
   &__ribbon-horizontal {
     position: absolute;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
     height: 16px;
     top: 50%;
     transform: translateY(-50%);
@@ -1390,22 +1383,16 @@ $message-padding-horizontal: 12px;
   }
 
   &__ribbon-vertical {
-    position: absolute;
+    @include position-absolute-center-x;
     top: 0;
     bottom: 0;
     width: 16px;
-    left: 50%;
-    transform: translateX(-50%);
     background-color: $color-white;
   }
 
   &__bow {
-    position: absolute;
-
     // Centered
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    @include position-absolute-center;
 
     // For proper alignment with the ribbons
     margin-top: 3px;
@@ -1461,9 +1448,8 @@ $message-padding-horizontal: 12px;
   &__badge {
     height: 64px;
     width: 64px;
-    margin-left: 4px;
+    margin-inline: 4px 12px;
     margin-top: 8px;
-    margin-right: 12px;
     margin-bottom: 16px;
     flex-grow: 0;
     flex-shrink: 0;
@@ -1522,8 +1508,7 @@ $message-padding-horizontal: 12px;
   &__button {
     @include button-reset;
     @include button-secondary;
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline: auto;
     width: 216px;
     margin-bottom: 7px;
     text-align: center;
@@ -1614,7 +1599,7 @@ $message-padding-horizontal: 12px;
   &__icon-check {
     height: 19px;
     width: 19px;
-    margin-right: 5px;
+    margin-inline-end: 5px;
     display: inline-block;
 
     &--incoming {
@@ -1666,13 +1651,13 @@ $message-padding-horizontal: 12px;
 
   &--incoming {
     align-self: flex-end;
-    padding-right: 8px;
-    margin-left: 8px;
+    padding-inline-end: 8px;
+    margin-inline-start: 8px;
   }
   &--outgoing {
     align-self: flex-start;
-    padding-left: 8px;
-    margin-right: 8px;
+    padding-inline-start: 8px;
+    margin-inline-end: 8px;
   }
 }
 
@@ -1689,16 +1674,17 @@ $message-padding-horizontal: 12px;
 
   &--with-count {
     min-width: 40px;
-    padding: 0 6px;
+    padding-block: 0;
+    padding-inline: 6px;
   }
 
   &__count {
     @include font-caption-bold;
 
-    margin-left: 4px;
+    margin-inline-start: 4px;
 
     &--no-emoji {
-      margin-left: 0px;
+      margin-inline-start: 0px;
     }
 
     @include light-theme {
@@ -1753,7 +1739,7 @@ $message-padding-horizontal: 12px;
   width: 12px;
   height: 12px;
   display: inline-block;
-  margin-left: 6px;
+  margin-inline-start: 6px;
   margin-bottom: 2px;
 
   @include dark-theme {
@@ -1837,8 +1823,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 
 .module-about {
   &__container {
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline: auto;
     max-width: 248px;
     text-align: center;
   }
@@ -1861,7 +1846,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 
     img.emoji {
       height: 1em;
-      margin-right: 3px;
+      margin-inline-end: 3px;
       margin-bottom: 3px;
       vertical-align: middle;
       width: 1em;
@@ -1905,13 +1890,12 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 }
 
 .module-embedded-contact__spinner-container {
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-inline: 5px;
 }
 
 .module-embedded-contact__text-container {
   flex-grow: 1;
-  margin-left: 8px;
+  margin-inline-start: 8px;
 
   max-width: calc(100% - 58px);
 }
@@ -1975,8 +1959,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 .module-contact-detail {
   text-align: center;
   max-width: 300px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 }
 
 .module-contact-detail__avatar {
@@ -2011,7 +1994,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 .module-contact-detail__send-message__inner {
   display: flex;
   align-items: center;
-  padding-right: 5px;
+  padding-inline-end: 5px;
 
   @include font-body-2-bold;
 }
@@ -2020,7 +2003,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   height: 17px;
   width: 18px;
   display: inline-block;
-  margin-right: 5px;
+  margin-inline-end: 5px;
   @include light-theme {
     @include color-svg(
       '../images/icons/v2/message-outline-24.svg',
@@ -2033,7 +2016,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 }
 
 .module-contact-detail__additional-contact {
-  text-align: left;
+  text-align: start;
   margin-top: 15px;
   padding-top: 8px;
 
@@ -2108,8 +2091,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   }
 
   &__icon-container {
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline: auto;
     display: inline-flex;
     flex-direction: row;
     align-items: center;
@@ -2144,8 +2126,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 .module-notification__icon {
   height: 24px;
   width: 24px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 }
 
 // Module: Contact List Item
@@ -2196,7 +2177,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 }
 
 .module-contact-list-item__text {
-  margin-left: 8px;
+  margin-inline-start: 8px;
 
   align-items: center;
   display: flex;
@@ -2244,7 +2225,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 }
 
 .module-contact-list-item__admin {
-  text-align: right;
+  text-align: end;
   height: 100%;
 
   @include font-body-2;
@@ -2287,7 +2268,8 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 
 .conversation-details-panel {
   max-width: 750px;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
 
   @at-root .conversation #{&} {
     overflow-y: auto;
@@ -2296,7 +2278,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 
 // Brought this up here to add specificity
 button.ConversationDetails__action-button {
-  margin-left: 16px;
+  margin-inline-start: 16px;
 }
 
 // Module: Media Gallery
@@ -2387,8 +2369,7 @@ button.ConversationDetails__action-button {
   flex-direction: column;
   flex-grow: 1;
   flex-shrink: 0;
-  margin-left: 8px;
-  margin-right: 8px;
+  margin-inline: 8px;
 }
 
 .module-document-list-item__file-size {
@@ -2410,7 +2391,7 @@ button.ConversationDetails__action-button {
   height: 94px;
   width: 94px;
   background-color: $color-gray-05;
-  margin-right: 4px;
+  margin-inline-end: 4px;
   margin-bottom: 4px;
   position: relative;
 
@@ -2431,8 +2412,7 @@ button.ConversationDetails__action-button {
   position: absolute;
   top: 15px;
   bottom: 15px;
-  left: 15px;
-  right: 15px;
+  inset-inline: 15px;
 }
 
 .module-media-grid-item__icon-image {
@@ -2444,12 +2424,7 @@ button.ConversationDetails__action-button {
 }
 
 .module-media-grid-item__circle-overlay {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-
-  transform: translate(-50%, -50%);
-
+  @include position-absolute-center;
   width: 42px;
   height: 42px;
   background-color: $color-white;
@@ -2457,11 +2432,7 @@ button.ConversationDetails__action-button {
 }
 
 .module-media-grid-item__play-overlay {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
+  @include position-absolute-center;
   height: 24px;
   width: 24px;
   @include color-svg(
@@ -2494,7 +2465,8 @@ button.ConversationDetails__action-button {
 // Module: Message Request Actions
 
 .module-message-request-actions {
-  padding: 8px 16px 12px 16px;
+  padding-block: 8px 12px;
+  padding-inline: 16px;
 
   @include light-theme {
     background: $color-white;
@@ -2535,7 +2507,7 @@ button.ConversationDetails__action-button {
       min-width: 80px;
 
       &:not(:last-of-type) {
-        margin-right: 8px;
+        margin-inline-end: 8px;
       }
     }
   }
@@ -2549,8 +2521,7 @@ button.ConversationDetails__action-button {
   height: calc(#{$header-height} + var(--title-bar-drag-area-height));
   width: 100%;
 
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-inline: 16px;
   padding-top: var(--title-bar-drag-area-height);
 
   display: flex;
@@ -2565,10 +2536,10 @@ button.ConversationDetails__action-button {
   }
 
   & > * {
-    margin-right: 12px;
+    margin-inline-end: 12px;
 
     &:last-child {
-      margin-right: 0;
+      margin-inline-end: 0;
     }
   }
 
@@ -2580,7 +2551,7 @@ button.ConversationDetails__action-button {
 
       .module-left-pane--width-narrow & {
         margin-bottom: 28px;
-        margin-right: 0;
+        margin-inline-end: 0;
         margin-top: 16px;
       }
     }
@@ -2593,7 +2564,7 @@ button.ConversationDetails__action-button {
       width: 8px;
       position: absolute;
       top: 0;
-      right: 0;
+      inset-inline-end: 0;
     }
   }
 
@@ -2679,9 +2650,10 @@ button.ConversationDetails__action-button {
     justify-content: center;
     min-width: 16px;
     overflow: hidden;
-    padding: 0 2px;
+    padding-block: 0;
+    padding-inline: 2px;
     position: absolute;
-    right: -6px;
+    inset-inline-end: -6px;
     top: -4px;
     user-select: none;
     z-index: $z-index-base;
@@ -2696,13 +2668,13 @@ button.ConversationDetails__action-button {
     display: inline-flex;
     height: 32px;
     justify-content: center;
-    margin-right: 20px;
+    margin-inline-end: 20px;
     padding: 2px;
     position: relative;
     width: 32px;
 
     .module-left-pane--width-narrow & {
-      margin-right: 0;
+      margin-inline-end: 0;
       margin-top: 28px;
       margin-bottom: 28px;
     }
@@ -2834,7 +2806,7 @@ button.ConversationDetails__action-button {
     display: flex;
     height: 100%;
     justify-content: center;
-    left: 0;
+    inset-inline-start: 0;
     position: absolute;
     top: 0;
     width: 100%;
@@ -2848,7 +2820,8 @@ button.ConversationDetails__action-button {
 
     .module-image-spinner {
       &__container {
-        margin: 12px auto;
+        margin-block: 12px;
+        margin-inline: auto;
       }
 
       &__arc {
@@ -2880,7 +2853,7 @@ button.ConversationDetails__action-button {
 .module-image__caption-icon {
   position: absolute;
   top: 6px;
-  left: 6px;
+  inset-inline-start: 6px;
 }
 
 .module-image--cropped {
@@ -2896,8 +2869,7 @@ button.ConversationDetails__action-button {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   z-index: $z-index-above-base;
 }
 
@@ -2918,8 +2890,9 @@ button.ConversationDetails__action-button {
   &__filesize {
     position: absolute;
     top: 10px;
-    left: 10px;
-    padding: 2px 8px;
+    inset-inline-start: 10px;
+    padding-block: 2px;
+    padding-inline: 8px;
 
     color: $color-white;
     background: $color-black-alpha-70;
@@ -2989,16 +2962,11 @@ button.module-image__border-overlay:focus {
   position: absolute;
   bottom: 0;
   z-index: $z-index-base;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
 }
 
 .module-image__play-overlay__circle {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
+  @include position-absolute-center;
   width: 48px;
   height: 48px;
   background-color: $color-white;
@@ -3006,10 +2974,7 @@ button.module-image__border-overlay:focus {
 }
 
 .module-image__play-overlay__icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  @include position-absolute-center;
 
   height: 24px;
   width: 24px;
@@ -3022,8 +2987,7 @@ button.module-image__border-overlay:focus {
 .module-image__text-container {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   bottom: 0;
   z-index: $z-index-above-above-base;
 
@@ -3091,8 +3055,7 @@ button.module-image__border-overlay:focus {
 
   height: 8px;
   width: 38px;
-  padding-left: 1px;
-  padding-right: 1px;
+  padding-inline: 1px;
 }
 
 .module-typing-animation__dot {
@@ -3185,8 +3148,8 @@ button.module-image__border-overlay:focus {
   display: flex;
   height: 36px;
   justify-content: center;
-  left: 50%;
-  margin-left: -20px;
+  inset-inline-start: 50%;
+  margin-inline-start: -20px;
   margin-top: -18px;
   position: absolute;
   top: 50%;
@@ -3219,7 +3182,7 @@ button.module-image__border-overlay:focus {
 
   position: absolute;
   top: 8px;
-  right: 16px;
+  inset-inline-end: 16px;
 
   width: 20px;
   height: 20px;
@@ -3242,8 +3205,8 @@ button.module-image__border-overlay:focus {
 
 .module-attachments__rail {
   margin-top: 12px;
-  margin-left: 12px;
-  padding-right: 12px;
+  margin-inline-start: 12px;
+  padding-inline-end: 12px;
   overflow-x: scroll;
   max-height: 142px;
   white-space: nowrap;
@@ -3252,7 +3215,7 @@ button.module-image__border-overlay:focus {
 }
 
 .module-staged-attachment {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 
   &.module-image::before {
     background: linear-gradient(
@@ -3313,8 +3276,7 @@ button.module-image__border-overlay:focus {
   background: url('../images/file-gradient.svg') no-repeat center;
   height: 44px;
   width: 56px;
-  margin-left: 32px;
-  margin-right: 32px;
+  margin-inline: 32px;
   margin-bottom: -4px;
 
   // So we can center the extension text inside this icon
@@ -3332,8 +3294,7 @@ button.module-image__border-overlay:focus {
   // Along with flow layout in parent item, centers text
   text-align: center;
   width: 25px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 
   // We don't have much room for text here, cut it off without ellipse
   overflow-x: hidden;
@@ -3399,12 +3360,7 @@ button.module-image__border-overlay:focus {
 }
 
 .module-staged-placeholder-attachment__plus-icon {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-
-  transform: translate(-50%, -50%);
-
+  @include position-absolute-center;
   height: 36px;
   width: 36px;
 
@@ -3422,7 +3378,8 @@ button.module-image__border-overlay:focus {
   }
 
   &__label {
-    margin: 0 0 7px;
+    margin-block: 0 7px;
+    margin-inline: 0;
     @include font-subtitle;
 
     @include light-theme() {
@@ -3438,10 +3395,12 @@ button.module-image__border-overlay:focus {
     gap: 9px;
     align-items: center;
     @include font-body-2;
-    padding: 22px 7px;
-    padding-left: 12px;
+    padding-block: 22px;
+    padding-inline: 7px;
+    padding-inline-start: 12px;
     border-radius: 18px;
-    margin: 0 -4px;
+    margin-block: 0;
+    margin-inline: -4px;
 
     @include light-theme() {
       background: $color-white-alpha-60;
@@ -3463,7 +3422,8 @@ button.module-image__border-overlay:focus {
   }
 
   &__note {
-    margin: 9px 0 0;
+    margin-block: 9px 0;
+    margin-inline: 0;
     @include font-body-1;
   }
 
@@ -3485,8 +3445,7 @@ button.module-image__border-overlay:focus {
 // Module: Spinner
 
 .module-spinner__container {
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   position: relative;
   height: 56px;
   width: 56px;
@@ -3495,7 +3454,7 @@ button.module-image__border-overlay:focus {
 .module-spinner__circle {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
 
   z-index: $z-index-above-base;
   height: 100%;
@@ -3506,7 +3465,7 @@ button.module-image__border-overlay:focus {
 .module-spinner__arc {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
 
   z-index: $z-index-above-above-base;
   height: 100%;
@@ -3644,7 +3603,8 @@ button.module-image__border-overlay:focus {
   &__header {
     width: 100%;
     min-height: 44px;
-    padding: 0px 8px;
+    padding-block: 0px;
+    padding-inline: 8px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -3655,7 +3615,8 @@ button.module-image__border-overlay:focus {
       min-height: 28px;
       border: none;
       border-radius: 18px;
-      padding: 0px 8px;
+      padding-block: 0px;
+      padding-inline: 8px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -3663,7 +3624,7 @@ button.module-image__border-overlay:focus {
       flex-shrink: 0;
 
       &:not(:first-of-type) {
-        margin-left: 4px;
+        margin-inline-start: 4px;
       }
 
       &:focus {
@@ -3703,14 +3664,15 @@ button.module-image__border-overlay:focus {
       }
 
       &__count {
-        margin-left: 4px;
+        margin-inline-start: 4px;
       }
     }
   }
 
   &__body {
     flex-grow: 1;
-    padding: 0 16px;
+    padding-block: 0;
+    padding-inline: 16px;
     overflow: auto;
 
     &__row {
@@ -3733,7 +3695,7 @@ button.module-image__border-overlay:focus {
       &__name {
         @include font-body-1-bold();
         flex-grow: 1;
-        margin-left: 8px;
+        margin-inline-start: 8px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -3765,7 +3727,7 @@ button.module-image__border-overlay:focus {
   &__modal-container {
     position: fixed;
     top: var(--titlebar-height);
-    left: 0;
+    inset-inline-start: 0;
     z-index: $z-index-on-top-of-everything;
   }
 
@@ -3856,7 +3818,7 @@ button.module-image__border-overlay:focus {
         $color-white
       );
       height: 24px;
-      margin-right: 10px;
+      margin-inline-end: 10px;
       width: 24px;
     }
   }
@@ -3943,13 +3905,12 @@ button.module-image__border-overlay:focus {
     &__overflow {
       flex: 0 0 auto;
       position: relative;
-      margin-left: 16px;
-      margin-right: 16px;
+      margin-inline: 16px;
 
       &__inner {
         position: absolute;
         bottom: 0;
-        left: 0;
+        inset-inline-start: 0;
         width: 100%;
         max-height: 100%;
         overflow-y: scroll;
@@ -3973,7 +3934,7 @@ button.module-image__border-overlay:focus {
 
         display: flex;
         justify-content: center;
-        left: 0;
+        inset-inline-start: 0;
         opacity: 1;
         position: absolute;
         transition: opacity 200ms ease-out;
@@ -4002,7 +3963,8 @@ button.module-image__border-overlay:focus {
           border: 0;
           box-shadow: 0 0 5px rgba($color-gray-95, 0.5);
           height: 28px;
-          margin: 12px 0;
+          margin-block: 12px;
+          margin-inline: 0;
           opacity: 0;
           outline: none;
           transition: opacity 200ms ease-out;
@@ -4047,6 +4009,7 @@ button.module-image__border-overlay:focus {
     line-height: 0;
     overflow: hidden;
     border-radius: 5px;
+    // stylelint-disable-next-line declaration-property-value-disallowed-list
     transform: translate(0, 0);
     transition: transform 200ms linear, width 200ms linear, height 200ms linear;
 
@@ -4089,7 +4052,8 @@ button.module-image__border-overlay:focus {
         border-radius: 16px;
         color: $color-white;
         line-height: 16px;
-        padding: 3px 10px;
+        padding-block: 3px;
+        padding-inline: 10px;
       }
 
       &--modal-title {
@@ -4117,7 +4081,7 @@ button.module-image__border-overlay:focus {
       &__contact-name {
         font-size: 12px;
         color: $color-white;
-        margin-right: 20px;
+        margin-inline-end: 20px;
         overflow: hidden;
         text-overflow: ellipsis;
         visibility: hidden;
@@ -4146,7 +4110,7 @@ button.module-image__border-overlay:focus {
     display: flex;
     height: 100%;
     justify-content: center;
-    left: 0;
+    inset-inline-start: 0;
     position: absolute;
     top: 0;
     width: 100%;
@@ -4190,7 +4154,8 @@ button.module-image__border-overlay:focus {
       border-radius: 5px;
       display: flex;
       height: $local-preview-height;
-      margin: 2px 16px 16px 0;
+      margin-block: 2px 16px;
+      margin-inline: 0 16px;
       overflow: hidden;
       position: relative;
       width: $local-preview-width;
@@ -4210,7 +4175,7 @@ button.module-image__border-overlay:focus {
       .CallingAudioIndicator {
         bottom: 6px;
         position: absolute;
-        right: 6px;
+        inset-inline-end: 6px;
         z-index: $z-index-base;
       }
     }
@@ -4243,7 +4208,7 @@ button.module-image__border-overlay:focus {
   width: 100%;
 
   &__button {
-    margin-right: 25px;
+    margin-inline-end: 25px;
   }
 }
 
@@ -4285,7 +4250,7 @@ button.module-image__border-overlay:focus {
       bottom: 38px;
       height: 32px;
       position: absolute;
-      right: 4px;
+      inset-inline-end: 4px;
       transform: rotateY(180deg);
       width: 32px;
     }
@@ -4342,7 +4307,7 @@ button.module-image__border-overlay:focus {
   background-color: $color-gray-80;
   border-radius: 8px;
   color: $color-white;
-  margin-right: 12px;
+  margin-inline-end: 12px;
   margin-top: 54px;
   overflow: hidden;
   padding: 14px;
@@ -4354,7 +4319,7 @@ button.module-image__border-overlay:focus {
     width: var(--window-width);
     height: var(--window-height);
     justify-content: flex-end;
-    left: 0;
+    inset-inline-start: 0;
     position: absolute;
     top: 0;
     z-index: $z-index-popup;
@@ -4371,13 +4336,11 @@ button.module-image__border-overlay:focus {
   &__list {
     height: 100%;
     margin-bottom: 0;
-    margin-left: -14px;
-    margin-right: -14px;
+    margin-inline: -14px;
     margin-top: 22px;
     overflow: scroll;
     padding-bottom: 24px;
-    padding-left: 14px;
-    padding-right: 14px;
+    padding-inline: 14px;
     padding-top: 0;
 
     &::-webkit-scrollbar {
@@ -4406,7 +4369,7 @@ button.module-image__border-overlay:focus {
 
   &__name {
     display: inline-block;
-    margin-left: 8px;
+    margin-inline-start: 8px;
     max-width: 130px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -4442,7 +4405,7 @@ button.module-image__border-overlay:focus {
         $color-white
       );
       display: inline-block;
-      margin-left: 18px;
+      margin-inline-start: 18px;
       height: 16px;
       width: 16px;
     }
@@ -4453,7 +4416,7 @@ button.module-image__border-overlay:focus {
         $color-white
       );
       display: inline-block;
-      margin-left: 18px;
+      margin-inline-start: 18px;
       height: 16px;
       width: 16px;
     }
@@ -4462,7 +4425,7 @@ button.module-image__border-overlay:focus {
   &__presenting {
     @include color-svg('../images/icons/v2/share-screen-26.svg', $color-white);
     display: inline-block;
-    margin-left: 18px;
+    margin-inline-start: 18px;
     height: 16px;
     width: 16px;
   }
@@ -4480,14 +4443,16 @@ button.module-image__border-overlay:focus {
   width: 100%;
 
   &__text {
-    margin: 2em 1em;
+    margin-block: 2em;
+    margin-inline: 1em;
     max-width: 400px;
     @include font-body-1;
     text-align: center;
   }
 
   &__button {
-    padding: 0.5em 1em;
+    padding-block: 0.5em;
+    padding-inline: 1em;
     border: 0;
     border-radius: 4px;
     @include font-body-1-bold;
@@ -4502,19 +4467,16 @@ button.module-image__border-overlay:focus {
   $normal-row-height: 72px;
 
   @include scrollbar;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-inline: 10px;
 
   // list tiles in choose-group-members and compose extend to the edge
   .module-left-pane--mode-choose-group-members &,
   .module-left-pane--mode-compose & {
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline: 0;
   }
 
   &--width-narrow {
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-inline: 10px;
   }
 
   &__item {
@@ -4529,8 +4491,7 @@ button.module-image__border-overlay:focus {
       line-height: $normal-row-height;
       text-align: center;
       width: 100%;
-      padding-left: 18px;
-      padding-right: 18px;
+      padding-inline: 18px;
       display: flex;
 
       @include light-theme {
@@ -4573,8 +4534,7 @@ button.module-image__border-overlay:focus {
 
       &__text {
         @include font-body-1-bold;
-        margin-left: 8px;
-        margin-right: 8px;
+        margin-inline: 8px;
       }
 
       &__archived-count {
@@ -4623,14 +4583,15 @@ button.module-image__border-overlay:focus {
       display: flex;
       flex-direction: row;
       height: $normal-row-height;
-      margin: 2px 0;
-      padding: 8px 14px;
+      margin-block: 2px;
+      margin-inline: 0;
+      padding-block: 8px;
+      padding-inline: 14px;
       user-select: none;
       width: 100%;
 
       .module-conversation-list--width-narrow & {
-        padding-left: 14px;
-        padding-right: 0;
+        padding-inline: 14px 0;
       }
 
       &--is-button {
@@ -4701,7 +4662,7 @@ button.module-image__border-overlay:focus {
           margin: 0;
           min-width: $size;
           position: absolute;
-          right: -(5px + $border-width);
+          inset-inline-end: -(5px + $border-width);
           top: -(1px + $border-width);
 
           .module-conversation-list--width-narrow & {
@@ -4728,11 +4689,10 @@ button.module-image__border-overlay:focus {
         font-weight: 500;
         height: $size;
         line-height: $size;
-        margin-left: 10px;
+        margin-inline-start: 10px;
         margin-top: 1px;
         min-width: $size;
-        padding-left: 4px;
-        padding-right: 4px;
+        padding-inline: 4px;
         text-align: center;
         word-break: normal;
         display: flex;
@@ -4753,14 +4713,14 @@ button.module-image__border-overlay:focus {
 
       &__content {
         flex-grow: 1;
-        margin-left: 12px;
+        margin-inline-start: 12px;
         display: flex;
         flex-direction: column;
         align-items: stretch;
         overflow: hidden;
 
         .module-conversation-list--width-narrow & {
-          margin-left: 0;
+          margin-inline-start: 0;
         }
 
         &--disabled {
@@ -4828,7 +4788,7 @@ button.module-image__border-overlay:focus {
             @include font-caption;
             display: inline-block;
             flex-shrink: 0;
-            margin-left: 6px;
+            margin-inline-start: 6px;
 
             @include light-theme {
               color: $color-gray-60;
@@ -4868,7 +4828,7 @@ button.module-image__border-overlay:focus {
             display: -webkit-box;
             overflow: hidden;
             text-overflow: ellipsis;
-            text-align: left;
+            text-align: start;
 
             @include light-theme {
               color: $color-gray-60;
@@ -4899,7 +4859,7 @@ button.module-image__border-overlay:focus {
             &__draft-prefix,
             &__deleted-for-everyone {
               font-style: italic;
-              margin-right: 3px;
+              margin-inline-end: 3px;
             }
 
             &__status-icon {
@@ -4909,7 +4869,7 @@ button.module-image__border-overlay:focus {
               width: 12px;
               height: 12px;
               display: inline-block;
-              margin-left: 6px;
+              margin-inline-start: 6px;
 
               .module-conversation-list--width-narrow & {
                 display: none;
@@ -5004,8 +4964,7 @@ button.module-image__border-overlay:focus {
         background: $color-white;
         border-radius: 100%;
         height: 20px;
-        margin-left: 16px;
-        margin-right: 16px;
+        margin-inline: 16px;
         width: 20px;
         min-width: 20px;
         pointer-events: none;
@@ -5074,7 +5033,7 @@ button.module-image__border-overlay:focus {
         }
 
         &--container {
-          margin-left: 8px;
+          margin-inline-start: 8px;
           /* prevent sibling content from pushing this smaller (min-width: the "!important" of width) */
           min-width: 20px;
         }
@@ -5089,7 +5048,7 @@ button.module-image__border-overlay:focus {
       height: 100%;
       overflow-x: hidden;
       padding-bottom: 8px;
-      padding-left: 16px;
+      padding-inline-start: 16px;
       text-overflow: ellipsis;
       user-select: none;
       white-space: nowrap;
@@ -5102,7 +5061,8 @@ button.module-image__border-overlay:focus {
         @include rounded-corners;
         display: block;
         height: 2px;
-        margin: 19px 0 19px 14px;
+        margin-block: 19px;
+        margin-inline: 14px 0;
         padding-bottom: 0;
         width: 48px;
 
@@ -5133,8 +5093,8 @@ button.module-image__border-overlay:focus {
 // Module: Left Pane
 
 .module-left-pane {
-  border-right-style: solid;
-  border-right-width: 1px;
+  border-inline-end-style: solid;
+  border-inline-end-width: 1px;
   display: inline-flex;
   flex-direction: column;
   height: 100%;
@@ -5184,7 +5144,8 @@ button.module-image__border-overlay:focus {
   display: flex;
   height: 100%;
   justify-content: center;
-  padding: 0 32px;
+  padding-block: 0;
+  padding-inline: 32px;
   text-align: center;
 
   .module-left-pane--width-narrow & {
@@ -5199,7 +5160,7 @@ button.module-image__border-overlay:focus {
     height: 28px;
     justify-content: center;
     margin-bottom: -2px;
-    margin-left: 4px;
+    margin-inline-start: 4px;
     vertical-align: bottom;
     width: 28px;
 
@@ -5230,8 +5191,7 @@ button.module-image__border-overlay:focus {
     &__back-button {
       @include button-reset;
 
-      margin-left: 7px;
-      margin-right: 5px;
+      margin-inline: 7px 5px;
 
       width: 24px;
       height: 24px;
@@ -5241,40 +5201,76 @@ button.module-image__border-overlay:focus {
       }
 
       @include light-theme {
-        @include color-svg(
-          '../images/icons/v2/chevron-left-24.svg',
-          $color-gray-60
-        );
-      }
-      @include keyboard-mode {
-        &:focus {
+        &:dir(ltr) {
           @include color-svg(
             '../images/icons/v2/chevron-left-24.svg',
-            $color-ultramarine
+            $color-gray-60
           );
         }
+        &:dir(rtl) {
+          @include color-svg(
+            '../images/icons/v2/chevron-right-24.svg',
+            $color-gray-60
+          );
+        }
+      }
+      @include keyboard-mode {
+        &:dir(ltr) {
+          &:focus {
+            @include color-svg(
+              '../images/icons/v2/chevron-left-24.svg',
+              $color-ultramarine
+            );
+          }
+        }
+        &:dir(rtl) {
+          &:focus {
+            @include color-svg(
+              '../images/icons/v2/chevron-right-24.svg',
+              $color-ultramarine
+            );
+          }
+        }
       }
 
       @include dark-theme {
-        @include color-svg(
-          '../images/icons/v2/chevron-left-24.svg',
-          $color-gray-25
-        );
-      }
-      @include dark-keyboard-mode {
-        &:hover {
+        &:dir(ltr) {
           @include color-svg(
             '../images/icons/v2/chevron-left-24.svg',
-            $color-ultramarine-light
+            $color-gray-25
           );
         }
+        &:dir(rtl) {
+          @include color-svg(
+            '../images/icons/v2/chevron-right-24.svg',
+            $color-gray-25
+          );
+        }
+      }
+      @include dark-keyboard-mode {
+        &:dir(ltr) {
+          &:hover {
+            @include color-svg(
+              '../images/icons/v2/chevron-left-24.svg',
+              $color-ultramarine-light
+            );
+          }
+        }
+        &:dir(rtl) {
+          &:hover {
+            @include color-svg(
+              '../images/icons/v2/chevron-right-24.svg',
+              $color-ultramarine-light
+            );
+          }
+        }
       }
     }
 
     &__text {
       @include font-body-1-bold;
       flex-grow: 1;
-      padding-right: 16px;
+      padding-inline-end: 16px;
 
       @include light-theme {
         color: $color-gray-90;
@@ -5294,10 +5290,12 @@ button.module-image__border-overlay:focus {
       flex-direction: row;
       align-items: center;
 
-      margin: 0 16px 16px 16px;
+      margin-block: 0 16px;
+
+      margin-inline: 16px;
 
       &__label {
-        margin-right: 12px;
+        margin-inline-end: 12px;
       }
 
       .module-disappearing-timer-select {
@@ -5330,8 +5328,7 @@ button.module-image__border-overlay:focus {
 .module-left-pane__compose-no-contacts {
   flex-grow: 1;
   margin-top: 27px;
-  padding-left: 1em;
-  padding-right: 1em;
+  padding-inline: 1em;
   width: 100%;
   text-align: center;
   outline: none;
@@ -5373,7 +5370,7 @@ button.module-image__border-overlay:focus {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  left: 0;
+  inset-inline-start: 0;
   padding: 12px;
   position: absolute;
   width: 100%;
@@ -5391,7 +5388,7 @@ button.module-image__border-overlay:focus {
   position: absolute;
   width: 8px;
   height: 100%;
-  right: -8px;
+  inset-inline-end: -8px;
   top: 0;
   z-index: $z-index-above-base;
   cursor: col-resize;
@@ -5495,7 +5492,8 @@ button.module-image__border-overlay:focus {
 .module-sticker-picker__header {
   display: flex;
   flex-direction: row;
-  padding: 0 8px;
+  padding-block: 0;
+  padding-inline: 8px;
   justify-content: flex-start;
   align-items: center;
 }
@@ -5508,6 +5506,7 @@ button.module-image__border-overlay:focus {
   &__slider {
     display: flex;
     flex-direction: row;
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
     transform: translateX(0);
     transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
@@ -5526,7 +5525,7 @@ button.module-image__border-overlay:focus {
   justify-content: center;
   align-items: center;
   background: none;
-  margin-right: 4px;
+  margin-inline-end: 4px;
 
   outline: none;
 
@@ -5611,40 +5610,76 @@ button.module-image__border-overlay:focus {
 
   &--prev-page {
     position: absolute;
-    left: 0;
+    inset-inline-start: 0;
 
-    &::after {
-      @include light-theme {
-        @include color-svg(
-          '../images/icons/v2/chevron-left-16.svg',
-          $color-gray-60
-        );
+    &:dir(ltr) {
+      &::after {
+        @include light-theme {
+          @include color-svg(
+            '../images/icons/v2/chevron-left-16.svg',
+            $color-gray-60
+          );
+        }
+        @include dark-theme {
+          @include color-svg(
+            '../images/icons/v2/chevron-left-16.svg',
+            $color-gray-25
+          );
+        }
       }
-      @include dark-theme {
-        @include color-svg(
-          '../images/icons/v2/chevron-left-16.svg',
-          $color-gray-25
-        );
+    }
+    &:dir(rtl) {
+      &::after {
+        @include light-theme {
+          @include color-svg(
+            '../images/icons/v2/chevron-right-16.svg',
+            $color-gray-60
+          );
+        }
+        @include dark-theme {
+          @include color-svg(
+            '../images/icons/v2/chevron-right-16.svg',
+            $color-gray-25
+          );
+        }
       }
     }
   }
 
   &--next-page {
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
 
-    &::after {
-      @include light-theme {
-        @include color-svg(
-          '../images/icons/v2/chevron-right-16.svg',
-          $color-gray-60
-        );
+    &:dir(ltr) {
+      &::after {
+        @include light-theme {
+          @include color-svg(
+            '../images/icons/v2/chevron-right-16.svg',
+            $color-gray-60
+          );
+        }
+        @include dark-theme {
+          @include color-svg(
+            '../images/icons/v2/chevron-right-16.svg',
+            $color-gray-25
+          );
+        }
       }
-      @include dark-theme {
-        @include color-svg(
-          '../images/icons/v2/chevron-right-16.svg',
-          $color-gray-25
-        );
+    }
+    &:dir(rtl) {
+      &::after {
+        @include light-theme {
+          @include color-svg(
+            '../images/icons/v2/chevron-left-16.svg',
+            $color-gray-60
+          );
+        }
+        @include dark-theme {
+          @include color-svg(
+            '../images/icons/v2/chevron-left-16.svg',
+            $color-gray-25
+          );
+        }
       }
     }
   }
@@ -5658,7 +5693,7 @@ button.module-image__border-overlay:focus {
       width: 12px;
       height: 12px;
       position: absolute;
-      left: 14px;
+      inset-inline-start: 14px;
       top: 2px;
       @include color-svg(
         '../images/icons/v2/error-solid-24.svg',
@@ -5674,7 +5709,7 @@ button.module-image__border-overlay:focus {
       content: '';
       position: absolute;
       top: 0;
-      right: 0;
+      inset-inline-end: 0;
       width: 14px;
       height: 14px;
       border-radius: 7px;
@@ -5710,7 +5745,8 @@ button.module-image__border-overlay:focus {
   &__content {
     width: 332px;
     height: 356px;
-    padding: 8px 13px 16px 13px;
+    padding-block: 8px 16px;
+    padding-inline: 13px;
     overflow-y: auto;
 
     &--under-text {
@@ -5767,7 +5803,8 @@ button.module-image__border-overlay:focus {
     @include font-body-1-bold;
 
     text-align: center;
-    padding: 8px 16px 12px 0;
+    padding-block: 8px 12px;
+    padding-inline: 0 16px;
 
     @include light-theme() {
       color: $color-gray-60;
@@ -5778,7 +5815,8 @@ button.module-image__border-overlay:focus {
     }
 
     &:only-child {
-      padding: 0 0 28px 0; // header height to offset the text so it is centered in the whole picker
+      padding-block: 0 28px;
+      padding-inline: 0; // header height to offset the text so it is centered in the whole picker
     }
 
     &--error {
@@ -5801,7 +5839,8 @@ button.module-image__border-overlay:focus {
     }
 
     &--pin {
-      padding: 8px 16px 12px 0px;
+      padding-block: 8px 12px;
+      padding-inline: 0px 16px;
       position: absolute;
       top: 0;
     }
@@ -5826,8 +5865,8 @@ button.module-image__border-overlay:focus {
 .module-sticker-picker__time--analog__hour {
   background: url(../images/analog-time/Arabic-hour.svg) center no-repeat;
   height: 14px;
-  left: 50%;
-  margin-left: -1px;
+  inset-inline-start: 50%;
+  margin-inline-start: -1px;
   margin-top: -14px;
   position: absolute;
   top: 50%;
@@ -5838,8 +5877,8 @@ button.module-image__border-overlay:focus {
 .module-sticker-picker__time--analog__minute {
   background: url(../images/analog-time/Arabic-minute.svg) center no-repeat;
   height: 22px;
-  left: 50%;
-  margin-left: -1px;
+  inset-inline-start: 50%;
+  margin-inline-start: -1px;
   margin-top: -22px;
   position: absolute;
   top: 50%;
@@ -5854,7 +5893,7 @@ button.module-image__border-overlay:focus {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-left: 6px;
+  margin-inline-start: 6px;
 }
 
 .module-sticker-button__button {
@@ -5916,7 +5955,8 @@ button.module-image__border-overlay:focus {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 7px 12px;
+  padding-block: 7px;
+  padding-inline: 12px;
   border-radius: 8px;
   margin-bottom: 6px;
   z-index: $z-index-tooltip;
@@ -5967,7 +6007,7 @@ button.module-image__border-overlay:focus {
   }
 
   &__text {
-    margin-left: 4px;
+    margin-inline-start: 4px;
     cursor: default;
 
     @include light-theme {
@@ -5996,7 +6036,8 @@ button.module-image__border-overlay:focus {
 
     &__meta {
       flex-grow: 1;
-      padding: 0 12px;
+      padding-block: 0;
+      padding-inline: 12px;
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -6061,11 +6102,12 @@ button.module-image__border-overlay:focus {
   &__header {
     @extend %module-emoji-picker--ribbon;
     justify-content: space-between;
-    margin: 0 12px;
+    margin-block: 0;
+    margin-inline: 12px;
 
     &__search-field {
       flex-grow: 1;
-      margin-left: 8px;
+      margin-inline-start: 8px;
       position: relative;
 
       @include font-body-2;
@@ -6076,7 +6118,7 @@ button.module-image__border-overlay:focus {
         width: 16px;
         height: 16px;
         position: absolute;
-        left: 8px;
+        inset-inline-start: 8px;
         top: 6px;
 
         @include light-theme {
@@ -6104,7 +6146,8 @@ button.module-image__border-overlay:focus {
         border-radius: 17px;
         border-width: 1px;
         border-style: solid;
-        padding: 0 8px 0 30px;
+        padding-block: 0;
+        padding-inline: 30px 8px;
 
         &:focus {
           outline: none;
@@ -6155,7 +6198,7 @@ button.module-image__border-overlay:focus {
 
     &__settings-spacer {
       width: 28px;
-      margin-right: 12px;
+      margin-inline-end: 12px;
     }
   }
 
@@ -6176,12 +6219,12 @@ button.module-image__border-overlay:focus {
 
     &--footer {
       &:not(:last-of-type) {
-        margin-right: 4px;
+        margin-inline-end: 4px;
       }
     }
 
     &--settings {
-      margin-left: 12px;
+      margin-inline-start: 12px;
       border-radius: 100%;
 
       @include light-theme {
@@ -6323,7 +6366,8 @@ button.module-image__border-overlay:focus {
   }
 
   &__body {
-    padding: 8px 16px 0 12px;
+    padding-block: 8px 0;
+    padding-inline: 12px 16px;
     outline: none;
 
     &__emoji-cell {
@@ -6358,7 +6402,8 @@ button.module-image__border-overlay:focus {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 0 6px;
+  margin-block: 0;
+  margin-inline: 6px;
   padding-top: 4px;
 }
 
@@ -6451,6 +6496,7 @@ button.module-image__border-overlay:focus {
   &__image--#{$size} {
     width: $size;
     height: $size;
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
     transform: translate3d(0, 0, 0);
     vertical-align: baseline;
   }
@@ -6572,7 +6618,7 @@ button.module-image__border-overlay:focus {
 }
 
 .module-avatar-popup__profile__text {
-  margin-left: 10px;
+  margin-inline-start: 10px;
   overflow: hidden;
 }
 
@@ -6655,7 +6701,7 @@ button.module-image__border-overlay:focus {
 }
 
 .module-avatar-popup__item__icon {
-  margin-left: 6px;
+  margin-inline-start: 6px;
 
   height: 16px;
   width: 16px;
@@ -6700,14 +6746,14 @@ button.module-image__border-overlay:focus {
 
 .module-avatar-popup__item__text {
   flex-grow: 1;
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 
 .module-avatar-popup__item--badge {
   background: $color-ultramarine;
   border-radius: 100%;
   height: 8px;
-  margin-right: 10px;
+  margin-inline-end: 10px;
   width: 8px;
 }
 
@@ -6716,8 +6762,7 @@ button.module-image__border-overlay:focus {
 .module-shortcut-guide-modal {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   bottom: 0;
 
   padding: 20px;
@@ -6743,8 +6788,7 @@ button.module-image__border-overlay:focus {
 
   max-height: calc(var(--window-height) - 40px);
   max-width: 1150px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 
   display: flex;
   flex-direction: column;
@@ -6836,7 +6880,7 @@ button.module-image__border-overlay:focus {
   align-items: center;
   break-inside: avoid;
 
-  padding-left: 4px;
+  padding-inline-start: 4px;
   min-height: 40px;
   outline: none;
 
@@ -6866,9 +6910,9 @@ button.module-image__border-overlay:focus {
   margin-bottom: 4px;
 }
 .module-shortcut-guide__shortcut__key-inner-container {
-  text-align: right;
+  text-align: end;
   margin-top: 4px;
-  margin-right: 4px;
+  margin-inline-end: 4px;
   white-space: nowrap;
 }
 
@@ -6877,9 +6921,8 @@ button.module-image__border-overlay:focus {
 
   border-radius: 2px;
   padding: 3px;
-  padding-left: 8px;
-  padding-right: 8px;
-  margin-left: 4px;
+  padding-inline: 8px;
+  margin-inline-start: 4px;
 
   height: 30px;
   text-align: center;
@@ -6894,8 +6937,7 @@ button.module-image__border-overlay:focus {
 
 .module-shortcut-guide__shortcut__key--square {
   width: 30px;
-  padding-left: 0px;
-  padding-right: 0px;
+  padding-inline: 0px;
 }
 
 /* Calling: Device Selection */
@@ -6911,7 +6953,7 @@ button.module-image__border-overlay:focus {
 
   height: 24px;
   position: absolute;
-  right: 5px;
+  inset-inline-end: 5px;
   top: 0;
   width: 24px;
   z-index: $z-index-above-base;
@@ -6950,7 +6992,7 @@ button.module-image__border-overlay:focus {
     height: 40px;
     outline: 0;
     padding: 10px;
-    padding-right: 32px;
+    padding-inline-end: 32px;
     text-overflow: ellipsis;
     width: 100%;
   }
@@ -6959,14 +7001,14 @@ button.module-image__border-overlay:focus {
     border: 2px solid $color-gray-75;
 
     border-radius: 2px;
-    border-right: 0;
+    border-inline-end: 0;
     border-top: 0;
     content: ' ';
     display: block;
     height: 10px;
     pointer-events: none;
     position: absolute;
-    right: 15px;
+    inset-inline-end: 15px;
     top: 16px;
     transform-origin: center;
     transform: rotate(-45deg);
@@ -6978,10 +7020,10 @@ button.module-image__border-overlay:focus {
 // Module: GroupV1 Disabled Actions
 
 .module-group-v1-disabled-actions {
-  padding: 8px 16px 12px 16px;
+  padding-block: 8px 12px;
+  padding-inline: 16px;
   max-width: 650px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 
   @include light-theme {
     background: $color-white;
@@ -7022,8 +7064,7 @@ button.module-image__border-overlay:focus {
   border-radius: 4px;
 
   padding: 8px;
-  padding-left: 30px;
-  padding-right: 30px;
+  padding-inline: 30px;
 
   @include button-primary;
 }
@@ -7031,10 +7072,10 @@ button.module-image__border-overlay:focus {
 // Module: GroupV2 Pending Approval Actions
 
 .module-group-v2-pending-approval-actions {
-  padding: 8px 16px 12px 16px;
+  padding-block: 8px 12px;
+  padding-inline: 16px;
   max-width: 650px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 
   @include light-theme {
     background: $color-white;
@@ -7071,8 +7112,7 @@ button.module-image__border-overlay:focus {
   border-radius: 4px;
 
   padding: 8px;
-  padding-left: 30px;
-  padding-right: 30px;
+  padding-inline: 30px;
 
   @include button-secondary;
 
@@ -7088,7 +7128,7 @@ button.module-image__border-overlay:focus {
   background: $color-black-alpha-40;
   width: var(--window-width);
   height: var(--window-height);
-  left: var(--window-border);
+  inset-inline-start: var(--window-border);
   top: var(--titlebar-height);
   position: fixed;
   z-index: $z-index-modal-host;
@@ -7099,7 +7139,7 @@ button.module-image__border-overlay:focus {
   flex-direction: row;
   width: var(--window-width);
   height: var(--window-height);
-  left: var(--window-border);
+  inset-inline-start: var(--window-border);
   top: var(--titlebar-height);
   justify-content: center;
   align-items: center;
@@ -7129,8 +7169,7 @@ button.module-image__border-overlay:focus {
   @include font-body-1;
   border-radius: 8px;
   width: 360px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   padding: 20px;
 
   position: relative;
@@ -7146,7 +7185,7 @@ button.module-image__border-overlay:focus {
   @include button-reset;
 
   position: absolute;
-  right: 12px;
+  inset-inline-end: 12px;
   top: 12px;
 
   height: 24px;
@@ -7204,7 +7243,7 @@ button.module-image__border-overlay:focus {
   flex: 1 1 0px;
 
   &:not(:first-of-type) {
-    margin-left: 16px;
+    margin-inline-start: 16px;
   }
 }
 .module-group-v2-join-dialog__description {
@@ -7247,7 +7286,7 @@ button.module-image__border-overlay:focus {
 .module-progress-dialog__overlay {
   background: $color-black-alpha-40;
   position: fixed;
-  left: var(--window-border);
+  inset-inline-start: var(--window-border);
   top: var(--titlebar-height);
   width: var(--window-width);
   height: var(--window-height);
@@ -7291,7 +7330,8 @@ button.module-image__border-overlay:focus {
     border-style: solid;
     border-width: 1px;
     outline: none;
-    padding: 7px 12px;
+    padding-block: 7px;
+    padding-inline: 12px;
   }
 }
 
@@ -7322,7 +7362,8 @@ button.module-image__border-overlay:focus {
   border-radius: 8px;
   color: var(--tooltip-text-color);
   display: inline-block;
-  padding: 8px 21px;
+  padding-block: 8px;
+  padding-inline: 21px;
   position: fixed;
   text-align: center;
   z-index: $z-index-tooltip;
@@ -7336,7 +7377,7 @@ button.module-image__border-overlay:focus {
     content: '';
     display: block;
     height: 0;
-    margin-left: -6px;
+    margin-inline-start: -6px;
     margin-top: -6px;
     position: absolute;
     width: 0;
@@ -7355,12 +7396,12 @@ button.module-image__border-overlay:focus {
 
   &[data-placement='right'] {
     .module-tooltip-arrow {
-      left: 0;
+      inset-inline-start: 0;
     }
 
     .module-tooltip-arrow::after {
-      left: -6px;
-      border-right-color: var(--tooltip-background-color);
+      inset-inline-start: -6px;
+      border-inline-end-color: var(--tooltip-background-color);
     }
   }
 
@@ -7377,12 +7418,12 @@ button.module-image__border-overlay:focus {
 
   &[data-placement='left'] {
     .module-tooltip-arrow {
-      right: 0;
+      inset-inline-end: 0;
     }
 
     .module-tooltip-arrow::after {
-      right: -12px;
-      border-left-color: var(--tooltip-background-color);
+      inset-inline-end: -12px;
+      border-inline-start-color: var(--tooltip-background-color);
     }
   }
 }
@@ -7406,7 +7447,7 @@ button.module-image__border-overlay:focus {
   margin-bottom: 3px;
 }
 .module-chat-session-refreshed-dialog__buttons {
-  text-align: right;
+  text-align: end;
   margin-top: 20px;
   padding: 3px;
 }
@@ -7416,8 +7457,9 @@ button.module-image__border-overlay:focus {
   @include button-primary;
 
   border-radius: 4px;
-  padding: 7px 14px;
-  margin-left: 12px;
+  padding-block: 7px;
+  padding-inline: 14px;
+  margin-inline-start: 12px;
 }
 .module-chat-session-refreshed-dialog__button--secondary {
   @include button-secondary;
@@ -7442,7 +7484,8 @@ button.module-image__border-overlay:focus {
   outline: none;
   border-radius: 4px;
   min-width: 220px;
-  padding: 6px 0;
+  padding-block: 6px;
+  padding-inline: 0;
   opacity: 0;
   user-select: none;
   visibility: hidden;
@@ -7468,7 +7511,9 @@ button.module-image__border-overlay:focus {
 
   @include font-body-2;
 
-  padding: 7px 12px;
+  padding-block: 7px;
+
+  padding-inline: 12px;
 
   @include light-theme {
     color: $color-gray-90;
@@ -7479,7 +7524,8 @@ button.module-image__border-overlay:focus {
 
   &--divider {
     height: 1px;
-    margin: 6px 0;
+    margin-block: 6px;
+    margin-inline: 0;
     padding: 0;
 
     @include light-theme {
@@ -7495,7 +7541,7 @@ button.module-image__border-overlay:focus {
   content: '✓';
   display: inline-block;
   position: absolute;
-  right: 7px;
+  inset-inline-end: 7px;
 
   @include light-theme {
     color: $color-gray-90;
@@ -7510,7 +7556,7 @@ button.module-image__border-overlay:focus {
 }
 
 .react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item {
-  padding-right: 36px;
+  padding-inline-end: 36px;
 }
 
 .react-contextmenu-item.react-contextmenu-submenu
@@ -7519,21 +7565,37 @@ button.module-image__border-overlay:focus {
   display: inline-block;
   height: 18px;
   position: absolute;
-  right: 7px;
+  inset-inline-end: 7px;
   width: 12px;
 
   @include light-theme {
-    @include color-svg(
-      '../images/icons/v2/chevron-right-16.svg',
-      $color-gray-75
-    );
+    &:dir(ltr) {
+      @include color-svg(
+        '../images/icons/v2/chevron-right-16.svg',
+        $color-gray-75
+      );
+    }
+    &:dir(rtl) {
+      @include color-svg(
+        '../images/icons/v2/chevron-left-16.svg',
+        $color-gray-75
+      );
+    }
     color: $color-gray-90;
   }
   @include dark-theme {
-    @include color-svg(
-      '../images/icons/v2/chevron-right-16.svg',
-      $color-gray-15
-    );
+    &:dir(ltr) {
+      @include color-svg(
+        '../images/icons/v2/chevron-right-16.svg',
+        $color-gray-15
+      );
+    }
+    &:dir(rtl) {
+      @include color-svg(
+        '../images/icons/v2/chevron-left-16.svg',
+        $color-gray-15
+      );
+    }
     color: $color-gray-02;
   }
 }
@@ -7599,7 +7661,7 @@ button.module-image__border-overlay:focus {
     content: ' ';
     display: inline-block;
     height: 14px;
-    margin-right: 8px;
+    margin-inline-end: 8px;
     width: 14px;
     vertical-align: middle;
   }
diff --git a/stylesheets/_options.scss b/stylesheets/_options.scss
index da8e661b95..31633b0330 100644
--- a/stylesheets/_options.scss
+++ b/stylesheets/_options.scss
@@ -18,7 +18,7 @@
 }
 
 .intl-tel-input .country-list {
-  text-align: left;
+  text-align: start;
 }
 
 .intl-tel-input .country-list .country .country-name {
diff --git a/stylesheets/components/AddGroupMembersModal.scss b/stylesheets/components/AddGroupMembersModal.scss
index 7648cdad3f..1f566f64b5 100644
--- a/stylesheets/components/AddGroupMembersModal.scss
+++ b/stylesheets/components/AddGroupMembersModal.scss
@@ -20,7 +20,7 @@
 
     .module-Button {
       &:not(:first-child) {
-        margin-left: 12px;
+        margin-inline-start: 12px;
       }
     }
   }
diff --git a/stylesheets/components/AddUserToAnotherGroupModal.scss b/stylesheets/components/AddUserToAnotherGroupModal.scss
index 3340993e8a..3ce2f8c471 100644
--- a/stylesheets/components/AddUserToAnotherGroupModal.scss
+++ b/stylesheets/components/AddUserToAnotherGroupModal.scss
@@ -18,6 +18,7 @@
   &__item,
   &__item--contact-or-conversation {
     height: 52px;
-    padding: 0 6px;
+    padding-block: 0;
+    padding-inline: 6px;
   }
 }
diff --git a/stylesheets/components/AudioCapture.scss b/stylesheets/components/AudioCapture.scss
index 36e3f07c53..9a40935e5f 100644
--- a/stylesheets/components/AudioCapture.scss
+++ b/stylesheets/components/AudioCapture.scss
@@ -102,7 +102,8 @@
     color: $color-gray-60;
     font-variant: tabular-nums;
     line-height: 36px;
-    margin: 0 15px;
+    margin-block: 0;
+    margin-inline: 15px;
 
     @keyframes pulse {
       0% {
@@ -123,7 +124,7 @@
       width: 10px;
       height: 10px;
       background: $color-accent-red;
-      margin-right: 10px;
+      margin-inline-end: 10px;
       opacity: 0;
       animation: pulse 2s infinite;
     }
diff --git a/stylesheets/components/Avatar.scss b/stylesheets/components/Avatar.scss
index 3794f62a32..2035644425 100644
--- a/stylesheets/components/Avatar.scss
+++ b/stylesheets/components/Avatar.scss
@@ -52,7 +52,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    left: 0;
+    inset-inline-start: 0;
     position: absolute;
     top: 0;
 
@@ -121,7 +121,7 @@
 
     // Positioning should be overridden by JavaScript. These are set defensively.
     bottom: 0;
-    right: 0;
+    inset-inline-end: 0;
 
     &--static {
       pointer-events: none;
diff --git a/stylesheets/components/AvatarEditor.scss b/stylesheets/components/AvatarEditor.scss
index 4b8c43bf26..fb791ca0b8 100644
--- a/stylesheets/components/AvatarEditor.scss
+++ b/stylesheets/components/AvatarEditor.scss
@@ -15,10 +15,12 @@
     font-size: 9px;
     justify-content: center;
     line-height: 14px;
-    margin: 0 8px;
+    margin-block: 0;
+    margin-inline: 8px;
     min-height: 44px;
     min-width: 60px;
-    padding: 0 8px;
+    padding-block: 0;
+    padding-inline: 8px;
 
     @include light-theme {
       background-color: $color-gray-05;
diff --git a/stylesheets/components/AvatarModalButtons.scss b/stylesheets/components/AvatarModalButtons.scss
index 1d3d6248c8..89bca77229 100644
--- a/stylesheets/components/AvatarModalButtons.scss
+++ b/stylesheets/components/AvatarModalButtons.scss
@@ -4,9 +4,9 @@
 .AvatarModalButtons {
   bottom: 0;
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
 
   .module-Button {
-    margin-left: 12px;
+    margin-inline-start: 12px;
   }
 }
diff --git a/stylesheets/components/AvatarPreview.scss b/stylesheets/components/AvatarPreview.scss
index b73bed660e..6f5354a76b 100644
--- a/stylesheets/components/AvatarPreview.scss
+++ b/stylesheets/components/AvatarPreview.scss
@@ -59,7 +59,7 @@
     height: 28px;
     justify-content: center;
     position: absolute;
-    right: -7px;
+    inset-inline-end: -7px;
     width: 28px;
 
     &::after {
@@ -84,7 +84,7 @@
     height: 24px;
     justify-content: center;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     top: 0;
     width: 24px;
 
diff --git a/stylesheets/components/AvatarTextEditor.scss b/stylesheets/components/AvatarTextEditor.scss
index 29e91a4886..7b5edad206 100644
--- a/stylesheets/components/AvatarTextEditor.scss
+++ b/stylesheets/components/AvatarTextEditor.scss
@@ -15,7 +15,7 @@
   }
 
   &__measure {
-    left: -9999;
+    inset-inline-start: -9999;
     position: fixed;
     text-transform: uppercase;
     top: -9999;
diff --git a/stylesheets/components/BadgeDialog.scss b/stylesheets/components/BadgeDialog.scss
index a456d6b964..8af6becdbd 100644
--- a/stylesheets/components/BadgeDialog.scss
+++ b/stylesheets/components/BadgeDialog.scss
@@ -27,7 +27,8 @@
     border-radius: 4px;
     display: flex;
     justify-content: center;
-    padding: 3px 0;
+    padding-block: 3px;
+    padding-inline: 0;
 
     &[disabled] {
       visibility: hidden;
@@ -93,7 +94,8 @@
   &__main {
     flex-grow: 1;
     text-align: center;
-    padding: 24px 10px;
+    padding-block: 24px;
+    padding-inline: 10px;
   }
 
   &__name {
diff --git a/stylesheets/components/BadgeSustainerInstructionsDialog.scss b/stylesheets/components/BadgeSustainerInstructionsDialog.scss
index 55cbd21a4c..c478d8793e 100644
--- a/stylesheets/components/BadgeSustainerInstructionsDialog.scss
+++ b/stylesheets/components/BadgeSustainerInstructionsDialog.scss
@@ -29,7 +29,8 @@
       content: '';
       display: block;
       height: 160px;
-      margin: 24px auto;
+      margin-block: 24px;
+      margin-inline: auto;
       width: 146px;
 
       @include light-theme {
diff --git a/stylesheets/components/BetterAvatarBubble.scss b/stylesheets/components/BetterAvatarBubble.scss
index 0b6e1f39e4..555fbbfcc1 100644
--- a/stylesheets/components/BetterAvatarBubble.scss
+++ b/stylesheets/components/BetterAvatarBubble.scss
@@ -69,7 +69,7 @@
     justify-content: center;
     position: absolute;
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
     width: 20px;
 
     &:after {
diff --git a/stylesheets/components/Button.scss b/stylesheets/components/Button.scss
index 398b69b372..ef4e33a342 100644
--- a/stylesheets/components/Button.scss
+++ b/stylesheets/components/Button.scss
@@ -23,7 +23,8 @@
 
   @include button-reset;
   border-radius: 4px;
-  padding: 8px 16px;
+  padding-block: 8px;
+  padding-inline: 16px;
   text-align: center;
   user-select: none;
 
@@ -51,7 +52,8 @@
   &--small {
     @include font-body-2;
     @include rounded-corners;
-    padding: 6px 12px;
+    padding-block: 6px;
+    padding-inline: 12px;
   }
 
   &--primary {
@@ -170,10 +172,8 @@
     @include rounded-corners;
 
     &.module-Button--small {
-      padding: {
-        top: 5px;
-        bottom: 5px;
-      }
+      padding-top: 5px;
+      padding-bottom: 5px;
       font-weight: 500;
     }
 
diff --git a/stylesheets/components/CallingButton.scss b/stylesheets/components/CallingButton.scss
index 57be895ca9..25a962b10f 100644
--- a/stylesheets/components/CallingButton.scss
+++ b/stylesheets/components/CallingButton.scss
@@ -17,8 +17,7 @@
     justify-content: center;
     outline: none;
     width: 52px;
-    margin-left: 6px;
-    margin-right: 6px;
+    margin-inline: 6px;
 
     @mixin calling-button-icon($icon, $background-color, $icon-color) {
       background-color: $background-color;
@@ -120,15 +119,16 @@
     &--shown {
       background-color: $color-gray-75;
       border-radius: 16px;
-      padding: 6px 8px;
+      padding-block: 6px;
+      padding-inline: 8px;
       padding-bottom: 2px;
       margin-top: -6px;
-      margin-right: -8px;
+      margin-inline-end: -8px;
     }
 
     &--count {
       @include font-body-2-bold;
-      margin-left: 5px;
+      margin-inline-start: 5px;
       vertical-align: top;
     }
   }
@@ -156,17 +156,16 @@
   &__container {
     display: inline-flex;
     flex-direction: column;
-    margin-left: 6px;
-    margin-right: 6px;
+    margin-inline: 6px;
     max-width: 64px;
 
-    transition: margin-left 0.3s ease-out, opacity 0.3s ease-out;
+    transition: margin-inline-start 0.3s ease-out, opacity 0.3s ease-out;
     @media (prefers-reduced-motion) {
       transition: none;
     }
 
     &--hidden {
-      margin-left: -100px;
+      margin-inline-start: -100px;
       opacity: 0;
       pointer-events: none;
 
diff --git a/stylesheets/components/CallingScreenSharingController.scss b/stylesheets/components/CallingScreenSharingController.scss
index 74acc890ed..59ced54f27 100644
--- a/stylesheets/components/CallingScreenSharingController.scss
+++ b/stylesheets/components/CallingScreenSharingController.scss
@@ -5,7 +5,8 @@
   align-items: center;
   display: flex;
   justify-content: space-between;
-  padding: 4px 16px;
+  padding-block: 4px;
+  padding-inline: 16px;
   -webkit-app-region: drag;
 
   &__text {
@@ -25,7 +26,7 @@
   &__buttons {
     align-items: center;
     display: flex;
-    margin-left: 6px;
+    margin-inline-start: 6px;
     -webkit-app-region: no-drag;
   }
 
@@ -33,7 +34,7 @@
     @include button-reset;
     @include color-svg('../images/icons/v2/x-24.svg', $color-gray-25);
     cursor: pointer;
-    margin-left: 12px;
+    margin-inline-start: 12px;
     height: 20px;
     width: 20px;
   }
diff --git a/stylesheets/components/CallingSelectPresentingSourcesModal.scss b/stylesheets/components/CallingSelectPresentingSourcesModal.scss
index 3d8ebf89a4..fd84258515 100644
--- a/stylesheets/components/CallingSelectPresentingSourcesModal.scss
+++ b/stylesheets/components/CallingSelectPresentingSourcesModal.scss
@@ -71,7 +71,7 @@
     }
 
     &--icon {
-      margin-right: 8px;
+      margin-inline-end: 8px;
     }
   }
 }
diff --git a/stylesheets/components/ChatColorPicker.scss b/stylesheets/components/ChatColorPicker.scss
index 3a676e1fd7..0680f8c5ca 100644
--- a/stylesheets/components/ChatColorPicker.scss
+++ b/stylesheets/components/ChatColorPicker.scss
@@ -6,7 +6,8 @@
 
   &__container {
     max-width: 748px;
-    margin: 0 auto;
+    margin-block: 0;
+    margin-inline: auto;
 
     hr {
       @include light-theme {
@@ -25,7 +26,8 @@
     grid-gap: 24px;
     grid-template-columns: repeat(auto-fit, $bubble-size);
     justify-content: center;
-    margin: 20px 0;
+    margin-block: 20px;
+    margin-inline: 0;
   }
 
   &__bubble {
diff --git a/stylesheets/components/Checkbox.scss b/stylesheets/components/Checkbox.scss
index 130284f5bc..23de4ff9e4 100644
--- a/stylesheets/components/Checkbox.scss
+++ b/stylesheets/components/Checkbox.scss
@@ -14,7 +14,7 @@
 
   &__checkbox {
     height: 18px;
-    margin-right: 20px;
+    margin-inline-end: 20px;
     width: 18px;
   }
 
diff --git a/stylesheets/components/CircleCheckbox.scss b/stylesheets/components/CircleCheckbox.scss
index b92774e826..49043162b7 100644
--- a/stylesheets/components/CircleCheckbox.scss
+++ b/stylesheets/components/CircleCheckbox.scss
@@ -89,7 +89,7 @@
           border: solid $color-white;
           border-width: 0 2px 2px 0;
           height: 11px;
-          left: 7px;
+          inset-inline-start: 7px;
           top: 3px;
           transform: rotate(45deg);
           width: 6px;
@@ -106,7 +106,7 @@
         &::after {
           background: $color-ultramarine;
           top: 4px;
-          left: 4px;
+          inset-inline-start: 4px;
           width: 12px;
           height: 12px;
           border-radius: 6px;
@@ -136,6 +136,7 @@
             border: solid $color-white;
             border-width: 0 2px 2px 0;
             height: 10px;
+            /* stylelint-disable-next-line liberty/use-logical-spec */
             left: 7px;
             top: 3px;
             transform: rotate(45deg);
@@ -153,6 +154,7 @@
           &::after {
             background: $color-ultramarine;
             top: 4px;
+            /* stylelint-disable-next-line liberty/use-logical-spec */
             left: 4px;
             width: 10px;
             height: 10px;
diff --git a/stylesheets/components/CompositionArea.scss b/stylesheets/components/CompositionArea.scss
index 8984d52461..eaa772588f 100644
--- a/stylesheets/components/CompositionArea.scss
+++ b/stylesheets/components/CompositionArea.scss
@@ -4,13 +4,12 @@
 .CompositionArea {
   position: relative;
   min-height: 42px;
-  padding: 10px 0 10px 0;
+  padding-block: 10px;
+  padding-inline: 0;
 
   &__placeholder {
     flex-grow: 1;
-    margin: {
-      bottom: 6px;
-    }
+    margin-bottom: 6px;
   }
 
   &__row {
@@ -22,7 +21,8 @@
       justify-content: center;
     }
     &--padded {
-      padding: 0 12px;
+      padding-block: 0;
+      padding-inline: 12px;
     }
     &--control-row {
       margin-top: 12px;
@@ -34,7 +34,8 @@
   }
 
   &__button-cell {
-    margin: 0 6px;
+    margin-block: 0;
+    margin-inline: 6px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -42,11 +43,11 @@
     flex-shrink: 0;
 
     &:first-child {
-      margin-left: 12px;
+      margin-inline-start: 12px;
     }
 
     &:last-child {
-      margin-right: 12px;
+      margin-inline-end: 12px;
     }
   }
 
@@ -73,7 +74,7 @@
     }
     &--accept {
       background-color: $color-ultramarine;
-      margin-left: 16px;
+      margin-inline-start: 16px;
       &::before {
         @include color-svg('../images/icons/v3/check.svg', $color-white);
       }
@@ -99,8 +100,9 @@
   }
   &__input {
     flex-grow: 1;
-    margin: 0 6px;
     position: relative;
+    margin-block: 0;
+    margin-inline: 6px;
 
     &--large {
       margin: 0;
@@ -114,7 +116,7 @@
     width: $width;
     height: $height;
     position: absolute;
-    left: calc(50% - $width / 2);
+    inset-inline-start: calc(50% - $width / 2);
 
     // 6px coming from padding-top of .module-composition-input__input__scroller
     top: calc(0px - $height / 2 - 6px);
@@ -187,7 +189,8 @@
     align-items: center;
 
     // Note the margin in &__placeholder above
-    padding: 14px 16px 18px 16px;
+    padding-block: 14px 18px;
+    padding-inline: 16px;
 
     &:not(.module-composition-area--pending) {
       @include light-theme {
@@ -200,7 +203,8 @@
 
     &__title {
       @include font-body-2-bold;
-      margin: 0 0 2px 0;
+      margin-block: 0 2px;
+      margin-inline: 0;
 
       @include light-theme {
         color: $color-gray-60;
diff --git a/stylesheets/components/CompositionInput.scss b/stylesheets/components/CompositionInput.scss
index 79890f2f61..db2f989672 100644
--- a/stylesheets/components/CompositionInput.scss
+++ b/stylesheets/components/CompositionInput.scss
@@ -4,7 +4,7 @@
 .module-composition-input {
   &__quill {
     height: 100%;
-    padding-left: 12px;
+    padding-inline-start: 12px;
 
     .ql-editor {
       caret-color: transparent;
@@ -18,8 +18,7 @@
       }
 
       &.ql-blank::before {
-        left: 0;
-        right: 0;
+        inset-inline: 0;
         font-style: normal;
       }
 
@@ -35,8 +34,7 @@
     background-color: $color-gray-20;
     border-radius: 4px;
     display: inline;
-    padding-left: 4px;
-    padding-right: 4px;
+    padding-inline: 4px;
     height: 22px;
     line-height: 22px;
 
@@ -81,7 +79,8 @@
 
     &__scroller {
       $padding-top: 6px;
-      padding: $padding-top 0;
+      padding-block: $padding-top;
+      padding-inline: 0;
 
       min-height: calc(32px - 2 * $border-size);
       max-height: calc(72px - 2 * $border-size);
@@ -121,7 +120,8 @@
   }
 
   &__format-menu {
-    padding: 6px 12px;
+    padding-block: 6px;
+    padding-inline: 12px;
     border-radius: 8px;
     z-index: $z-index-above-popup;
 
@@ -145,9 +145,9 @@
       width: 24px;
       border-radius: 4px;
 
-      margin-right: 8px;
+      margin-inline-end: 8px;
       &:last-child {
-        margin-right: 0;
+        margin-inline-end: 0;
       }
 
       @include mouse-mode {
@@ -282,7 +282,8 @@
 
     &__row {
       height: 34px;
-      padding: 0 12px;
+      padding-block: 0;
+      padding-inline: 12px;
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -310,7 +311,7 @@
       }
 
       &__short-name {
-        margin-left: 4px;
+        margin-inline-start: 4px;
       }
 
       &--selected,
@@ -328,7 +329,7 @@
     }
 
     &__title {
-      padding-left: 8px;
+      padding-inline-start: 8px;
     }
 
     stroke: $color-white;
@@ -343,7 +344,8 @@
       content: '';
       display: inline-block;
       height: 16px;
-      margin: 0 8px 0 10px;
+      margin-block: 0;
+      margin-inline: 10px 8px;
       width: 16px;
       vertical-align: middle;
 
@@ -357,7 +359,7 @@
     &__attachment img {
       height: 18px;
       position: absolute;
-      right: 8px;
+      inset-inline-end: 8px;
       top: 8px;
       width: 18px;
     }
@@ -380,19 +382,18 @@ div.CompositionInput__link-preview {
   &__icon-container {
     align-items: center;
     display: flex;
-    margin-left: 8px;
-    margin-right: 0;
+    margin-inline: 8px 0;
   }
 
   &__content {
-    margin-right: 0;
+    margin-inline-end: 0;
     padding-bottom: 8px;
-    padding-left: 12px;
+    padding-inline-start: 12px;
     padding-top: 8px;
   }
 
   &__no-image {
-    margin-right: 0;
+    margin-inline-end: 0;
     min-width: 74px;
   }
 }
@@ -406,7 +407,7 @@ button.CompositionInput__link-preview__close-button {
   display: flex;
   height: 20px;
   justify-content: center;
-  right: 6px;
+  inset-inline-end: 6px;
   top: 6px;
   width: 20px;
 
diff --git a/stylesheets/components/CompositionRecording.scss b/stylesheets/components/CompositionRecording.scss
index fc65f7d050..eead8a819d 100644
--- a/stylesheets/components/CompositionRecording.scss
+++ b/stylesheets/components/CompositionRecording.scss
@@ -5,7 +5,8 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 10px 18px;
+  padding-block: 10px;
+  padding-inline: 18px;
 
   &__wave {
     display: flex;
@@ -14,7 +15,8 @@
     flex: 1;
     border-radius: 16px;
     height: 32px;
-    padding: 6px 12px;
+    padding-block: 6px;
+    padding-inline: 12px;
 
     @include light-theme {
       background: $color-gray-05;
@@ -37,6 +39,6 @@
 
   &__timer {
     min-width: 40px;
-    text-align: right;
+    text-align: end;
   }
 }
diff --git a/stylesheets/components/CompositionRecordingDraft.scss b/stylesheets/components/CompositionRecordingDraft.scss
index 59b1fb1a8e..371038652e 100644
--- a/stylesheets/components/CompositionRecordingDraft.scss
+++ b/stylesheets/components/CompositionRecordingDraft.scss
@@ -5,7 +5,8 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 10px 18px;
+  padding-block: 10px;
+  padding-inline: 18px;
 
   &__sizer {
     // ignore the content size
diff --git a/stylesheets/components/CompositionTextArea.scss b/stylesheets/components/CompositionTextArea.scss
index 9ea0730a4a..aae55ce262 100644
--- a/stylesheets/components/CompositionTextArea.scss
+++ b/stylesheets/components/CompositionTextArea.scss
@@ -35,13 +35,13 @@
       min-height: 300px;
       padding: 16px;
       // Need more padding on the right to make room for floating emoji button
-      padding-right: 36px;
+      padding-inline-end: 36px;
     }
   }
 
   &__emoji {
     position: absolute;
-    right: 8px;
+    inset-inline-end: 8px;
     top: 8px;
 
     button::after {
@@ -54,8 +54,9 @@
     color: $color-gray-45;
     position: absolute;
     bottom: 0;
-    left: 0;
-    padding: 12px 12px 12px 24px;
+    inset-inline-start: 0;
+    padding-block: 12px;
+    padding-inline: 24px 12px;
   }
 
   // remove background, should be seamless with modal
diff --git a/stylesheets/components/ContactModal.scss b/stylesheets/components/ContactModal.scss
index aeffe17815..58924ff8f3 100644
--- a/stylesheets/components/ContactModal.scss
+++ b/stylesheets/components/ContactModal.scss
@@ -33,7 +33,8 @@
 
     display: flex;
     align-items: center;
-    padding: 7px 16px;
+    padding-block: 7px;
+    padding-inline: 16px;
     width: 100%;
 
     &:last-child {
@@ -63,7 +64,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-right: 10px;
+    margin-inline-end: 10px;
     width: 20px;
   }
 
@@ -148,7 +149,7 @@
     background: url('../images/icons/v2/official-20.svg') no-repeat center;
     display: inline-block;
     height: 18px;
-    margin-left: 4px;
+    margin-inline-start: 4px;
     margin-bottom: -3px;
     width: 18px;
   }
@@ -157,7 +158,7 @@
     background: url('../images/icons/v2/official-20.svg') no-repeat center;
     display: inline-block;
     height: 18px;
-    margin-left: 9px;
+    margin-inline-start: 9px;
     margin-bottom: -2px;
     width: 18px;
     scale: 1.3;
diff --git a/stylesheets/components/ContactPill.scss b/stylesheets/components/ContactPill.scss
index 91feff97f7..a4f2aa9f27 100644
--- a/stylesheets/components/ContactPill.scss
+++ b/stylesheets/components/ContactPill.scss
@@ -19,7 +19,8 @@
 
   &__contact-name {
     @include font-body-2;
-    padding: 0 6px;
+    padding-block: 0;
+    padding-inline: 6px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -34,7 +35,8 @@
     width: 28px;
     justify-content: center;
     align-items: center;
-    padding: 0 6px 0 4px;
+    padding-block: 0;
+    padding-inline: 4px 6px;
 
     &::before {
       content: '';
diff --git a/stylesheets/components/ContactPills.scss b/stylesheets/components/ContactPills.scss
index ab12b310f3..4f9899c463 100644
--- a/stylesheets/components/ContactPills.scss
+++ b/stylesheets/components/ContactPills.scss
@@ -10,7 +10,8 @@
   max-height: 88px;
   overflow-x: hidden;
   overflow-y: scroll;
-  padding: 4px 24px;
+  padding-block: 4px;
+  padding-inline: 24px;
   gap: 8px 12px;
 
   .module-ContactPill {
diff --git a/stylesheets/components/ContactSpoofingReviewDialog.scss b/stylesheets/components/ContactSpoofingReviewDialog.scss
index 069101a31a..139026220f 100644
--- a/stylesheets/components/ContactSpoofingReviewDialog.scss
+++ b/stylesheets/components/ContactSpoofingReviewDialog.scss
@@ -23,7 +23,8 @@
   hr {
     border: 0;
     height: 1px;
-    margin: 16px 0;
+    margin-block: 16px;
+    margin-inline: 0;
 
     @include light-theme {
       background: $color-gray-05;
@@ -37,7 +38,7 @@
     margin-top: 8px;
 
     .module-Button:not(:last-child) {
-      margin-right: 12px;
+      margin-inline-end: 12px;
     }
   }
 }
diff --git a/stylesheets/components/ContactSpoofingReviewDialogPerson.scss b/stylesheets/components/ContactSpoofingReviewDialogPerson.scss
index f78cf1b517..87a6164ea3 100644
--- a/stylesheets/components/ContactSpoofingReviewDialogPerson.scss
+++ b/stylesheets/components/ContactSpoofingReviewDialogPerson.scss
@@ -9,7 +9,7 @@
   }
 
   &__info {
-    margin-left: 12px;
+    margin-inline-start: 12px;
 
     &__contact-name {
       @include font-body-1;
@@ -28,7 +28,8 @@
 
       &--callout {
         @include font-body-2-italic;
-        margin: 12px 0;
+        margin-block: 12px;
+        margin-inline: 0;
       }
     }
   }
diff --git a/stylesheets/components/ContextMenu.scss b/stylesheets/components/ContextMenu.scss
index de2d777c6e..4989ed9ece 100644
--- a/stylesheets/components/ContextMenu.scss
+++ b/stylesheets/components/ContextMenu.scss
@@ -11,7 +11,8 @@
   &__popper {
     @extend %module-composition-popper;
     margin: 0;
-    padding: 6px 0px;
+    padding-block: 6px;
+    padding-inline: 0px;
     width: auto;
 
     &--single-item {
@@ -38,7 +39,8 @@
     align-items: center;
     display: flex;
     justify-content: space-between;
-    padding: 7px 12px;
+    padding-block: 7px;
+    padding-inline: 12px;
     min-width: 150px;
     width: 100%;
 
@@ -48,13 +50,14 @@
 
     &--icon {
       height: 16px;
-      margin-right: 8px;
+      margin-inline-end: 8px;
       width: 16px;
     }
 
     &--selected {
       height: 12px;
-      margin: 0 6px;
+      margin-block: 0;
+      margin-inline: 6px;
       width: 16px;
 
       @include light-theme {
@@ -94,7 +97,8 @@
   }
 
   &__popper--single-item &__option {
-    padding: 12px 6px;
+    padding-block: 12px;
+    padding-inline: 6px;
   }
 
   &__divider {
diff --git a/stylesheets/components/ConversationDetails.scss b/stylesheets/components/ConversationDetails.scss
index 8e80a3952c..215bf72a3e 100644
--- a/stylesheets/components/ConversationDetails.scss
+++ b/stylesheets/components/ConversationDetails.scss
@@ -7,8 +7,10 @@
       align-items: center;
       display: flex;
       flex-direction: column;
-      margin: 0 0 20px 0;
-      padding: 0 24px;
+      margin-block: 0 20px;
+      margin-inline: 0;
+      padding-block: 0;
+      padding-inline: 24px;
       text-align: center;
       width: 100%;
     }
@@ -49,8 +51,8 @@
 
         content: '';
         height: $size;
-        left: $size + 13px;
-        margin-left: -$size;
+        inset-inline-start: $size + 13px;
+        margin-inline-start: -$size;
         opacity: 0;
         position: relative;
         transition: opacity 100ms ease-out;
@@ -159,7 +161,8 @@
     @include dark-theme {
       color: $color-gray-25;
     }
-    padding: 0 28px;
+    padding-block: 0;
+    padding-inline: 28px;
     padding-top: 16px;
   }
 
@@ -447,13 +450,15 @@
     &__root {
       display: flex;
       justify-content: center;
-      padding: 0 20px;
+      padding-block: 0;
+      padding-inline: 20px;
       padding-bottom: 24px;
 
       .module-media-grid-item {
         border-radius: 4px;
         height: auto;
-        margin: 0 4px;
+        margin-block: 0;
+        margin-inline: 4px;
         max-height: 94px;
         overflow: hidden;
         width: calc(100% / 6);
@@ -494,7 +499,8 @@
       border-radius: 5px;
       border: 2px solid transparent;
       display: flex;
-      padding: 8px 24px;
+      padding-block: 8px;
+      padding-inline: 24px;
       user-select: none;
       width: 100%;
 
@@ -536,14 +542,14 @@
     }
 
     &__icon {
-      margin-right: 12px;
+      margin-inline-end: 12px;
       flex-shrink: 0;
     }
 
     &__label {
       flex-grow: 1;
-      text-align: left;
-      margin-right: 12px;
+      text-align: start;
+      margin-inline-end: 12px;
     }
 
     &__info {
@@ -566,7 +572,7 @@
     }
 
     &__actions {
-      margin-left: 12px;
+      margin-inline-start: 12px;
       overflow: hidden;
       opacity: 0;
 
@@ -594,7 +600,8 @@
 
         content: '';
         display: block;
-        margin: 8px 0;
+        margin-block: 8px;
+        margin-inline: 0;
       }
 
       &--borderless {
@@ -607,7 +614,8 @@
     &__header {
       display: flex;
       justify-content: space-between;
-      padding: 18px 24px 12px;
+      padding-block: 18px 12px;
+      padding-inline: 24px;
 
       &--center {
         justify-content: center;
@@ -625,13 +633,15 @@
     margin-bottom: 24px;
 
     .module-Button {
-      margin: 0 8px;
+      margin-block: 0;
+      margin-inline: 8px;
     }
   }
 
   &__radio {
     &__container {
-      padding: 12px 0;
+      padding-block: 12px;
+      padding-inline: 0;
     }
   }
 }
diff --git a/stylesheets/components/ConversationHeader.scss b/stylesheets/components/ConversationHeader.scss
index 76b3459d31..08d58be124 100644
--- a/stylesheets/components/ConversationHeader.scss
+++ b/stylesheets/components/ConversationHeader.scss
@@ -15,7 +15,7 @@
       width: 13px;
       height: 13px;
       display: block;
-      margin-right: $margin-right;
+      margin-inline-end: $margin-right;
 
       @include light-theme {
         @include color-svg($icon, $color-gray-60);
@@ -55,11 +55,11 @@
     width: 24px;
     height: 24px;
     min-width: 24px;
-    margin-left: -24px;
+    margin-inline-start: -24px;
     vertical-align: text-bottom;
     border: none;
     opacity: 0;
-    transition: margin-left $transition, opacity $transition;
+    transition: margin-inline-start $transition, opacity $transition;
 
     &:disabled {
       cursor: default;
@@ -67,8 +67,7 @@
 
     &--show {
       opacity: 1;
-      margin-right: 6px;
-      margin-left: 12px;
+      margin-inline: 12px 6px;
     }
 
     @include light-theme {
@@ -103,12 +102,11 @@
     display: flex;
     flex-direction: row;
     flex-grow: 1;
-    margin-left: 4px;
-    margin-right: var(--button-spacing);
+    margin-inline: 4px var(--button-spacing);
     padding: $padding;
     overflow: hidden;
     min-width: 0;
-    transition: margin-right 200ms ease-out;
+    transition: margin-inline-end 200ms ease-out;
 
     &--clickable {
       @include button-reset;
@@ -117,10 +115,9 @@
       -webkit-app-region: no-drag;
 
       // These are clobbered by button-reset:
-      margin-left: 4px;
-      margin-right: var(--button-spacing);
+      margin-inline: 4px var(--button-spacing);
       padding: $padding;
-      padding-left: 0;
+      padding-inline-start: 0;
 
       @include keyboard-mode {
         &:focus {
@@ -136,7 +133,7 @@
 
     &__avatar {
       min-width: 32px;
-      margin-right: 12px;
+      margin-inline-end: 12px;
       padding-top: 4px;
       padding-bottom: 4px;
     }
@@ -155,7 +152,7 @@
         user-select: none;
 
         &__in-contacts-icon {
-          margin-left: 4px;
+          margin-inline-start: 4px;
         }
       }
 
@@ -172,7 +169,7 @@
 
         &__expiration {
           @include icon-element('../images/icons/v2/timer-outline-24.svg');
-          margin-right: 12px;
+          margin-inline-end: 12px;
         }
 
         &__verified {
@@ -193,11 +190,11 @@
     border: 2px solid transparent;
     display: flex;
     height: $icon-size;
-    margin-right: var(--button-spacing);
+    margin-inline-end: var(--button-spacing);
     min-width: $icon-size;
     opacity: 0;
     padding: 2px;
-    transition: margin-right 200ms ease-out, opacity 200ms ease-out,
+    transition: margin-inline-end 200ms ease-out, opacity 200ms ease-out,
       background 100ms ease-out;
     width: $icon-size;
 
@@ -296,7 +293,8 @@
       display: flex;
       outline: none;
       overflow: hidden;
-      padding: 5px 18px;
+      padding-block: 5px;
+      padding-inline: 18px;
       text-overflow: ellipsis;
       white-space: nowrap;
       user-select: none;
@@ -312,7 +310,7 @@
         content: '';
         display: block;
         height: $icon-size;
-        margin-right: 5px;
+        margin-inline-end: 5px;
         min-width: $icon-size;
         width: $icon-size;
       }
@@ -326,10 +324,10 @@
   }
 
   &__disappearing-timer__item {
-    padding-left: 25px;
+    padding-inline-start: 25px;
 
     &--active {
-      padding-left: 0px;
+      padding-inline-start: 0px;
       @include icon-element('../images/icons/v2/check-24.svg', 12px);
     }
   }
diff --git a/stylesheets/components/ConversationHero.scss b/stylesheets/components/ConversationHero.scss
index 356ed1c871..e5a892fd9d 100644
--- a/stylesheets/components/ConversationHero.scss
+++ b/stylesheets/components/ConversationHero.scss
@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .module-conversation-hero {
-  padding: 32px 0 28px 0;
+  padding-block: 32px 28px;
+  padding-inline: 0;
   text-align: center;
 
   &__avatar {
@@ -24,7 +25,8 @@
 
   &__with {
     @include font-body-2;
-    margin: 0 auto;
+    margin-block: 0;
+    margin-inline: auto;
     margin-bottom: 16px;
     max-width: 500px;
 
@@ -40,7 +42,9 @@
   &__membership {
     @include font-body-2;
 
-    padding: 0 16px;
+    padding-block: 0;
+
+    padding-inline: 16px;
 
     @include light-theme {
       color: $color-gray-60;
@@ -76,7 +80,7 @@
         content: '';
         display: block;
         height: 14px;
-        margin-right: 8px;
+        margin-inline-end: 8px;
         width: 14px;
 
         @include light-theme {
@@ -106,7 +110,7 @@
       content: '';
       display: inline-block;
       height: 16px;
-      margin-right: 8px;
+      margin-inline-end: 8px;
       vertical-align: middle;
       width: 16px;
 
diff --git a/stylesheets/components/ConversationMergeNotification.scss b/stylesheets/components/ConversationMergeNotification.scss
index 90a1f11c58..5a54411fa0 100644
--- a/stylesheets/components/ConversationMergeNotification.scss
+++ b/stylesheets/components/ConversationMergeNotification.scss
@@ -5,8 +5,7 @@
   &__dialog__image {
     text-align: center;
 
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline: auto;
   }
 
   &__dialog__text-1 {
@@ -14,8 +13,7 @@
 
     margin-top: 32px;
 
-    margin-left: 5px;
-    margin-right: 5px;
+    margin-inline: 5px;
   }
   &__dialog__text-2 {
     text-align: center;
@@ -23,7 +21,6 @@
     margin-top: 24px;
     margin-bottom: 37px;
 
-    margin-left: 5px;
-    margin-right: 5px;
+    margin-inline: 5px;
   }
 }
diff --git a/stylesheets/components/ConversationView.scss b/stylesheets/components/ConversationView.scss
index 9ea7a2eea8..0a703848a3 100644
--- a/stylesheets/components/ConversationView.scss
+++ b/stylesheets/components/ConversationView.scss
@@ -40,7 +40,8 @@
     //   height calculation.
     .quote-wrapper,
     .preview-wrapper {
-      margin: 0 16px 10px 16px;
+      margin-block: 0 10px;
+      margin-inline: 16px;
     }
   }
 }
diff --git a/stylesheets/components/CustomColorEditor.scss b/stylesheets/components/CustomColorEditor.scss
index 217badb6f6..5957ffa700 100644
--- a/stylesheets/components/CustomColorEditor.scss
+++ b/stylesheets/components/CustomColorEditor.scss
@@ -5,14 +5,14 @@
   &__messages {
     border-radius: 8px;
     border: 1px solid $color-gray-15;
-    padding: 27px 0;
+    padding-block: 27px;
+    padding-inline: 0;
     margin-top: 16px;
     position: relative;
   }
 
   &__tabs {
-    margin-left: -16px;
-    margin-right: -16px;
+    margin-inline: -16px;
   }
 
   &__gradient-knob {
@@ -61,7 +61,7 @@
     margin-top: 16px;
 
     .module-Button {
-      margin-left: 8px;
+      margin-inline-start: 8px;
     }
   }
 }
diff --git a/stylesheets/components/CustomizingPreferredReactionsModal.scss b/stylesheets/components/CustomizingPreferredReactionsModal.scss
index 82e8bdb6f6..7d4dd40ee7 100644
--- a/stylesheets/components/CustomizingPreferredReactionsModal.scss
+++ b/stylesheets/components/CustomizingPreferredReactionsModal.scss
@@ -12,7 +12,8 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: 4rem 0;
+    padding-block: 4rem;
+    padding-inline: 0;
     text-align: center;
     user-select: none;
 
diff --git a/stylesheets/components/DebugLogWindow.scss b/stylesheets/components/DebugLogWindow.scss
index c01d53792d..a49554d0f1 100644
--- a/stylesheets/components/DebugLogWindow.scss
+++ b/stylesheets/components/DebugLogWindow.scss
@@ -59,14 +59,15 @@
     margin-top: 16px;
 
     .module-Button {
-      margin-left: 8px;
+      margin-inline-start: 8px;
     }
   }
 
   &__link {
     border-radius: 4px;
     height: 36px;
-    padding: 0 10px;
+    padding-block: 0;
+    padding-inline: 10px;
     width: 100%;
 
     @include light-theme {
diff --git a/stylesheets/components/DisappearingTimeDialog.scss b/stylesheets/components/DisappearingTimeDialog.scss
index e8f2f5b35a..e9626dcb1b 100644
--- a/stylesheets/components/DisappearingTimeDialog.scss
+++ b/stylesheets/components/DisappearingTimeDialog.scss
@@ -7,7 +7,8 @@
   }
 
   &__body p {
-    margin: 0 0 25px 0;
+    margin-block: 0 25px;
+    margin-inline: 0;
   }
 
   &__time-boxes {
@@ -19,7 +20,7 @@
     }
 
     &__units {
-      margin-left: 9px;
+      margin-inline-start: 9px;
     }
   }
 }
diff --git a/stylesheets/components/DisappearingTimerSelect.scss b/stylesheets/components/DisappearingTimerSelect.scss
index df4c0c0277..8d6a96c5f2 100644
--- a/stylesheets/components/DisappearingTimerSelect.scss
+++ b/stylesheets/components/DisappearingTimerSelect.scss
@@ -8,7 +8,7 @@
     position: absolute;
 
     margin-top: 4px;
-    padding-left: 14px;
+    padding-inline-start: 14px;
 
     @include font-subtitle;
 
diff --git a/stylesheets/components/EditConversationAttributesModal.scss b/stylesheets/components/EditConversationAttributesModal.scss
index 52b6507b16..d63d396860 100644
--- a/stylesheets/components/EditConversationAttributesModal.scss
+++ b/stylesheets/components/EditConversationAttributesModal.scss
@@ -3,17 +3,20 @@
 
 .module-EditConversationAttributesModal {
   .module-AvatarInput {
-    margin: 24px 0 24px 0;
+    margin-block: 24px;
+    margin-inline: 0;
   }
 
   &__error-message {
     @include font-body-1;
-    margin: 16px 0;
+    margin-block: 16px;
+    margin-inline: 0;
   }
 
   &__description-warning {
     @include font-subtitle;
     color: $color-gray-45;
-    margin: 0 16px;
+    margin-block: 0;
+    margin-inline: 16px;
   }
 }
diff --git a/stylesheets/components/EditHistoryMessagesModal.scss b/stylesheets/components/EditHistoryMessagesModal.scss
index e8bc592f33..f580fdcb7c 100644
--- a/stylesheets/components/EditHistoryMessagesModal.scss
+++ b/stylesheets/components/EditHistoryMessagesModal.scss
@@ -3,8 +3,7 @@
 
 .EditHistoryMessagesModal {
   .module-message {
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline: 0;
 
     &__link-preview__content {
       @include dark-theme {
diff --git a/stylesheets/components/EditUsernameModalBody.scss b/stylesheets/components/EditUsernameModalBody.scss
index 473a30860a..e9b2e27e53 100644
--- a/stylesheets/components/EditUsernameModalBody.scss
+++ b/stylesheets/components/EditUsernameModalBody.scss
@@ -54,7 +54,8 @@
   &__divider {
     width: 2px;
     height: 20px;
-    margin: 0 12px;
+    margin-block: 0;
+    margin-inline: 12px;
 
     @include light-theme {
       background-color: $color-gray-20;
@@ -71,14 +72,16 @@
 
   &__error {
     @include font-body-2;
-    margin: 16px 0;
+    margin-block: 16px;
+    margin-inline: 0;
 
     color: $color-accent-red;
   }
 
   &__info {
     @include font-body-2;
-    margin: 16px 0;
+    margin-block: 16px;
+    margin-inline: 0;
 
     @include light-theme {
       color: $color-gray-60;
@@ -109,7 +112,7 @@
       display: inline-block;
       width: 20px;
       height: 20px;
-      margin-right: 12px;
+      margin-inline-end: 12px;
 
       -webkit-mask-size: 100%;
       content: '';
diff --git a/stylesheets/components/ForwardMessageModal.scss b/stylesheets/components/ForwardMessageModal.scss
index a473724a4e..f47ef9f902 100644
--- a/stylesheets/components/ForwardMessageModal.scss
+++ b/stylesheets/components/ForwardMessageModal.scss
@@ -7,7 +7,8 @@
   border-radius: 8px;
   display: flex;
   flex-direction: column;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   max-height: 90vh;
   max-width: 360px;
   width: 95%;
@@ -29,7 +30,8 @@
 
   &--link-preview {
     border-bottom: 1px solid $color-gray-15;
-    padding: 12px 16px;
+    padding-block: 12px;
+    padding-inline: 16px;
 
     @include dark-theme() {
       border-color: $color-gray-60;
@@ -54,7 +56,7 @@
       @include button-reset;
       position: absolute;
       top: 8px;
-      right: 16px;
+      inset-inline-end: 16px;
 
       height: 22px;
       width: 22px;
@@ -78,7 +80,7 @@
       @include button-reset;
 
       height: 24px;
-      left: 16px;
+      inset-inline-start: 16px;
       position: absolute;
       width: 24px;
 
diff --git a/stylesheets/components/GradientDial.scss b/stylesheets/components/GradientDial.scss
index b2e714018a..7652c851b1 100644
--- a/stylesheets/components/GradientDial.scss
+++ b/stylesheets/components/GradientDial.scss
@@ -4,10 +4,7 @@
 .GradientDial {
   &__container {
     height: 100%;
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    @include position-absolute-center;
     width: 100%;
   }
 
@@ -24,7 +21,7 @@
       border: 1px solid $color-black-alpha-20;
       height: 100%;
       height: 1000px;
-      left: 50%;
+      inset-inline-start: 50%;
       position: absolute;
       top: 50%;
       transform-origin: center;
@@ -36,7 +33,7 @@
     @include color-bubble(30px);
     box-shadow: 0 0 4px $color-black-alpha-20;
     cursor: move;
-    margin-left: -20px;
+    margin-inline-start: -20px;
     margin-top: -20px;
     padding: 2px;
     position: absolute;
diff --git a/stylesheets/components/GroupDialog.scss b/stylesheets/components/GroupDialog.scss
index a66e8a23b9..925a3a8f6b 100644
--- a/stylesheets/components/GroupDialog.scss
+++ b/stylesheets/components/GroupDialog.scss
@@ -4,7 +4,8 @@
 .module-GroupDialog {
   @include popper-shadow();
   border-radius: 8px;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   max-height: 100%;
   max-width: 360px;
   padding: 16px;
@@ -27,7 +28,7 @@
     @include button-reset;
 
     position: absolute;
-    right: 12px;
+    inset-inline-end: 12px;
     top: 12px;
 
     height: 24px;
@@ -68,15 +69,17 @@
 
   &__paragraph,
   &__contacts {
-    margin: 0 0 16px 0;
-    padding: 0 16px 0 28px;
+    margin-block: 0 16px;
+    margin-inline: 0;
+    padding-block: 0;
+    padding-inline: 28px 16px;
     position: relative;
 
     &::before {
       content: '';
       display: block;
       height: 11px;
-      left: 4px;
+      inset-inline-start: 4px;
       position: absolute;
       top: 4px;
       width: 4px;
@@ -98,7 +101,7 @@
     }
 
     &__contact__name {
-      margin-left: 8px;
+      margin-inline-start: 8px;
     }
   }
 
@@ -114,7 +117,7 @@
       max-width: 152px;
 
       &:not(:first-child) {
-        margin-left: 16px;
+        margin-inline-start: 16px;
       }
     }
   }
diff --git a/stylesheets/components/GroupInput.scss b/stylesheets/components/GroupInput.scss
index 2044130a99..e855c7c268 100644
--- a/stylesheets/components/GroupInput.scss
+++ b/stylesheets/components/GroupInput.scss
@@ -18,7 +18,7 @@
       color: $color-gray-45;
       margin: 12px;
       position: absolute;
-      right: 0;
+      inset-inline-end: 0;
     }
 
     &--large {
diff --git a/stylesheets/components/HueSlider.scss b/stylesheets/components/HueSlider.scss
index cce443f952..ba589bf481 100644
--- a/stylesheets/components/HueSlider.scss
+++ b/stylesheets/components/HueSlider.scss
@@ -18,7 +18,7 @@
     );
     border-radius: 4px;
     height: 8px;
-    margin-left: 7px;
+    margin-inline-start: 7px;
     width: 280px;
   }
 
@@ -26,7 +26,7 @@
     &.Slider__handle {
       border: 7px solid $color-white;
       margin-top: -7px;
-      margin-left: -11px;
+      margin-inline-start: -11px;
       height: 22px;
       width: 22px;
     }
diff --git a/stylesheets/components/IncomingCallBar.scss b/stylesheets/components/IncomingCallBar.scss
index 666aec9e6b..546316cc52 100644
--- a/stylesheets/components/IncomingCallBar.scss
+++ b/stylesheets/components/IncomingCallBar.scss
@@ -8,10 +8,7 @@
     top: 22px;
     width: 100%;
     z-index: $z-index-popup;
-    padding: {
-      left: 1rem;
-      right: 1rem;
-    }
+    padding-inline: 1rem;
   }
 
   &__bar {
@@ -21,7 +18,8 @@
     display: flex;
     height: 70px;
     justify-content: space-between;
-    margin: 0 auto;
+    margin-block: 0;
+    margin-inline: auto;
     max-width: 600px;
     width: 100%;
   }
@@ -33,7 +31,7 @@
 
     &--avatar {
       margin-bottom: 8px;
-      margin-left: 16px;
+      margin-inline-start: 16px;
       margin-top: 8px;
       position: relative;
     }
@@ -42,7 +40,7 @@
       align-items: stretch;
       display: flex;
       flex-direction: column;
-      margin-left: 12px;
+      margin-inline-start: 12px;
       min-width: 0;
     }
 
@@ -67,7 +65,7 @@
 
   &__actions {
     display: flex;
-    margin-right: 16px;
+    margin-inline-end: 16px;
   }
 
   &__button {
@@ -77,8 +75,7 @@
     display: flex;
     height: 40px;
     justify-content: center;
-    margin-left: 12px;
-    margin-right: 12px;
+    margin-inline: 12px;
     outline: none;
     width: 40px;
 
diff --git a/stylesheets/components/Input.scss b/stylesheets/components/Input.scss
index fcfe118ff7..7981477e14 100644
--- a/stylesheets/components/Input.scss
+++ b/stylesheets/components/Input.scss
@@ -7,13 +7,16 @@
     border-radius: 6px;
     border-style: solid;
     border-width: 2px;
-    margin: 16px 0;
-    padding: 2px 16px;
+    margin-block: 16px;
+    margin-inline: 0;
+    padding-block: 2px;
+    padding-inline: 16px;
     display: flex;
     position: relative;
 
     &--expandable {
-      padding: 2px 8px;
+      padding-block: 2px;
+      padding-inline: 8px;
     }
 
     @include light-theme {
@@ -58,7 +61,7 @@
     font-size: 24px;
     height: 32px;
     width: 32px;
-    margin-right: 8px;
+    margin-inline-end: 8px;
   }
 
   &__input {
@@ -122,7 +125,7 @@
     &--large {
       position: absolute;
       bottom: 0;
-      right: 0;
+      inset-inline-end: 0;
 
       margin: 12px;
     }
diff --git a/stylesheets/components/InstallScreenChoosingDeviceNameStep.scss b/stylesheets/components/InstallScreenChoosingDeviceNameStep.scss
index 6315475096..d381923930 100644
--- a/stylesheets/components/InstallScreenChoosingDeviceNameStep.scss
+++ b/stylesheets/components/InstallScreenChoosingDeviceNameStep.scss
@@ -9,7 +9,8 @@
   &__inputs {
     display: flex;
     flex-direction: column;
-    padding: 32px 0 16px 0;
+    padding-block: 32px 16px;
+    padding-inline: 0;
     align-items: center;
   }
 
diff --git a/stylesheets/components/InstallScreenErrorStep.scss b/stylesheets/components/InstallScreenErrorStep.scss
index dfe2174bf1..1d141c4754 100644
--- a/stylesheets/components/InstallScreenErrorStep.scss
+++ b/stylesheets/components/InstallScreenErrorStep.scss
@@ -4,17 +4,16 @@
 .module-InstallScreenErrorStep {
   @include install-screen;
   flex-direction: column;
-  padding-left: 2rem;
-  padding-right: 2rem;
+  padding-inline: 2rem;
   text-align: center;
 
   &__buttons {
     margin-top: 1rem;
 
     .module-Button {
-      margin-left: 1rem;
+      margin-inline-start: 1rem;
       &:first-child {
-        margin-left: 0;
+        margin-inline-start: 0;
       }
     }
   }
diff --git a/stylesheets/components/InstallScreenQrCodeNotScannedStep.scss b/stylesheets/components/InstallScreenQrCodeNotScannedStep.scss
index 9ed9621ff0..d7991a6680 100644
--- a/stylesheets/components/InstallScreenQrCodeNotScannedStep.scss
+++ b/stylesheets/components/InstallScreenQrCodeNotScannedStep.scss
@@ -38,7 +38,8 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    margin: 8px 38px 8px 8px;
+    margin-block: 8px;
+    margin-inline: 8px 38px;
     min-height: $size;
     min-width: $size;
     width: $size;
@@ -72,7 +73,8 @@
         content: '';
         display: block;
         height: 22px;
-        margin: 8px auto 0 auto;
+        margin-block: 8px 0;
+        margin-inline: auto;
         width: 22px;
       }
 
diff --git a/stylesheets/components/InstallScreenSignalLogo.scss b/stylesheets/components/InstallScreenSignalLogo.scss
index 0e5ed1129a..684fc5cadb 100644
--- a/stylesheets/components/InstallScreenSignalLogo.scss
+++ b/stylesheets/components/InstallScreenSignalLogo.scss
@@ -8,14 +8,14 @@
   font-weight: bold;
   position: absolute;
   top: calc(35px + var(--title-bar-drag-area-height));
-  left: 32px;
+  inset-inline-start: 32px;
 
   &::before {
     @include color-svg('../images/signal-logo.svg', $color-ultramarine);
     content: '';
     display: block;
     height: 32px;
-    margin-right: 6px;
+    margin-inline-end: 6px;
     width: 32px;
   }
 }
diff --git a/stylesheets/components/InstallScreenUpdateDialog.scss b/stylesheets/components/InstallScreenUpdateDialog.scss
index 71658d16e0..6d8e17aa2d 100644
--- a/stylesheets/components/InstallScreenUpdateDialog.scss
+++ b/stylesheets/components/InstallScreenUpdateDialog.scss
@@ -18,7 +18,8 @@
       height: 4px;
       overflow: hidden;
       width: 100%;
-      margin: 16px 0;
+      margin-block: 16px;
+      margin-inline: 0;
     }
 
     &--bar {
@@ -27,7 +28,14 @@
       display: block;
       height: 100%;
       width: 100%;
-      transform: translateX(-100%);
+      &:dir(ltr) {
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+        transform: translateX(-100%);
+      }
+      &:dir(rtl) {
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+        transform: translateX(100%);
+      }
       transition: transform 500ms ease-out;
     }
   }
diff --git a/stylesheets/components/LeftPaneDialog.scss b/stylesheets/components/LeftPaneDialog.scss
index 6b4aac24c0..7f55322c19 100644
--- a/stylesheets/components/LeftPaneDialog.scss
+++ b/stylesheets/components/LeftPaneDialog.scss
@@ -24,7 +24,8 @@
   cursor: inherit;
   display: flex;
   min-height: 64px;
-  padding: 12px 14px 12px 16px;
+  padding-block: 12px;
+  padding-inline: 16px 14px;
   user-select: none;
   width: 100%;
 
@@ -34,7 +35,7 @@
   font-weight: 400;
 
   .module-left-pane--width-narrow & {
-    padding-left: 36px;
+    padding-inline-start: 36px;
   }
 
   &__retry {
@@ -62,7 +63,7 @@
   }
 
   &__spinner-container {
-    margin-right: 18px;
+    margin-inline-end: 18px;
   }
 
   &__spinner {
@@ -83,7 +84,7 @@
   &__icon {
     width: 24px;
     height: 24px;
-    margin-right: 18px;
+    margin-inline-end: 18px;
     background-color: $color-white;
     -webkit-mask-size: contain;
 
@@ -120,7 +121,7 @@
     @include button-reset;
 
     border-radius: 4px;
-    float: right;
+    float: inline-end;
     height: 20px;
     width: 20px;
 
@@ -241,7 +242,8 @@
       max-width: 210px;
       overflow: hidden;
       width: 100%;
-      margin: 10px 0 6px 0;
+      margin-block: 10px 6px;
+      margin-inline: 0;
     }
 
     &--bar {
@@ -259,7 +261,14 @@
       display: block;
       height: 100%;
       width: 100%;
-      transform: translateX(-100%);
+      &:dir(ltr) {
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+        transform: translateX(-100%);
+      }
+      &:dir(rtl) {
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+        transform: translateX(100%);
+      }
       transition: transform 500ms ease-out;
     }
   }
diff --git a/stylesheets/components/LeftPaneSearchInput.scss b/stylesheets/components/LeftPaneSearchInput.scss
index 20b0d5061f..01323f9eb0 100644
--- a/stylesheets/components/LeftPaneSearchInput.scss
+++ b/stylesheets/components/LeftPaneSearchInput.scss
@@ -3,7 +3,7 @@
 
 .LeftPaneSearchInput {
   &__input--with-children.module-SearchInput__input--with-children {
-    padding-left: 50px;
+    padding-inline-start: 50px;
   }
 
   &__in-conversation-pill {
@@ -13,8 +13,9 @@
     bottom: 4px;
     display: flex;
     flex-direction: row;
-    left: 3px;
-    padding: 0 3px 0 0;
+    inset-inline-start: 3px;
+    padding-block: 0;
+    padding-inline: 0 3px;
     position: absolute;
     top: 4px;
 
@@ -27,7 +28,7 @@
 
     &__x-button {
       height: 16px;
-      margin-left: 2px;
+      margin-inline-start: 2px;
       width: 16px;
 
       @include light-theme {
diff --git a/stylesheets/components/Lightbox.scss b/stylesheets/components/Lightbox.scss
index d3f6dc965a..448288aa91 100644
--- a/stylesheets/components/Lightbox.scss
+++ b/stylesheets/components/Lightbox.scss
@@ -5,18 +5,16 @@
   &__container {
     background-color: $color-black;
     bottom: 0;
-    left: 0;
+    inset-inline: 0;
     position: absolute;
-    right: 0;
     top: var(--titlebar-height);
     z-index: $z-index-popup;
   }
 
   &__animated {
     bottom: 0;
-    left: 0;
+    inset-inline: 0;
     position: absolute;
-    right: 0;
     top: 0;
     display: flex;
     flex-direction: column;
@@ -43,7 +41,7 @@
     align-items: center;
     display: flex;
     justify-content: center;
-    left: 50%;
+    inset-inline-start: 50%;
     position: absolute;
 
     &--container {
@@ -57,7 +55,7 @@
     position: relative;
     border-radius: 6px;
     height: 44px;
-    margin-right: 8px;
+    margin-inline-end: 8px;
     overflow: hidden;
     width: 44px;
 
@@ -71,7 +69,7 @@
     &--selected::after {
       position: absolute;
       top: 0;
-      left: 0;
+      inset-inline-start: 0;
       content: '';
       width: 100%;
       height: 100%;
@@ -103,7 +101,7 @@
 
     &--video {
       height: 100%;
-      left: 0;
+      inset-inline-start: 0;
       position: absolute;
       top: 0;
       width: 100%;
@@ -149,7 +147,8 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    margin: 0 40px;
+    margin-block: 0;
+    margin-inline: 40px;
   }
 
   &__zoom-button {
@@ -169,7 +168,8 @@
   &__caption {
     @include font-body-2;
     color: $color-white;
-    margin: 12px 0;
+    margin-block: 12px;
+    margin-inline: 0;
     text-align: center;
   }
 
@@ -182,7 +182,8 @@
     background-color: $color-black;
     border-radius: 15px;
     color: #eeefef;
-    padding: 6px 18px;
+    padding-block: 6px;
+    padding-inline: 18px;
     text-align: center;
   }
 
@@ -201,12 +202,12 @@
   }
 
   &__nav-next {
-    right: 0;
+    inset-inline-end: 0;
     align-items: end;
   }
 
   &__nav-prev {
-    left: 0;
+    inset-inline-start: 0;
     align-items: start;
   }
 
@@ -219,7 +220,8 @@
     margin-bottom: 16px;
     min-height: 52px;
     opacity: 1;
-    padding: 0 16px;
+    padding-block: 0;
+    padding-inline: 16px;
     transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
 
     &--container {
@@ -227,7 +229,7 @@
     }
 
     &--avatar {
-      margin-right: 10px;
+      margin-inline-end: 10px;
     }
 
     &--name {
@@ -243,7 +245,8 @@
 
   &__footer {
     opacity: 1;
-    padding: 16px 16px 24px 16px;
+    padding-block: 16px 24px;
+    padding-inline: 16px;
     transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
   }
 
@@ -362,7 +365,7 @@
 
     &--previous {
       justify-content: start;
-      padding-left: 16px;
+      padding-inline-start: 16px;
 
       &::before {
         @include color-svg(
@@ -374,7 +377,7 @@
 
     &--next {
       justify-content: end;
-      padding-right: 16px;
+      padding-inline-end: 16px;
 
       &::before {
         @include color-svg(
diff --git a/stylesheets/components/ListTile.scss b/stylesheets/components/ListTile.scss
index ed64e3daee..f75e694d56 100644
--- a/stylesheets/components/ListTile.scss
+++ b/stylesheets/components/ListTile.scss
@@ -8,7 +8,8 @@ button.ListTile {
 .ListTile {
   display: flex;
   align-items: center;
-  padding: 6px 14px;
+  padding-block: 6px;
+  padding-inline: 14px;
   user-select: none;
 
   // use a transparent border to inset the background
@@ -24,7 +25,8 @@ button.ListTile {
   text-align: inherit;
 
   &--variant-panelrow {
-    padding: 8px 16px;
+    padding-block: 8px;
+    padding-inline: 16px;
   }
 
   &__content {
@@ -78,10 +80,10 @@ button.ListTile {
   }
 
   &__leading {
-    margin-right: 12px;
+    margin-inline-end: 12px;
   }
   &__trailing {
-    margin-left: 12px;
+    margin-inline-start: 12px;
   }
 
   &--clickable {
diff --git a/stylesheets/components/MediaEditor.scss b/stylesheets/components/MediaEditor.scss
index d0dd1a4f71..78dd719285 100644
--- a/stylesheets/components/MediaEditor.scss
+++ b/stylesheets/components/MediaEditor.scss
@@ -9,7 +9,7 @@
   flex-direction: column;
   width: var(--window-width);
   height: var(--window-height);
-  left: 0;
+  inset-inline-start: 0;
   top: var(--titlebar-height);
   position: absolute;
   user-select: none;
@@ -18,7 +18,8 @@
   &__container {
     display: flex;
     flex: 1;
-    padding: 22px 60px;
+    padding-block: 22px;
+    padding-inline: 60px;
     padding-bottom: 0;
     overflow: hidden;
   }
@@ -48,7 +49,8 @@
     display: inline-flex;
     height: 32px;
     justify-content: center;
-    margin: 0 15px;
+    margin-block: 0;
+    margin-inline: 15px;
     opacity: 1;
     width: 32px;
 
@@ -141,7 +143,8 @@
         border-radius: 9999px;
         background: $color-gray-90;
         color: $color-gray-15;
-        padding: 8px 15px;
+        padding-block: 8px;
+        padding-inline: 15px;
         border: none;
 
         & > span {
@@ -171,11 +174,12 @@
     height: $tools-height;
     justify-content: center;
     margin-bottom: 22px;
-    padding: 14px 12px;
+    padding-block: 14px;
+    padding-inline: 12px;
 
     &__tool,
     &__tool__button {
-      margin-right: 14px;
+      margin-inline-end: 14px;
     }
 
     &__button {
@@ -193,13 +197,15 @@
 
       @include button-reset;
       display: flex;
-      margin: 0 8px;
+      margin-block: 0;
+      margin-inline: 8px;
       padding: 8px;
 
       &--words {
         height: auto;
         width: auto;
-        padding: 0 6px;
+        padding-block: 0;
+        padding-inline: 6px;
       }
 
       &--draw-pen__button {
diff --git a/stylesheets/components/MediaQualitySelector.scss b/stylesheets/components/MediaQualitySelector.scss
index b50a60b544..9c133f32be 100644
--- a/stylesheets/components/MediaQualitySelector.scss
+++ b/stylesheets/components/MediaQualitySelector.scss
@@ -4,7 +4,8 @@
 .MediaQualitySelector {
   &__popper {
     @extend %module-composition-popper;
-    padding: 12px 16px;
+    padding-block: 12px;
+    padding-inline: 16px;
     width: auto;
   }
 
@@ -82,12 +83,14 @@
     border-radius: 6px;
     display: flex;
     height: 42px;
-    margin: 2px 0;
+    margin-block: 2px;
+    margin-inline: 0;
     min-width: 200px;
 
     &--checkmark {
       height: 12px;
-      margin: 0 6px;
+      margin-block: 0;
+      margin-inline: 6px;
       width: 16px;
     }
 
diff --git a/stylesheets/components/MessageAudio.scss b/stylesheets/components/MessageAudio.scss
index 4e7be5f57e..3d6a7c60b0 100644
--- a/stylesheets/components/MessageAudio.scss
+++ b/stylesheets/components/MessageAudio.scss
@@ -12,7 +12,7 @@ $audio-attachment-button-margin-small: 4px;
 
   .PlaybackButton {
     @media (min-width: 0px) and (max-width: 799px) {
-      margin-right: $audio-attachment-button-margin-small;
+      margin-inline-end: $audio-attachment-button-margin-small;
     }
   }
 }
@@ -52,7 +52,7 @@ $audio-attachment-button-margin-small: 4px;
 .module-message__audio-attachment__controls {
   display: flex;
   flex: 1;
-  margin-right: 4px;
+  margin-inline-end: 4px;
 }
 
 .module-message__audio-attachment__dot {
@@ -122,7 +122,7 @@ $audio-attachment-button-margin-small: 4px;
   align-items: center;
 
   @media (min-width: 0px) and (max-width: 799px) {
-    margin-left: $audio-attachment-button-size +
+    margin-inline-start: $audio-attachment-button-size +
       $audio-attachment-button-margin-small;
   }
 }
@@ -133,7 +133,7 @@ $audio-attachment-button-margin-small: 4px;
   user-select: none;
   text-align: center;
   white-space: nowrap;
-  margin-right: 12px;
+  margin-inline-end: 12px;
 
   .module-message__audio-attachment--incoming & {
     @include light-theme {
diff --git a/stylesheets/components/MessageBody.scss b/stylesheets/components/MessageBody.scss
index 4b7f91117e..2f26fb8baa 100644
--- a/stylesheets/components/MessageBody.scss
+++ b/stylesheets/components/MessageBody.scss
@@ -23,8 +23,7 @@
     border-radius: 4px;
     cursor: pointer;
     display: inline-block;
-    padding-left: 4px;
-    padding-right: 4px;
+    padding-inline: 4px;
     border: 1px solid transparent;
 
     @include light-theme {
diff --git a/stylesheets/components/MessageDetail.scss b/stylesheets/components/MessageDetail.scss
index f5873ce291..4bb57c2f4b 100644
--- a/stylesheets/components/MessageDetail.scss
+++ b/stylesheets/components/MessageDetail.scss
@@ -3,8 +3,7 @@
 
 .module-message-detail {
   max-width: 650px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   padding: 20px;
   outline: none;
 }
@@ -58,7 +57,8 @@
   display: flex;
   justify-content: space-between;
   margin-top: 24px;
-  padding: 10px 0;
+  padding-block: 10px;
+  padding-inline: 0;
   user-select: none;
 
   &:first-child {
@@ -76,7 +76,7 @@
       display: block;
       flex-shrink: 0;
       height: 12px;
-      margin-left: 10px;
+      margin-inline-start: 10px;
     }
   }
 
@@ -131,7 +131,8 @@
 
 .module-message-detail__contact {
   margin-bottom: 8px;
-  padding: 8px 0;
+  padding-block: 8px;
+  padding-inline: 0;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -144,7 +145,7 @@
 .module-message-detail__contact__text {
   @include font-body-1;
   flex-grow: 1;
-  margin-left: 10px;
+  margin-inline-start: 10px;
 }
 
 .module-message-detail__contact__error {
@@ -153,7 +154,7 @@
 }
 
 .module-message-detail__contact__unidentified-delivery-icon {
-  margin-left: 6px;
+  margin-inline-start: 6px;
 
   width: 18px;
   height: 18px;
@@ -174,7 +175,7 @@
 }
 
 .module-message-detail__contact__error-buttons {
-  text-align: right;
+  text-align: end;
 }
 
 .module-message-detail__contact__show-safety-number {
@@ -193,7 +194,7 @@
 }
 .module-message-detail__contact__send-anyway {
   @include button-reset;
-  margin-left: 5px;
+  margin-inline-start: 5px;
   margin-top: 5px;
   padding: 4px;
   border-radius: 4px;
@@ -203,5 +204,5 @@
 }
 
 .module-message-detail__status-timestamp {
-  margin-left: 6px;
+  margin-inline-start: 6px;
 }
diff --git a/stylesheets/components/MiniPlayer.scss b/stylesheets/components/MiniPlayer.scss
index 0bd5ce1e71..1f1ae6eb02 100644
--- a/stylesheets/components/MiniPlayer.scss
+++ b/stylesheets/components/MiniPlayer.scss
@@ -17,15 +17,15 @@
 .MiniPlayer {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   z-index: calc($z-index-above-above-base + 1);
   display: flex;
   align-items: center;
   gap: 18px;
-  padding: 8px 16px;
+  padding-block: 8px;
+  padding-inline: 16px;
   margin-top: calc(52px + var(--title-bar-drag-area-height));
-  text-align: left;
+  text-align: start;
 
   @include light-theme {
     background-color: $color-gray-02;
@@ -67,7 +67,8 @@
   }
 
   &__middot {
-    padding: 0 5px;
+    padding-block: 0;
+    padding-inline: 5px;
   }
 
   &__close-button {
diff --git a/stylesheets/components/Modal.scss b/stylesheets/components/Modal.scss
index 882febef95..de493c32b2 100644
--- a/stylesheets/components/Modal.scss
+++ b/stylesheets/components/Modal.scss
@@ -24,7 +24,8 @@
     align-items: center;
     display: flex;
     justify-content: space-between;
-    padding: 16px 16px 1em 16px;
+    padding-block: 16px 1em;
+    padding-inline: 16px;
 
     &--with-back-button .module-Modal__title {
       text-align: center;
@@ -142,7 +143,8 @@
 
       // ProfileEditor nests footer within the Modal's body
       .module-Modal__button-footer {
-        padding: 1em 0 0 0;
+        padding-block: 1em 0;
+        padding-inline: 0;
       }
     }
   }
@@ -197,11 +199,12 @@
     flex-wrap: wrap;
     justify-content: flex-end;
     align-items: center;
-    padding: 1em 16px 16px 16px;
+    padding-block: 1em 16px;
+    padding-inline: 16px;
     gap: 8px;
 
     .module-Button {
-      margin-left: 8px;
+      margin-inline-start: 8px;
     }
 
     &--one-button-per-line {
@@ -212,7 +215,8 @@
 
   // Overrides for a modal with important message
   &--important {
-    padding: 10px 12px 16px 12px;
+    padding-block: 10px 16px;
+    padding-inline: 12px;
 
     .module-Modal__header {
       // Necessary because of the larger top margins for the title
@@ -221,17 +225,20 @@
     }
 
     .module-Modal__body {
-      padding: 0 12px 4px 12px !important;
+      padding-block: 0 4px !important;
+      padding-inline: 12px !important;
     }
 
     .module-Modal__body p {
-      margin: 0 0 20px 0;
+      margin-block: 0 20px;
+      margin-inline: 0;
     }
 
     .module-Modal__title {
       @include font-title-2;
       text-align: center;
-      margin: 10px 0 22px 0;
+      margin-block: 10px 22px;
+      margin-inline: 0;
 
       flex-shrink: 0;
 
@@ -245,14 +252,15 @@
       margin-top: 27px;
       flex-grow: 0;
       flex-shrink: 0;
-      padding: 0 12px 4px 12px;
+      padding-block: 0 4px;
+      padding-inline: 12px;
 
       .module-Button {
         flex-grow: 1;
         max-width: 152px;
 
         &:not(:first-child) {
-          margin-left: 16px;
+          margin-inline-start: 16px;
         }
       }
     }
diff --git a/stylesheets/components/MyStories.scss b/stylesheets/components/MyStories.scss
index 8653120024..9321ac036e 100644
--- a/stylesheets/components/MyStories.scss
+++ b/stylesheets/components/MyStories.scss
@@ -6,7 +6,8 @@
     &__title {
       @include font-body-1-bold;
       color: $color-gray-05;
-      margin: 24px 10px 8px 10px;
+      margin-block: 24px 8px;
+      margin-inline: 10px;
     }
   }
 
@@ -19,7 +20,7 @@
     border-radius: 10px;
     display: flex;
     height: 96px;
-    padding-right: 10px;
+    padding-inline-end: 10px;
 
     &:hover {
       background: $color-gray-65;
@@ -36,7 +37,7 @@
       display: flex;
       flex-direction: column;
       flex: 1;
-      margin-left: 12px;
+      margin-inline-start: 12px;
 
       &__failed {
         align-items: center;
@@ -46,7 +47,7 @@
           content: '';
           display: block;
           height: 12px;
-          margin-right: 12px;
+          margin-inline-end: 12px;
           width: 12px;
           @include color-svg(
             '../images/icons/v2/error-outline-24.svg',
@@ -99,7 +100,7 @@
       display: flex;
       height: 28px;
       justify-content: center;
-      margin-left: 16px;
+      margin-inline-start: 16px;
       width: 28px;
 
       &::after {
@@ -157,7 +158,7 @@
     height: 20px;
     justify-content: center;
     position: absolute;
-    right: -4px;
+    inset-inline-end: -4px;
     width: 20px;
     z-index: $z-index-base;
 
diff --git a/stylesheets/components/OutgoingGiftBadgeModal.scss b/stylesheets/components/OutgoingGiftBadgeModal.scss
index 8cf5ffc44d..ff86e36701 100644
--- a/stylesheets/components/OutgoingGiftBadgeModal.scss
+++ b/stylesheets/components/OutgoingGiftBadgeModal.scss
@@ -16,8 +16,7 @@
   &__description {
     @include font-body-1;
     margin-top: 8px;
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline: auto;
     width: 328px;
   }
   &__badge {
@@ -27,8 +26,7 @@
 
     &--missing {
       border-radius: 50%;
-      margin-left: auto;
-      margin-right: auto;
+      margin-inline: auto;
 
       @include light-theme {
         background-color: $color-gray-05;
diff --git a/stylesheets/components/PermissionsPopup.scss b/stylesheets/components/PermissionsPopup.scss
index 9cd9b0bd46..c261a92315 100644
--- a/stylesheets/components/PermissionsPopup.scss
+++ b/stylesheets/components/PermissionsPopup.scss
@@ -29,7 +29,7 @@
     width: 100%;
 
     button {
-      margin-left: 16px;
+      margin-inline-start: 16px;
     }
   }
 }
diff --git a/stylesheets/components/PlaybackButton.scss b/stylesheets/components/PlaybackButton.scss
index 722f63ff72..c407421b65 100644
--- a/stylesheets/components/PlaybackButton.scss
+++ b/stylesheets/components/PlaybackButton.scss
@@ -5,7 +5,7 @@
   @include button-reset;
 
   flex-shrink: 0;
-  margin-right: $audio-attachment-button-margin-big;
+  margin-inline-end: $audio-attachment-button-margin-big;
 
   outline: none;
   border-radius: 18px;
diff --git a/stylesheets/components/PlaybackRateButton.scss b/stylesheets/components/PlaybackRateButton.scss
index 5a7218da33..d368074f1f 100644
--- a/stylesheets/components/PlaybackRateButton.scss
+++ b/stylesheets/components/PlaybackRateButton.scss
@@ -12,8 +12,10 @@
   font-weight: 700;
   border-radius: 4px;
   font-size: 11px;
-  padding: 1px 2px;
-  margin: -2px 0;
+  padding-block: 1px;
+  padding-inline: 2px;
+  margin-block: -2px;
+  margin-inline: 0;
   line-height: 16px;
   letter-spacing: 0.05px;
   user-select: none;
@@ -48,7 +50,7 @@
     display: inline-block;
     width: 8px;
     height: 8px;
-    margin-left: 2px;
+    margin-inline-start: 2px;
 
     @mixin x-icon($color) {
       @include color-svg('../images/icons/v2/x-8.svg', $color, false);
diff --git a/stylesheets/components/Preferences.scss b/stylesheets/components/Preferences.scss
index 831a660004..c41246e689 100644
--- a/stylesheets/components/Preferences.scss
+++ b/stylesheets/components/Preferences.scss
@@ -35,7 +35,8 @@
   }
 
   &__padding {
-    padding: 0 24px;
+    padding-block: 0;
+    padding-inline: 24px;
   }
 
   &__button {
@@ -45,7 +46,8 @@
     display: flex;
     height: 48px;
     width: 100%;
-    padding: 14px 0;
+    padding-block: 14px;
+    padding-inline: 0;
 
     &--selected {
       @include light-theme {
@@ -69,8 +71,7 @@
       content: '';
       display: block;
       height: 22px;
-      margin-left: 18px;
-      margin-right: 14px;
+      margin-inline: 18px 14px;
       width: 22px;
     }
 
@@ -180,7 +181,8 @@
 
   &__link {
     @include button-reset;
-    padding: 0px 0 28px 0;
+    padding-block: 0px 28px;
+    padding-inline: 0;
     width: 100%;
 
     h3 {
@@ -207,11 +209,12 @@
     display: flex;
     justify-content: space-between;
     min-height: 48px;
-    padding: 4px 24px;
+    padding-block: 4px;
+    padding-inline: 24px;
 
     &--key {
       flex-grow: 1;
-      padding-right: 20px;
+      padding-inline-end: 20px;
     }
 
     &--value {
@@ -220,7 +223,8 @@
 
     &--clickable {
       @include button-reset;
-      padding: 4px 24px;
+      padding-block: 4px;
+      padding-inline: 24px;
       width: 100%;
       &:hover {
         @include light-theme {
@@ -234,7 +238,8 @@
   }
 
   &__checkbox {
-    padding: 10px 24px;
+    padding-block: 10px;
+    padding-inline: 24px;
   }
 
   &__description {
@@ -271,7 +276,7 @@
 
     display: inline-block;
     height: 24px;
-    margin-left: 12px;
+    margin-inline-start: 12px;
     min-width: 24px;
     vertical-align: text-bottom;
     width: 24px;
diff --git a/stylesheets/components/ProfileEditor.scss b/stylesheets/components/ProfileEditor.scss
index 2f758ee053..e2b2603bb5 100644
--- a/stylesheets/components/ProfileEditor.scss
+++ b/stylesheets/components/ProfileEditor.scss
@@ -50,8 +50,7 @@
   }
 
   &__row {
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline: 0;
   }
 
   &__divider {
@@ -69,7 +68,8 @@
 
   &__info {
     @include font-body-2;
-    margin: 16px 0;
+    margin-block: 16px;
+    margin-inline: 0;
 
     @include light-theme {
       color: $color-gray-60;
diff --git a/stylesheets/components/Quote.scss b/stylesheets/components/Quote.scss
index 595f0eed55..c563e31d95 100644
--- a/stylesheets/components/Quote.scss
+++ b/stylesheets/components/Quote.scss
@@ -4,12 +4,9 @@
 .module-quote {
   &__container {
     .module-message & {
-      margin: {
-        left: -4px;
-        right: -4px;
-        top: 0px;
-        bottom: 8px;
-      }
+      margin-inline: -4px;
+      margin-top: 0px;
+      margin-bottom: 8px;
     }
   }
 
@@ -33,7 +30,7 @@
   &__reaction-emoji {
     bottom: 5px;
     position: absolute;
-    right: 25px;
+    inset-inline-end: 25px;
     z-index: $z-index-base;
 
     img.emoji {
@@ -44,7 +41,7 @@
     &--story-unavailable {
       align-items: flex-end;
       display: flex;
-      margin-left: 32px;
+      margin-inline-start: 32px;
       padding-bottom: 7px;
     }
   }
@@ -63,7 +60,7 @@
   background-color: $color-steel;
 
   .module-quote__primary {
-    border-left-color: $color-steel;
+    border-inline-start-color: $color-steel;
   }
 
   // To preserve contrast
@@ -79,7 +76,7 @@
     background-color: scale-color($value, $lightness: 60%);
 
     .module-quote__primary {
-      border-left-color: $value;
+      border-inline-start-color: $value;
     }
 
     @include dark-theme {
@@ -91,12 +88,12 @@
     background-color: scale-color($value, $lightness: 60%);
 
     .module-quote__primary {
-      border-left-color: $color-white;
+      border-inline-start-color: $color-white;
     }
 
     @include dark-theme {
       background-color: scale-color($value, $lightness: -40%);
-      border-left-color: $color-white;
+      border-inline-start-color: $color-white;
     }
   }
 
@@ -104,13 +101,13 @@
     background-color: scale-color($value, $lightness: 60%);
 
     .module-quote__primary {
-      border-left-color: $value;
+      border-inline-start-color: $value;
     }
 
     @include dark-theme {
       background-color: scale-color($value, $lightness: -40%);
       .module-quote__primary {
-        border-left-color: $color-white;
+        border-inline-start-color: $color-white;
       }
     }
   }
@@ -126,7 +123,7 @@
   .module-quote--compose-#{$color},
   .module-quote--incoming-#{$color} {
     .module-quote__primary {
-      border-left-color: map-get($value, 'start');
+      border-inline-start-color: map-get($value, 'start');
     }
   }
   .module-quote--compose-#{$color},
@@ -151,15 +148,14 @@
   }
   .module-quote--outgoing-#{$color} {
     .module-quote__primary {
-      border-left-color: $color-white;
+      border-inline-start-color: $color-white;
     }
   }
 }
 
 .module-quote__primary {
   flex-grow: 1;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-inline: 8px;
   padding-top: 7px;
   padding-bottom: 7px;
 
@@ -252,7 +248,7 @@
 .module-quote__close-container {
   position: absolute;
   top: 4px;
-  right: 4px;
+  inset-inline-end: 4px;
   height: 16px;
   width: 16px;
 
@@ -273,11 +269,7 @@
   width: 14px;
   height: 14px;
 
-  position: absolute;
-  left: 50%;
-  top: 50%;
-
-  transform: translate(-50%, -50%);
+  @include position-absolute-center;
 
   @include color-svg('../images/icons/v2/x-24.svg', $color-white);
 }
@@ -306,9 +298,8 @@
 .module-quote__icon-container__inner {
   position: absolute;
   top: 0;
-  right: 0;
+  inset-inline: 0;
   bottom: 0;
-  left: 0;
 
   text-align: center;
   display: flex;
@@ -368,8 +359,7 @@
   background-repeat: no-repeat;
   height: 28px;
   width: 36px;
-  margin-left: -4px;
-  margin-right: -6px;
+  margin-inline: -4px -6px;
   margin-bottom: 5px;
 }
 .module-quote__generic-file__text {
@@ -403,10 +393,9 @@
 
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
-  border-left-style: solid;
+  border-inline-start-style: solid;
   border-left-width: 4px;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-inline: 8px;
 }
 
 .module-quote__reference-warning__icon {
@@ -433,7 +422,7 @@
 .module-quote__reference-warning__text {
   @include font-caption;
 
-  margin-left: 6px;
+  margin-inline-start: 6px;
 
   @include light-theme {
     color: $color-gray-90;
diff --git a/stylesheets/components/ReactionPickerPicker.scss b/stylesheets/components/ReactionPickerPicker.scss
index c7d24f0054..baeb4deaa2 100644
--- a/stylesheets/components/ReactionPickerPicker.scss
+++ b/stylesheets/components/ReactionPickerPicker.scss
@@ -20,17 +20,16 @@
   box-shadow: 0 1px 4px $color-black-alpha-05, 0 10px 16px $color-black-alpha-20;
   display: inline-flex;
   flex-direction: row;
-  padding: 3px 7px;
+  padding-block: 3px;
+  padding-inline: 7px;
   position: relative;
   user-select: none;
 
   @media (prefers-reduced-motion: no-preference) {
-    animation: {
-      name: module-ReactionPickerPicker__appear;
-      duration: 400ms;
-      timing-function: $ease-out-expo;
-      fill-mode: forwards;
-    }
+    animation-name: module-ReactionPickerPicker__appear;
+    animation-duration: 400ms;
+    animation-timing-function: $ease-out-expo;
+    animation-fill-mode: forwards;
   }
 
   @include light-theme {
@@ -109,11 +108,11 @@
       &__dot {
         border-radius: 50%;
         height: 3px;
-        margin-right: 4px;
+        margin-inline-end: 4px;
         width: 3px;
 
         &:last-child {
-          margin-right: 0;
+          margin-inline-end: 0;
         }
 
         @include light-theme {
@@ -142,15 +141,13 @@
         // Prevent animation jank
         opacity: 0;
 
-        animation: {
-          name: module-ReactionPickerPicker__button-appear;
-          duration: 400ms;
-          timing-function: $ease-out-expo;
-          fill-mode: forwards;
-          // This delay is a fallback in case there are more than the expected number of
-          //   buttons.
-          delay: #{$max-expected-buttons * 10ms};
-        }
+        animation-name: module-ReactionPickerPicker__button-appear;
+        animation-duration: 400ms;
+        animation-timing-function: $ease-out-expo;
+        animation-fill-mode: forwards;
+        // This delay is a fallback in case there are more than the expected number of
+        //   buttons.
+        animation-delay: #{$max-expected-buttons * 10ms};
       }
 
       @for $i from 0 through $max-expected-buttons {
@@ -242,11 +239,13 @@
 
 @keyframes module-ReactionPickerPicker__button-appear {
   from {
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
     transform: translate3d(0, 24px, 0);
     opacity: 0;
   }
 
   to {
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
     transform: translate3d(0, 0, 0);
     opacity: 1;
   }
diff --git a/stylesheets/components/RecordingComposer.scss b/stylesheets/components/RecordingComposer.scss
index 2d83419f0c..8044770baa 100644
--- a/stylesheets/components/RecordingComposer.scss
+++ b/stylesheets/components/RecordingComposer.scss
@@ -5,7 +5,8 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 10px 18px;
+  padding-block: 10px;
+  padding-inline: 18px;
 
   &__content {
     display: flex;
@@ -14,7 +15,8 @@
     flex: 1;
     border-radius: 16px;
     height: 32px;
-    padding: 6px 12px;
+    padding-block: 6px;
+    padding-inline: 12px;
     overflow: hidden;
 
     @include light-theme {
@@ -29,6 +31,7 @@
     font-size: 13px;
     min-width: 76px;
     line-height: 18px;
-    padding: 5px 16px;
+    padding-block: 5px;
+    padding-inline: 16px;
   }
 }
diff --git a/stylesheets/components/SafetyNumberChangeDialog.scss b/stylesheets/components/SafetyNumberChangeDialog.scss
index 554b99447c..689b40e2c0 100644
--- a/stylesheets/components/SafetyNumberChangeDialog.scss
+++ b/stylesheets/components/SafetyNumberChangeDialog.scss
@@ -16,8 +16,7 @@
   }
 
   &__shield-icon {
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline: auto;
 
     height: 24px;
     width: 24px;
@@ -55,8 +54,7 @@
     text-align: center;
     margin-top: 8px;
     margin-bottom: 24px;
-    padding-left: 4px;
-    padding-right: 4px;
+    padding-inline: 4px;
 
     @include light-theme {
       color: $color-gray-60;
@@ -67,8 +65,7 @@
     }
 
     &--narrow {
-      padding-left: 38px;
-      padding-right: 38px;
+      padding-inline: 38px;
     }
   }
 
@@ -89,12 +86,12 @@
     &__story-name {
       @include font-body-1-bold;
       flex-grow: 1;
-      margin-right: auto;
+      margin-inline-end: auto;
     }
 
     &--wrapper {
       flex-grow: 1;
-      margin-left: 12px;
+      margin-inline-start: 12px;
     }
 
     &--name {
@@ -133,14 +130,17 @@
       }
 
       border-radius: 4px;
-      padding: 8px 14px;
+      padding-block: 8px;
+      padding-inline: 14px;
     }
 
     &__chevron__option {
-      padding: 10px 15px;
+      padding-block: 10px;
+      padding-inline: 15px;
 
       .ContextMenu__popper--single-item & {
-        padding: 10px 15px;
+        padding-block: 10px;
+        padding-inline: 15px;
       }
 
       &--container {
diff --git a/stylesheets/components/SafetyNumberViewer.scss b/stylesheets/components/SafetyNumberViewer.scss
index 5e9dc54dde..2f8aa7a9ea 100644
--- a/stylesheets/components/SafetyNumberViewer.scss
+++ b/stylesheets/components/SafetyNumberViewer.scss
@@ -14,7 +14,7 @@
   &__icon--verified {
     display: inline-block;
     height: 1.25em;
-    margin-right: 4px;
+    margin-inline-end: 4px;
     vertical-align: text-bottom;
     width: 1.25em;
 
@@ -34,7 +34,7 @@
   &__icon--shield {
     display: inline-block;
     height: 1.25em;
-    margin-right: 4px;
+    margin-inline-end: 4px;
     vertical-align: text-bottom;
     width: 1.25em;
 
@@ -57,7 +57,8 @@
     border-radius: 8px;
     font-family: $monospace;
     height: 100px;
-    margin: 24px auto;
+    margin-block: 24px;
+    margin-inline: auto;
     padding: 24px;
     width: 240px;
 
@@ -70,12 +71,13 @@
   }
 
   &__verification-status {
-    margin: 30px 0 10px;
+    margin-block: 30px 10px;
+    margin-inline: 0;
     text-align: center;
   }
 
   &__buttons {
-    text-align: right;
+    text-align: end;
   }
 
   &__button {
diff --git a/stylesheets/components/ScrollDownButton.scss b/stylesheets/components/ScrollDownButton.scss
index f098ed2fd4..1b8192a295 100644
--- a/stylesheets/components/ScrollDownButton.scss
+++ b/stylesheets/components/ScrollDownButton.scss
@@ -4,7 +4,7 @@
 .ScrollDownButton {
   z-index: $z-index-scroll-down-button;
   position: absolute;
-  right: 16px;
+  inset-inline-end: 16px;
   bottom: 12px;
 
   &__button {
@@ -55,7 +55,8 @@
       height: 16px;
       min-width: 16px;
       border-radius: 8px;
-      padding: 1px 4px;
+      padding-block: 1px;
+      padding-inline: 4px;
       background-color: $color-ultramarine;
       color: $color-white;
 
diff --git a/stylesheets/components/SearchInput.scss b/stylesheets/components/SearchInput.scss
index c6870d8af6..56f8d1b56f 100644
--- a/stylesheets/components/SearchInput.scss
+++ b/stylesheets/components/SearchInput.scss
@@ -3,17 +3,14 @@
 
 .module-SearchInput {
   &__container {
-    margin: {
-      left: 16px;
-      right: 16px;
-      bottom: 8px;
-    }
+    margin-inline: 16px;
+    margin-bottom: 8px;
     position: relative;
   }
 
   &__icon {
     height: 16px;
-    left: 8px;
+    inset-inline-start: 8px;
     pointer-events: none;
     position: absolute;
     top: 6px;
@@ -30,7 +27,7 @@
   &__input {
     background: transparent;
     border: none;
-    padding-left: 16px;
+    padding-inline-start: 16px;
     width: 100%;
 
     &:placeholder {
@@ -55,8 +52,7 @@
     border: solid 1px transparent;
     border-radius: 8px;
     height: 28px;
-    padding-left: 30px;
-    padding-right: 5px;
+    padding-inline: 30px 5px;
     width: 100%;
 
     @include light-theme {
@@ -84,14 +80,14 @@
     }
 
     &--with-text {
-      padding-right: 30px;
+      padding-inline-end: 30px;
     }
   }
 
   &__cancel {
     height: 18px;
     position: absolute;
-    right: 8px;
+    inset-inline-end: 8px;
     top: 5px;
     width: 18px;
 
diff --git a/stylesheets/components/SearchResultsLoadingFakeRow.scss b/stylesheets/components/SearchResultsLoadingFakeRow.scss
index 7fdc7eb66d..81a2fadc4f 100644
--- a/stylesheets/components/SearchResultsLoadingFakeRow.scss
+++ b/stylesheets/components/SearchResultsLoadingFakeRow.scss
@@ -6,8 +6,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 10px 14px;
-  margin: 2px 0;
+  padding-block: 10px;
+  padding-inline: 14px;
+  margin-block: 2px;
+  margin-inline: 0;
 
   &__avatar {
     width: 48px;
@@ -21,7 +23,7 @@
     flex-direction: column;
     flex-grow: 1;
     justify-content: center;
-    margin-left: 12px;
+    margin-inline-start: 12px;
 
     &__line {
       &:nth-child(1) {
diff --git a/stylesheets/components/Select.scss b/stylesheets/components/Select.scss
index 002e23507b..747e7ab6eb 100644
--- a/stylesheets/components/Select.scss
+++ b/stylesheets/components/Select.scss
@@ -14,8 +14,7 @@
     min-width: 124px;
     outline: 0;
     padding: 10px;
-    padding-left: 12px;
-    padding-right: 32px;
+    padding-inline: 12px 32px;
     text-overflow: ellipsis;
     width: 100%;
 
@@ -29,7 +28,7 @@
       &:focus {
         border: 3px solid $color-ultramarine;
         line-height: 14px;
-        padding-left: 10px;
+        padding-inline-start: 10px;
       }
     }
   }
@@ -37,6 +36,7 @@
   &::after {
     border: 2px solid $color-gray-60;
     border-radius: 2px;
+    /* stylelint-disable-next-line liberty/use-logical-spec */
     border-right: 0;
     border-top: 0;
     content: ' ';
@@ -44,7 +44,7 @@
     height: 10px;
     pointer-events: none;
     position: absolute;
-    right: 15px;
+    inset-inline-end: 15px;
     top: 14px;
     transform-origin: center;
     transform: rotate(-45deg);
diff --git a/stylesheets/components/SelectModeActions.scss b/stylesheets/components/SelectModeActions.scss
index ff473dda49..a69f344494 100644
--- a/stylesheets/components/SelectModeActions.scss
+++ b/stylesheets/components/SelectModeActions.scss
@@ -9,7 +9,8 @@
 
 .SelectModeActions__selectedMessages {
   flex: 1;
-  padding: 17px 10px;
+  padding-block: 17px;
+  padding-inline: 10px;
   @include font-body-1;
   @include light-theme() {
     color: $color-gray-60;
diff --git a/stylesheets/components/SendStoryModal.scss b/stylesheets/components/SendStoryModal.scss
index b391898e2a..70ff488318 100644
--- a/stylesheets/components/SendStoryModal.scss
+++ b/stylesheets/components/SendStoryModal.scss
@@ -24,21 +24,22 @@
   }
 
   .module-SearchInput__container {
-    margin-left: 0;
-    margin-right: 0;
+    margin-inline: 0;
   }
 
   &__story-preview {
     height: 140px;
     width: 80px;
     border-radius: 12px;
-    margin: 0 auto 16px auto;
+    margin-block: 0 16px;
+    margin-inline: auto;
     background-size: cover;
   }
 
   &__item--contact-or-conversation {
     height: 52px;
-    padding: 0 6px;
+    padding-block: 0;
+    padding-inline: 6px;
   }
 
   &__top-bar {
@@ -52,13 +53,14 @@
   &__new-story {
     &__button {
       font-weight: 500;
-      padding: 5px 10px;
+      padding-block: 5px;
+      padding-inline: 10px;
       &::before {
         @include color-svg('../images/icons/v2/plus-20.svg', $color-white);
         content: '';
         height: 16px;
         width: 16px;
-        margin-right: 8px;
+        margin-inline-end: 8px;
         display: inline-block;
         vertical-align: text-bottom;
       }
@@ -68,7 +70,7 @@
       padding: 10px;
 
       &--icon {
-        margin-right: 15px;
+        margin-inline-end: 15px;
       }
 
       &--container {
@@ -139,12 +141,13 @@
     height: 52px;
     &__container {
       justify-content: space-between;
-      padding: 8px 0;
+      padding-block: 8px;
+      padding-inline: 0;
       user-select: none;
     }
 
     &__info {
-      margin-left: 8px;
+      margin-inline-start: 8px;
     }
 
     &__label {
@@ -166,7 +169,7 @@
     }
 
     &__checkbox {
-      margin-right: 0;
+      margin-inline-end: 0;
       position: relative;
     }
 
@@ -208,6 +211,7 @@
           content: '';
           display: block;
           height: 11px;
+          /* stylelint-disable-next-line liberty/use-logical-spec */
           left: 7px;
           position: absolute;
           top: 3px;
@@ -221,7 +225,7 @@
   &__selected-lists {
     @include font-body-2;
     color: $color-gray-15;
-    padding-right: 16px;
+    padding-inline-end: 16px;
     user-select: none;
     flex: 1;
     display: flex;
diff --git a/stylesheets/components/SignalConnectionsModal.scss b/stylesheets/components/SignalConnectionsModal.scss
index 9c98103434..48dc36a4f9 100644
--- a/stylesheets/components/SignalConnectionsModal.scss
+++ b/stylesheets/components/SignalConnectionsModal.scss
@@ -11,16 +11,19 @@
     );
     display: block;
     height: 69px;
-    margin: 0 auto;
+    margin-block: 0;
+    margin-inline: auto;
     margin-bottom: 24px;
     width: 75px;
   }
 
   &__list {
-    margin: 16px 0;
+    margin-block: 16px;
+    margin-inline: 0;
 
     li {
-      margin: 8px 0;
+      margin-block: 8px;
+      margin-inline: 0;
     }
   }
 
diff --git a/stylesheets/components/Slider.scss b/stylesheets/components/Slider.scss
index 0c8c990a74..d94897ba7a 100644
--- a/stylesheets/components/Slider.scss
+++ b/stylesheets/components/Slider.scss
@@ -14,7 +14,7 @@
     border: 1px solid $color-white;
     cursor: move;
     height: 16px;
-    margin-left: -4px;
+    margin-inline-start: -4px;
     margin-top: -4px;
     position: absolute;
     width: 16px;
diff --git a/stylesheets/components/StagedLinkPreview.scss b/stylesheets/components/StagedLinkPreview.scss
index 4c5830e392..e8403944e9 100644
--- a/stylesheets/components/StagedLinkPreview.scss
+++ b/stylesheets/components/StagedLinkPreview.scss
@@ -17,7 +17,7 @@
     flex-direction: row;
     height: 74px;
     justify-content: center;
-    margin-right: 32px;
+    margin-inline-end: 32px;
     width: 74px;
 
     &::after {
@@ -46,12 +46,12 @@
 }
 
 .module-staged-link-preview__icon-container {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
 .module-staged-link-preview__content {
   display: flex;
   flex-direction: column;
-  margin-right: 20px;
+  margin-inline-end: 20px;
 
   &--only-url {
     justify-content: center;
@@ -100,8 +100,7 @@
     &:before {
       content: '•';
       font-size: 50%;
-      margin-left: 0.2rem;
-      margin-right: 0.2rem;
+      margin-inline: 0.2rem;
     }
   }
 }
@@ -122,7 +121,7 @@
 
   position: absolute;
   top: 0px;
-  right: 0px;
+  inset-inline-end: 0px;
 
   height: 16px;
   width: 16px;
diff --git a/stylesheets/components/StickerManager.scss b/stylesheets/components/StickerManager.scss
index 8d81d2c9d8..82782023e4 100644
--- a/stylesheets/components/StickerManager.scss
+++ b/stylesheets/components/StickerManager.scss
@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .module-sticker-manager {
-  padding: 0 16px;
+  padding-block: 0;
+  padding-inline: 16px;
   outline: none;
 }
 
@@ -11,7 +12,7 @@
 
   letter-spacing: 0px;
   line-height: 18px;
-  padding-left: 8px;
+  padding-inline-start: 8px;
 
   @include light-theme() {
     color: $color-gray-60;
@@ -59,10 +60,8 @@
   background-color: $color-white;
   display: inline-block;
   vertical-align: middle;
-  margin: {
-    left: 5px;
-    bottom: 2px;
-  }
+  margin-inline-start: 5px;
+  margin-bottom: 2px;
   position: relative;
 
   &::before {
@@ -72,7 +71,7 @@
     height: 16px;
     position: absolute;
     top: -1px;
-    left: -1px;
+    inset-inline-start: -1px;
 
     @include light-theme {
       @include color-svg(
@@ -96,7 +95,7 @@
   display: flex;
   flex-direction: row;
   padding: 16px;
-  padding-left: 8px;
+  padding-inline-start: 8px;
 
   @include keyboard-mode {
     &:focus {
@@ -121,7 +120,8 @@
     flex-direction: column;
 
     &:not(:first-child) {
-      padding: 0 12px;
+      padding-block: 0;
+      padding-inline: 12px;
     }
 
     &__title {
@@ -191,7 +191,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0 12px;
+  padding-block: 0;
+  padding-inline: 12px;
 
   @include dark-theme {
     color: $color-gray-05;
@@ -227,7 +228,8 @@
     text-align: center;
     width: 100%;
     height: 100%;
-    padding: 0 80px 30px 80px;
+    padding-block: 0 30px;
+    padding-inline: 80px;
 
     @include font-body-1-bold;
   }
diff --git a/stylesheets/components/Stories.scss b/stylesheets/components/Stories.scss
index d39e67a1c8..5bb0d7a625 100644
--- a/stylesheets/components/Stories.scss
+++ b/stylesheets/components/Stories.scss
@@ -5,7 +5,7 @@
   background: $color-gray-95;
   display: flex;
   height: var(--window-height);
-  left: 0;
+  inset-inline-start: 0;
   position: absolute;
   top: 0;
   user-select: none;
@@ -14,7 +14,7 @@
 
   &__pane {
     background: $color-gray-80;
-    border-right: 1px solid $color-gray-65;
+    border-inline-end: 1px solid $color-gray-65;
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -25,7 +25,7 @@
       @include color-svg('../images/icons/v2/plus-24.svg', $color-white);
       height: 22px;
       position: absolute;
-      right: 63px;
+      inset-inline-end: 63px;
       top: 0px;
       width: 22px;
 
@@ -44,10 +44,10 @@
         );
       }
       height: 22px;
-      margin-left: 24px;
+      margin-inline-start: 24px;
       opacity: 1;
       position: absolute;
-      right: 16px;
+      inset-inline-end: 16px;
       top: 0px;
       width: 22px;
 
@@ -62,7 +62,8 @@
       align-items: center;
       display: flex;
       justify-content: space-between;
-      padding: 0 16px;
+      padding-block: 0;
+      padding-inline: 16px;
       position: relative;
 
       &--centered {
@@ -111,7 +112,8 @@
       flex-direction: column;
       flex: 1;
       overflow-y: overlay;
-      padding: 0 14px;
+      padding-block: 0;
+      padding-inline: 14px;
 
       &--empty {
         @include font-body-1;
@@ -126,7 +128,8 @@
   }
 
   &__search__container {
-    margin: 14px 16px 10px 16px;
+    margin-block: 14px 10px;
+    margin-inline: 16px;
   }
 
   &__placeholder {
@@ -156,7 +159,8 @@
     color: $color-gray-05;
     display: flex;
     justify-content: space-between;
-    padding: 12px 24px;
+    padding-block: 12px;
+    padding-inline: 24px;
     position: relative;
     width: 100%;
 
diff --git a/stylesheets/components/StoriesSettingsModal.scss b/stylesheets/components/StoriesSettingsModal.scss
index b56dc59186..1328b02d69 100644
--- a/stylesheets/components/StoriesSettingsModal.scss
+++ b/stylesheets/components/StoriesSettingsModal.scss
@@ -12,13 +12,12 @@
 
   &__conversation-list {
     .module-conversation-list {
-      padding-left: 0;
-      padding-right: 0;
+      padding-inline: 0;
     }
 
     .module-conversation-list__item--contact-or-conversation__checkbox--container {
       height: 20px;
-      margin-right: 8px;
+      margin-inline-end: 8px;
       position: relative;
       width: 20px;
     }
@@ -67,6 +66,7 @@
           content: '';
           display: block;
           height: 11px;
+          /* stylelint-disable-next-line liberty/use-logical-spec */
           left: 7px;
           position: absolute;
           top: 3px;
@@ -84,7 +84,8 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
-    padding: 8px 0;
+    padding-block: 8px;
+    padding-inline: 0;
 
     &--no-pointer {
       cursor: inherit;
@@ -134,7 +135,7 @@
     }
 
     &__title {
-      margin-left: 12px;
+      margin-inline-start: 12px;
     }
 
     &__delete {
@@ -190,7 +191,7 @@
   &__listHeader__title {
     flex: 1;
     @include font-body-1-bold;
-    margin-right: 8px;
+    margin-inline-end: 8px;
   }
 
   &__delete-list {
@@ -198,7 +199,8 @@
     align-items: center;
     color: $color-accent-red;
     display: flex;
-    padding: 8px 0;
+    padding-block: 8px;
+    padding-inline: 0;
     width: 100%;
 
     &::before {
@@ -208,13 +210,14 @@
       );
       content: '';
       height: 20px;
-      margin-right: 20px;
+      margin-inline-end: 20px;
       width: 20px;
     }
   }
 
   &__checkbox {
-    margin: 14px 0;
+    margin-block: 14px;
+    margin-inline: 0;
   }
 
   &__checkbox-container {
@@ -225,7 +228,7 @@
 
   &__checkbox-label {
     flex: 1;
-    margin-right: 8px;
+    margin-inline-end: 8px;
   }
 
   &__checkbox-description {
@@ -293,7 +296,8 @@
     align-items: center;
     color: $color-accent-red;
     display: flex;
-    padding: 8px 0;
+    padding-block: 8px;
+    padding-inline: 0;
     width: 100%;
     margin-top: 12px;
 
@@ -304,7 +308,7 @@
       );
       content: '';
       height: 20px;
-      margin-right: 20px;
+      margin-inline-end: 20px;
       width: 20px;
     }
   }
diff --git a/stylesheets/components/StoryCreator.scss b/stylesheets/components/StoryCreator.scss
index 3af956a780..e2ae01e45a 100644
--- a/stylesheets/components/StoryCreator.scss
+++ b/stylesheets/components/StoryCreator.scss
@@ -13,7 +13,7 @@
   flex-direction: column;
   width: var(--window-width);
   height: 100vh;
-  left: 0;
+  inset-inline-start: 0;
   position: absolute;
   top: 0;
   user-select: none;
@@ -25,7 +25,8 @@
     justify-content: center;
     overflow: hidden;
     padding-bottom: 0;
-    padding: 22px 60px;
+    padding-block: 22px;
+    padding-inline: 60px;
     position: relative;
   }
 
@@ -59,7 +60,8 @@
     display: inline-flex;
     height: 32px;
     justify-content: center;
-    margin: 0 15px;
+    margin-block: 0;
+    margin-inline: 15px;
     opacity: 1;
     width: 32px;
 
@@ -141,11 +143,12 @@
     height: $tools-height;
     justify-content: center;
     margin-bottom: 22px;
-    padding: 14px 12px;
+    padding-block: 14px;
+    padding-inline: 12px;
 
     &__tool,
     &__tool__button {
-      margin-right: 14px;
+      margin-inline-end: 14px;
     }
 
     &__button {
@@ -157,7 +160,8 @@
       }
 
       @include button-reset;
-      margin: 0 8px;
+      margin-block: 0;
+      margin-inline: 8px;
       padding: 8px;
 
       &--bg {
@@ -227,14 +231,12 @@
     width: 144px;
 
     &__arrow {
-      border-left: 14px solid transparent;
-      border-right: 14px solid transparent;
+      border-inline-start: 14px solid transparent;
+      border-inline-end: 14px solid transparent;
       border-top: 14px solid $color-gray-80;
+      @include position-absolute-center-x;
       bottom: -14px;
       height: 0;
-      left: 50%;
-      position: absolute;
-      transform: translateX(-50%);
       width: 0;
     }
   }
@@ -285,7 +287,7 @@
       display: flex;
       flex-direction: column;
       justify-content: center;
-      margin-left: 14px;
+      margin-inline-start: 14px;
     }
 
     &__title {
diff --git a/stylesheets/components/StoryDetailsModal.scss b/stylesheets/components/StoryDetailsModal.scss
index 7e2a105ada..180441f0ce 100644
--- a/stylesheets/components/StoryDetailsModal.scss
+++ b/stylesheets/components/StoryDetailsModal.scss
@@ -60,7 +60,8 @@
     display: flex;
     justify-content: space-between;
     margin-top: 24px;
-    padding: 10px 0;
+    padding-block: 10px;
+    padding-inline: 0;
     user-select: none;
 
     &:first-child {
@@ -70,7 +71,8 @@
 
   &__contact {
     margin-bottom: 8px;
-    padding: 8px 0;
+    padding-block: 8px;
+    padding-inline: 0;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -78,7 +80,7 @@
     &__text {
       @include font-body-1;
       flex-grow: 1;
-      margin-left: 10px;
+      margin-inline-start: 10px;
     }
 
     &:last-child {
@@ -87,6 +89,6 @@
   }
 
   &__status-timestamp {
-    margin-left: 6px;
+    margin-inline-start: 6px;
   }
 }
diff --git a/stylesheets/components/StoryImage.scss b/stylesheets/components/StoryImage.scss
index 96700c387a..82155a6689 100644
--- a/stylesheets/components/StoryImage.scss
+++ b/stylesheets/components/StoryImage.scss
@@ -27,7 +27,7 @@
     display: flex;
     height: 100%;
     justify-content: center;
-    left: 0;
+    inset-inline-start: 0;
     position: absolute;
     top: 0;
     width: 100%;
diff --git a/stylesheets/components/StoryLinkPreview.scss b/stylesheets/components/StoryLinkPreview.scss
index d784a8cb9c..4698fc82df 100644
--- a/stylesheets/components/StoryLinkPreview.scss
+++ b/stylesheets/components/StoryLinkPreview.scss
@@ -14,9 +14,9 @@
   overflow: hidden;
 
   &__content {
-    margin-left: 24px;
-    margin-right: 24px;
-    padding: 16px 0;
+    margin-inline: 24px;
+    padding-block: 16px;
+    padding-inline: 0;
   }
 
   &__title {
@@ -54,8 +54,7 @@
     display: flex;
     height: 176px;
     justify-content: center;
-    margin-left: 52px;
-    margin-right: 52px;
+    margin-inline: 52px;
 
     &::before {
       @include color-svg('../images/icons/v2/link-24.svg', $color-gray-90);
@@ -79,8 +78,7 @@
 
     .StoryLinkPreview__no-image {
       height: 100px;
-      margin-left: 24px;
-      margin-right: 0;
+      margin-inline: 24px 0;
       width: auto;
     }
   }
diff --git a/stylesheets/components/StoryListItem.scss b/stylesheets/components/StoryListItem.scss
index fe873d388c..8c3dd2d390 100644
--- a/stylesheets/components/StoryListItem.scss
+++ b/stylesheets/components/StoryListItem.scss
@@ -9,7 +9,8 @@
     display: flex;
     height: 96px;
     min-height: 96px;
-    padding: 0 10px;
+    padding-block: 0;
+    padding-inline: 10px;
     width: 100%;
 
     @include keyboard-mode {
@@ -55,8 +56,7 @@
     flex-direction: column;
     flex: 1;
     justify-content: center;
-    margin-left: 12px;
-    margin-right: 12px;
+    margin-inline: 12px;
 
     &--title {
       @include font-body-1-bold;
@@ -81,7 +81,7 @@
         flex-shrink: 0;
         height: 12px;
         width: 12px;
-        margin-right: 8px;
+        margin-inline-end: 8px;
         @include color-svg(
           '../images/icons/v2/error-outline-12.svg',
           $color-accent-red
@@ -125,7 +125,7 @@
       display: flex;
       height: 72px;
       justify-content: center;
-      left: 0;
+      inset-inline-start: 0;
       overflow: hidden;
       position: absolute;
       top: 0;
@@ -175,7 +175,7 @@
     content: '';
     display: inline-block;
     height: 20px;
-    margin-left: 6px;
+    margin-inline-start: 6px;
     vertical-align: middle;
     width: 12px;
     @include color-svg('../images/icons/v2/chevron-right-20.svg', $color-white);
diff --git a/stylesheets/components/StoryViewer.scss b/stylesheets/components/StoryViewer.scss
index c0342c312c..66ce9946e5 100644
--- a/stylesheets/components/StoryViewer.scss
+++ b/stylesheets/components/StoryViewer.scss
@@ -5,7 +5,7 @@
   &__overlay {
     background-size: contain;
     height: 100%;
-    left: 0;
+    inset-inline-start: 0;
     position: absolute;
     top: 0;
     width: 100%;
@@ -20,7 +20,7 @@
     flex-direction: column;
     height: 100%;
     justify-content: center;
-    left: 0;
+    inset-inline-start: 0;
     position: absolute;
     top: 0;
     width: 100%;
@@ -34,7 +34,7 @@
       @include color-svg('../images/icons/v2/x-24.svg', $color-gray-15);
     }
     top: var(--title-bar-drag-area-height);
-    right: 28px;
+    inset-inline-end: 28px;
     z-index: $z-index-above-above-base;
   }
 
@@ -54,12 +54,11 @@
   }
 
   &__meta {
+    @include position-absolute-center-x;
     bottom: 0;
-    left: 50%;
     min-width: 284px;
-    padding: 0 16px;
-    position: absolute;
-    transform: translateX(-50%);
+    padding-block: 0;
+    padding-inline: 16px;
     width: clamp(0vh, 56.25vh, 100vw);
     z-index: $z-index-story-meta;
 
@@ -77,24 +76,24 @@
         content: '';
         display: block;
         height: 14px;
-        margin-right: 6px;
+        margin-inline-end: 6px;
         width: 14px;
       }
     }
 
     &--group-avatar {
-      margin-left: -8px;
+      margin-inline-start: -8px;
     }
 
     &--title-container {
-      padding-left: 8px;
+      padding-inline-start: 8px;
     }
 
     &--title {
       @include font-body-1-bold;
       color: $color-white;
       display: inline;
-      margin-right: 8px;
+      margin-inline-end: 8px;
     }
 
     &--timestamp {
@@ -122,14 +121,15 @@
   &__caption {
     @include font-body-1;
     color: $color-white;
-    padding: 4px 0;
+    padding-block: 4px;
+    padding-inline: 0;
     margin-bottom: 24px;
 
     &__overlay {
       @include button-reset;
       background: $color-black-alpha-60;
       height: 100%;
-      left: 0;
+      inset-inline-start: 0;
       position: absolute;
       top: 0;
       width: 100%;
@@ -153,7 +153,7 @@
         content: '';
         display: block;
         height: 18px;
-        margin-right: 12px;
+        margin-inline-end: 12px;
         width: 18px;
         @include color-svg(
           '../images/icons/v2/error-outline-24.svg',
@@ -179,7 +179,7 @@
       &::before {
         content: '';
         height: 20px;
-        margin-right: 12px;
+        margin-inline-end: 12px;
         width: 20px;
         @include color-svg(
           '../images/icons/v2/reply-outline-24.svg',
@@ -192,7 +192,7 @@
       content: '';
       display: inline-block;
       height: 20px;
-      margin-left: 6px;
+      margin-inline-start: 6px;
       vertical-align: middle;
       width: 12px;
       @include color-svg(
@@ -226,7 +226,8 @@
   &__mute {
     @include button-reset;
     height: 20px;
-    margin: 0 24px;
+    margin-block: 0;
+    margin-inline: 24px;
     width: 20px;
     @include color-svg('../images/icons/v2/sound-on.svg', $color-white);
     @include keyboard-mode {
@@ -263,7 +264,8 @@
   &__unmute {
     @include button-reset;
     height: 20px;
-    margin: 0 24px;
+    margin-block: 0;
+    margin-inline: 24px;
     width: 20px;
     @include color-svg('../images/icons/v2/sound-off.svg', $color-white);
     @include keyboard-mode {
@@ -276,7 +278,8 @@
   &__soundless {
     @include button-reset;
     height: 20px;
-    margin: 0 24px;
+    margin-block: 0;
+    margin-inline: 24px;
     width: 20px;
     @include color-svg('../images/icons/v2/sound-none.svg', $color-white);
     @include keyboard-mode {
@@ -293,7 +296,8 @@
       background: $color-white-alpha-40;
       border-radius: 2px;
       height: 2px;
-      margin: 12px 1px 0 1px;
+      margin-block: 12px 0;
+      margin-inline: 1px;
       overflow: hidden;
       width: 100%;
     }
@@ -302,7 +306,14 @@
       background: $color-white;
       border-radius: 2px;
       height: 100%;
-      transform: translateX(-100%);
+      &:dir(ltr) {
+        // stylelint-disable-next-line declaration-property-value-disallowed-list
+        transform: translateX(-100%);
+      }
+      &:dir(rtl) {
+        // stylelint-disable-next-line declaration-property-value-disallowed-list
+        transform: translateX(100%);
+      }
     }
   }
 
@@ -332,10 +343,10 @@
 
     &--left {
       justify-content: flex-start;
-      left: 0;
+      inset-inline-start: 0;
 
       &::before {
-        margin-left: 24px;
+        margin-inline-start: 24px;
         @include color-svg(
           '../images/icons/v2/arrow-left-32.svg',
           $color-white
@@ -345,10 +356,10 @@
 
     &--right {
       justify-content: flex-end;
-      right: 0;
+      inset-inline-end: 0;
 
       &::before {
-        margin-right: 24px;
+        margin-inline-end: 24px;
         @include color-svg(
           '../images/icons/v2/arrow-right-32.svg',
           $color-white
@@ -384,8 +395,7 @@
     display: flex;
 
     &__spinner__container {
-      margin-left: 0;
-      margin-right: 12px;
+      margin-inline: 0 12px;
     }
   }
 }
diff --git a/stylesheets/components/StoryViewsNRepliesModal.scss b/stylesheets/components/StoryViewsNRepliesModal.scss
index 3e421554a4..eae857dcd7 100644
--- a/stylesheets/components/StoryViewsNRepliesModal.scss
+++ b/stylesheets/components/StoryViewsNRepliesModal.scss
@@ -35,7 +35,8 @@ $footer-height: 36px;
 
   &__replies {
     flex: 1;
-    margin: 0 -16px;
+    margin-block: 0;
+    margin-inline: -16px;
     max-height: 75vh;
     overflow-y: overlay;
 
@@ -45,7 +46,8 @@ $footer-height: 36px;
       display: flex;
       flex: 1;
       justify-content: center;
-      padding: 80px 0;
+      padding-block: 80px;
+      padding-inline: 0;
       user-select: none;
     }
   }
@@ -67,7 +69,7 @@ $footer-height: 36px;
 
   &__emoji-button {
     height: 24px;
-    margin-left: 10px;
+    margin-inline-start: 10px;
     width: 24px;
 
     &::after {
@@ -81,7 +83,8 @@ $footer-height: 36px;
   }
 
   &__not-a-member {
-    margin: 24px 4px 8px 4px;
+    margin-block: 24px 8px;
+    margin-inline: 4px;
     font-size: 12px;
     text-align: center;
     color: $color-gray-25;
@@ -118,11 +121,12 @@ $footer-height: 36px;
     align-items: center;
     display: flex;
     justify-content: space-between;
-    margin: 8px 0;
+    margin-block: 8px;
+    margin-inline: 0;
 
     &--name {
       @include font-body-2;
-      margin-left: 12px;
+      margin-inline-start: 12px;
     }
 
     &--timestamp {
@@ -143,7 +147,7 @@ $footer-height: 36px;
     &--timestamp {
       @include font-subtitle;
       color: $color-gray-25;
-      margin-left: 6px;
+      margin-inline-start: 6px;
     }
   }
 
@@ -151,22 +155,24 @@ $footer-height: 36px;
     align-items: center;
     display: flex;
     justify-content: space-between;
-    padding: 12px 16px;
+    padding-block: 12px;
+    padding-inline: 16px;
 
     &--container {
       display: flex;
     }
 
     &--body {
-      margin-left: 20px;
+      margin-inline-start: 20px;
     }
   }
 
   &__message-bubble {
     background: $color-gray-75;
     border-radius: 18px;
-    margin-left: 8px;
-    padding: 7px 12px;
+    margin-inline-start: 8px;
+    padding-block: 7px;
+    padding-inline: 12px;
 
     &--doe {
       background: none;
@@ -176,8 +182,9 @@ $footer-height: 36px;
 
   &__quote {
     &__container {
-      margin: 8px 0;
-      margin-right: 38px;
+      margin-block: 8px;
+      margin-inline: 0;
+      margin-inline-end: 38px;
     }
 
     &--outgoing-ultramarine {
@@ -234,7 +241,8 @@ $footer-height: 36px;
 
   &__read-receipts-off {
     color: $color-gray-25;
-    margin: 160px 16px;
+    margin-block: 160px;
+    margin-inline: 16px;
   }
 
   .module-ReactionPickerPicker {
@@ -259,8 +267,10 @@ $footer-height: 36px;
 
 .Tabs__tab.StoryViewsNRepliesModal__tabs__tab {
   @include font-body-1-bold;
-  padding: 4px 12px;
-  margin: 0 12px;
+  padding-block: 4px;
+  padding-inline: 12px;
+  margin-block: 0;
+  margin-inline: 12px;
 }
 
 .Tabs__tab--selected.StoryViewsNRepliesModal__tabs__tab--selected {
diff --git a/stylesheets/components/SystemMessage.scss b/stylesheets/components/SystemMessage.scss
index 696df12fe1..33246d5da9 100644
--- a/stylesheets/components/SystemMessage.scss
+++ b/stylesheets/components/SystemMessage.scss
@@ -36,16 +36,10 @@
 
     p {
       display: block;
-      margin: {
-        block: {
-          start: 0;
-          end: 4px;
-        }
-        inline: {
-          start: 0;
-          end: 0;
-        }
-      }
+      margin-block-start: 0;
+      margin-block-end: 4px;
+      margin-inline-start: 0;
+      margin-inline-end: 0;
 
       &:first-child {
         display: inline-block;
@@ -60,7 +54,7 @@
       content: '';
       display: inline-block;
       height: 16px;
-      margin-right: 8px;
+      margin-inline-end: 8px;
       width: 16px;
       vertical-align: middle;
 
diff --git a/stylesheets/components/TextAttachment.scss b/stylesheets/components/TextAttachment.scss
index bdc12671e8..7e877bdf40 100644
--- a/stylesheets/components/TextAttachment.scss
+++ b/stylesheets/components/TextAttachment.scss
@@ -27,12 +27,10 @@
   &__text {
     border-radius: 36px;
     padding: 28px;
-    margin-left: 56px;
-    margin-right: 56px;
+    margin-inline: 56px;
 
     &--with-bg {
-      margin-left: 36px;
-      margin-right: 36px;
+      margin-inline: 36px;
     }
 
     &__container {
@@ -61,8 +59,7 @@
   }
 
   &__preview-container {
-    margin-left: 56px;
-    margin-right: 56px;
+    margin-inline: 56px;
     margin-top: 36px;
     position: relative;
   }
@@ -78,7 +75,7 @@
     padding: 16px;
 
     &__no-image {
-      margin-right: 16px;
+      margin-inline-end: 16px;
     }
 
     &__location {
@@ -109,7 +106,7 @@
       height: 48px;
       justify-content: center;
       position: absolute;
-      right: -16px;
+      inset-inline-end: -16px;
       top: -16px;
       width: 48px;
       z-index: $z-index-base;
@@ -180,8 +177,8 @@
         border-style: solid;
         border-width: 14px;
         content: '';
-        left: 50%;
-        margin-left: -14px;
+        inset-inline-start: 50%;
+        margin-inline-start: -14px;
         position: absolute;
         top: 100%;
       }
diff --git a/stylesheets/components/TimelineDateHeader.scss b/stylesheets/components/TimelineDateHeader.scss
index cbdc62de28..7e0288c75f 100644
--- a/stylesheets/components/TimelineDateHeader.scss
+++ b/stylesheets/components/TimelineDateHeader.scss
@@ -20,6 +20,7 @@
 
   &--floating {
     @include timeline-floating-header-node;
-    padding: 5px 10px;
+    padding-block: 5px;
+    padding-inline: 10px;
   }
 }
diff --git a/stylesheets/components/TimelineFloatingHeader.scss b/stylesheets/components/TimelineFloatingHeader.scss
index bc71f9c655..5f51a9341e 100644
--- a/stylesheets/components/TimelineFloatingHeader.scss
+++ b/stylesheets/components/TimelineFloatingHeader.scss
@@ -5,7 +5,7 @@
   align-items: center;
   display: flex;
   flex-direction: column;
-  left: 0;
+  inset-inline-start: 0;
   pointer-events: none;
   position: absolute;
   top: 10px;
diff --git a/stylesheets/components/TimelineWarning.scss b/stylesheets/components/TimelineWarning.scss
index eed9d13d23..c16d8fd672 100644
--- a/stylesheets/components/TimelineWarning.scss
+++ b/stylesheets/components/TimelineWarning.scss
@@ -44,8 +44,7 @@
   &__text {
     @include font-body-2;
     flex-grow: 1;
-    margin-left: 12px;
-    margin-right: 12px;
+    margin-inline: 12px;
 
     &__link {
       @include button-reset;
diff --git a/stylesheets/components/TimelineWarnings.scss b/stylesheets/components/TimelineWarnings.scss
index f8a76046fc..55e80ce9f7 100644
--- a/stylesheets/components/TimelineWarnings.scss
+++ b/stylesheets/components/TimelineWarnings.scss
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .module-TimelineWarnings {
-  left: 0;
+  inset-inline-start: 0;
   position: absolute;
   top: 0;
   width: 100%;
diff --git a/stylesheets/components/TitleBarContainer.scss b/stylesheets/components/TitleBarContainer.scss
index 7357c02e50..e555650213 100644
--- a/stylesheets/components/TitleBarContainer.scss
+++ b/stylesheets/components/TitleBarContainer.scss
@@ -17,7 +17,7 @@
   @mixin titlebar-position {
     position: fixed;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
 
     width: calc(100vw * var(--zoom-factor));
     z-index: $z-index-window-controls;
@@ -48,7 +48,7 @@
       Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial,
       sans-serif;
 
-    padding-left: env(titlebar-area-x, 0);
+    padding-inline-start: env(titlebar-area-x, 0);
 
     & button {
       font-family: inherit;
diff --git a/stylesheets/components/Toast.scss b/stylesheets/components/Toast.scss
index 25019036f8..71cae2b361 100644
--- a/stylesheets/components/Toast.scss
+++ b/stylesheets/components/Toast.scss
@@ -11,14 +11,12 @@
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05), 0px 4px 12px rgba(0, 0, 0, 0.3);
   display: flex;
   justify-content: space-between;
-  position: absolute;
+  @include position-absolute-center-x;
   text-align: center;
   user-select: none;
   overflow: hidden;
   z-index: $z-index-toast;
   bottom: 62px;
-  left: 50%;
-  transform: translate(-50%, 0);
 
   @include light-theme {
     background-color: $color-gray-80;
@@ -29,32 +27,28 @@
     color: $color-gray-05;
   }
 
-  &--align-center {
-    bottom: 62px;
-    left: 50%;
-    transform: translate(-50%, 0);
-  }
-
   &--align-left {
-    left: 20px;
+    inset-inline-start: 20px;
     bottom: 18px;
   }
 
   &__content {
-    padding: 8px 12px;
+    padding-block: 8px;
+    padding-inline: 12px;
   }
 
   &__button {
     @include font-body-2-bold;
     cursor: pointer;
-    padding: 8px 12px;
+    padding-block: 8px;
+    padding-inline: 12px;
     white-space: nowrap;
 
     @include light-theme {
-      border-left: 1px solid $color-gray-65;
+      border-inline-start: 1px solid $color-gray-65;
     }
     @include dark-theme {
-      border-left: 1px solid $color-gray-60;
+      border-inline-start: 1px solid $color-gray-60;
     }
 
     outline: none;
diff --git a/stylesheets/components/Waveform.scss b/stylesheets/components/Waveform.scss
index 5583a64731..4d3ebb59a3 100644
--- a/stylesheets/components/Waveform.scss
+++ b/stylesheets/components/Waveform.scss
@@ -18,7 +18,7 @@
     transition: height 250ms, background 250ms;
 
     &:not(:first-of-type) {
-      margin-left: 2px;
+      margin-inline-start: 2px;
     }
 
     @include light-theme {
diff --git a/ts/background.ts b/ts/background.ts
index 4ab09c3d90..c58d98c87b 100644
--- a/ts/background.ts
+++ b/ts/background.ts
@@ -581,6 +581,11 @@ export async function startApp(): Promise<void> {
     window.getResolvedMessagesLocale().split(/[-_]/)[0]
   );
 
+  document.documentElement.setAttribute(
+    'dir',
+    window.getResolvedMessagesLocaleDirection()
+  );
+
   KeyChangeListener.init(window.textsecure.storage.protocol);
   window.textsecure.storage.protocol.on('removePreKey', (ourUuid: UUID) => {
     const uuidKind = window.textsecure.storage.user.getOurUuidKind(ourUuid);
diff --git a/ts/components/AvatarPopup.tsx b/ts/components/AvatarPopup.tsx
index 37df904efe..f4706d9651 100644
--- a/ts/components/AvatarPopup.tsx
+++ b/ts/components/AvatarPopup.tsx
@@ -9,7 +9,7 @@ import { Avatar, AvatarSize } from './Avatar';
 import { useRestoreFocus } from '../hooks/useRestoreFocus';
 
 import type { LocalizerType, ThemeType } from '../types/Util';
-import { Emojify } from './conversation/Emojify';
+import { UserText } from './UserText';
 
 export type Props = {
   readonly i18n: LocalizerType;
@@ -61,7 +61,7 @@ export function AvatarPopup(props: Props): JSX.Element {
         <Avatar {...props} size={AvatarSize.FORTY_EIGHT} />
         <div className="module-avatar-popup__profile__text">
           <div className="module-avatar-popup__profile__name">
-            <Emojify text={profileName || title} />
+            <UserText text={profileName || title} />
           </div>
           {shouldShowNumber ? (
             <div className="module-avatar-popup__profile__number">
diff --git a/ts/components/AvatarTextEditor.tsx b/ts/components/AvatarTextEditor.tsx
index 0df2611ac6..a290599f38 100644
--- a/ts/components/AvatarTextEditor.tsx
+++ b/ts/components/AvatarTextEditor.tsx
@@ -170,6 +170,7 @@ export function AvatarTextEditor({
             ref={inputRef}
             style={{ fontSize }}
             type="text"
+            dir="auto"
             value={inputText}
           />
         </BetterAvatarBubble>
diff --git a/ts/components/CallingPreCallInfo.tsx b/ts/components/CallingPreCallInfo.tsx
index 0046c496f3..1dff078197 100644
--- a/ts/components/CallingPreCallInfo.tsx
+++ b/ts/components/CallingPreCallInfo.tsx
@@ -5,9 +5,9 @@ import React from 'react';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
 import { Avatar, AvatarSize } from './Avatar';
-import { Emojify } from './conversation/Emojify';
 import { getParticipantName } from '../util/callingGetParticipantName';
 import { missingCaseError } from '../util/missingCaseError';
+import { UserText } from './UserText';
 
 export enum RingMode {
   WillNotRing,
@@ -190,7 +190,7 @@ export function CallingPreCallInfo({
         i18n={i18n}
       />
       <div className="module-CallingPreCallInfo__title">
-        <Emojify text={conversation.title} />
+        <UserText text={conversation.title} />
       </div>
       <div className="module-CallingPreCallInfo__subtitle">{subtitle}</div>
     </div>
diff --git a/ts/components/DebugLogWindow.tsx b/ts/components/DebugLogWindow.tsx
index 637d656552..c916213e0b 100644
--- a/ts/components/DebugLogWindow.tsx
+++ b/ts/components/DebugLogWindow.tsx
@@ -163,6 +163,7 @@ export function DebugLogWindow({
               className="DebugLogWindow__link"
               readOnly
               type="text"
+              dir="auto"
               value={publicLogURL}
             />
           </div>
diff --git a/ts/components/ForwardMessagesModal.tsx b/ts/components/ForwardMessagesModal.tsx
index b28812febd..b8f531f529 100644
--- a/ts/components/ForwardMessagesModal.tsx
+++ b/ts/components/ForwardMessagesModal.tsx
@@ -7,6 +7,7 @@ import React, {
   useMemo,
   useRef,
   useState,
+  Fragment,
 } from 'react';
 import type { MeasuredComponentProps } from 'react-measure';
 import Measure from 'react-measure';
@@ -33,7 +34,6 @@ import {
   shouldNeverBeCalled,
   asyncShouldNeverBeCalled,
 } from '../util/shouldNeverBeCalled';
-import { Emojify } from './conversation/Emojify';
 import type { MessageForwardDraft } from '../util/maybeForwardMessages';
 import {
   isDraftEditable,
@@ -45,6 +45,7 @@ import { ToastType } from '../types/Toast';
 import type { ShowToastAction } from '../state/ducks/toast';
 import type { HydratedBodyRangesType } from '../types/BodyRange';
 import { BodyRange } from '../types/BodyRange';
+import { UserText } from './UserText';
 
 export type DataPropsType = {
   candidateConversations: ReadonlyArray<ConversationType>;
@@ -390,13 +391,14 @@ export function ForwardMessagesModal({
           )}
           <div className="module-ForwardMessageModal__footer">
             <div>
-              {Boolean(selectedContacts.length) && (
-                <Emojify
-                  text={selectedContacts
-                    .map(contact => contact.title)
-                    .join(', ')}
-                />
-              )}
+              {selectedContacts.map((contact, index) => {
+                return (
+                  <Fragment key={contact.id}>
+                    <UserText text={contact.title} />
+                    {index < selectedContacts.length - 1 ? ', ' : ''}
+                  </Fragment>
+                );
+              })}
             </div>
             <div>
               {isEditingMessage || !isLonelyDraftEditable ? (
diff --git a/ts/components/GradientDial.tsx b/ts/components/GradientDial.tsx
index fbcfb5dacd..56b250e5fb 100644
--- a/ts/components/GradientDial.tsx
+++ b/ts/components/GradientDial.tsx
@@ -4,6 +4,7 @@
 import type { CSSProperties, KeyboardEvent } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
+import { arrow } from '../util/keyboard';
 
 export enum KnobType {
   start = 'start',
@@ -245,11 +246,11 @@ export function GradientDial({
   const handleKeyDown = (ev: KeyboardEvent) => {
     let add = 1;
 
-    if (ev.key === 'ArrowDown' || ev.key === 'ArrowLeft') {
+    if (ev.key === 'ArrowDown' || ev.key === arrow('start')) {
       add = 1;
     }
 
-    if (ev.key === 'ArrowRight' || ev.key === 'ArrowUp') {
+    if (ev.key === 'ArrowUp' || ev.key === arrow('end')) {
       add = -1;
     }
 
diff --git a/ts/components/IncomingCallBar.tsx b/ts/components/IncomingCallBar.tsx
index 55847e90cf..a97fe7e145 100644
--- a/ts/components/IncomingCallBar.tsx
+++ b/ts/components/IncomingCallBar.tsx
@@ -9,7 +9,6 @@ import { Intl } from './Intl';
 import { Theme } from '../util/theme';
 import { getParticipantName } from '../util/callingGetParticipantName';
 import { ContactName } from './conversation/ContactName';
-import { Emojify } from './conversation/Emojify';
 import type { LocalizerType } from '../types/Util';
 import { AvatarColors } from '../types/Colors';
 import { CallMode } from '../types/Calling';
@@ -20,6 +19,7 @@ import {
   useIncomingCallShortcuts,
   useKeyboardShortcuts,
 } from '../hooks/useKeyboardShortcuts';
+import { UserText } from './UserText';
 
 export type PropsType = {
   acceptCall: (_: AcceptCallType) => void;
@@ -94,8 +94,8 @@ function GroupCallMessage({
   // As an optimization, we only process the first two names.
   const [first, second] = otherMembersRung
     .slice(0, 2)
-    .map(member => <Emojify text={getParticipantName(member)} />);
-  const ringerNode = <Emojify text={getParticipantName(ringer)} />;
+    .map(member => <UserText text={getParticipantName(member)} />);
+  const ringerNode = <UserText text={getParticipantName(ringer)} />;
 
   switch (otherMembersRung.length) {
     case 0:
@@ -195,7 +195,7 @@ export function IncomingCallBar(props: PropsType): JSX.Element | null {
     case CallMode.Group: {
       const { otherMembersRung, ringer } = props;
       isVideoCall = true;
-      headerNode = <Emojify text={title} />;
+      headerNode = <UserText text={title} />;
       messageNode = (
         <GroupCallMessage
           i18n={i18n}
diff --git a/ts/components/Input.tsx b/ts/components/Input.tsx
index 20b8b43245..4150f61cec 100644
--- a/ts/components/Input.tsx
+++ b/ts/components/Input.tsx
@@ -243,9 +243,9 @@ export const Input = forwardRef<
     >
       {icon ? <div className={getClassName('__icon')}>{icon}</div> : null}
       {expandable ? (
-        <textarea rows={1} {...inputProps} />
+        <textarea dir="auto" rows={1} {...inputProps} />
       ) : (
-        <input {...inputProps} />
+        <input dir="auto" {...inputProps} />
       )}
       {isLarge ? (
         <>
diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx
index 28ee601ad8..4c3a17c5e4 100644
--- a/ts/components/LeftPane.tsx
+++ b/ts/components/LeftPane.tsx
@@ -431,12 +431,16 @@ export function LeftPane({
 
     const onMouseMove = (event: MouseEvent) => {
       let width: number;
+
+      const isRTL = i18n.getLocaleDirection() === 'rtl';
+      const x = isRTL ? window.innerWidth - event.clientX : event.clientX;
+
       if (requiresFullWidth) {
-        width = Math.max(event.clientX, MIN_FULL_WIDTH);
-      } else if (event.clientX < SNAP_WIDTH) {
+        width = Math.max(x, MIN_FULL_WIDTH);
+      } else if (x < SNAP_WIDTH) {
         width = MIN_WIDTH;
       } else {
-        width = clamp(event.clientX, MIN_FULL_WIDTH, MAX_WIDTH);
+        width = clamp(x, MIN_FULL_WIDTH, MAX_WIDTH);
       }
       setPreferredWidth(Math.min(width, MAX_WIDTH));
 
@@ -456,7 +460,7 @@ export function LeftPane({
       document.body.removeEventListener('mouseup', stopResizing);
       document.body.removeEventListener('mouseleave', stopResizing);
     };
-  }, [isResizing, requiresFullWidth]);
+  }, [i18n, isResizing, requiresFullWidth]);
 
   useEffect(() => {
     if (!isResizing) {
diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index 4c431cdc5a..a1f92b8678 100644
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@@ -24,6 +24,7 @@ import { formatDuration } from '../util/formatDuration';
 import { isGIF } from '../types/Attachment';
 import { useRestoreFocus } from '../hooks/useRestoreFocus';
 import { usePrevious } from '../hooks/usePrevious';
+import { arrow } from '../util/keyboard';
 
 export type PropsType = {
   children?: ReactNode;
@@ -201,11 +202,11 @@ export function Lightbox({
           break;
         }
 
-        case 'ArrowLeft':
+        case arrow('start'):
           onPrevious(event);
           break;
 
-        case 'ArrowRight':
+        case arrow('end'):
           onNext(event);
           break;
 
@@ -287,14 +288,14 @@ export function Lightbox({
     () => INITIAL_IMAGE_TRANSFORM
   );
 
-  const thumbnailsMarginLeft =
+  const thumbnailsMarginInlineStart =
     0 - (selectedIndex * THUMBNAIL_FULL_WIDTH + THUMBNAIL_WIDTH / 2);
 
   const [thumbnailsStyle, thumbnailsAnimation] = useSpring(
     {
       config: THUMBNAIL_SPRING_CONFIG,
       to: {
-        marginLeft: thumbnailsMarginLeft,
+        marginInlineStart: thumbnailsMarginInlineStart,
         opacity: hasThumbnails ? 1 : 0,
       },
     },
@@ -308,19 +309,19 @@ export function Lightbox({
 
     thumbnailsAnimation.stop();
     thumbnailsAnimation.set({
-      marginLeft:
-        thumbnailsMarginLeft +
+      marginInlineStart:
+        thumbnailsMarginInlineStart +
         (selectedIndex === 0 ? 1 : -1) * THUMBNAIL_FULL_WIDTH,
       opacity: 0,
     });
     thumbnailsAnimation.start({
-      marginLeft: thumbnailsMarginLeft,
+      marginInlineStart: thumbnailsMarginInlineStart,
       opacity: 1,
     });
   }, [
     needsAnimation,
     selectedIndex,
-    thumbnailsMarginLeft,
+    thumbnailsMarginInlineStart,
     thumbnailsAnimation,
   ]);
 
diff --git a/ts/components/ListTile.stories.tsx b/ts/components/ListTile.stories.tsx
index 2bc4e6c7a3..279c8cbf13 100644
--- a/ts/components/ListTile.stories.tsx
+++ b/ts/components/ListTile.stories.tsx
@@ -5,8 +5,8 @@ import type { Story } from '@storybook/react';
 import React from 'react';
 import { ListTile } from './ListTile';
 import type { Props } from './ListTile';
-import { Emojify } from './conversation/Emojify';
 import { CircleCheckbox } from './CircleCheckbox';
+import { UserText } from './UserText';
 
 export default {
   title: 'Components/ListTile',
@@ -45,15 +45,15 @@ function TemplateList(width: number): Story<Props> {
         <ListTile {...args} subtitle="Disabled" disabled />
         <ListTile
           {...args}
-          title={<Emojify text="Emoji in title 📞" />}
+          title={<UserText text="Emoji in title 📞" />}
           subtitle="Clickable"
           clickable
         />
         <ListTile
           {...args}
-          title={<Emojify text="With a LOT of emoji 🚗" />}
+          title={<UserText text="With a LOT of emoji 🚗" />}
           subtitle={
-            <Emojify text="😂, 😃, 🧘🏻‍♂️, 🌍, 🌦️, 🍞, 🚗, 📞, 🎉, ❤️, 🍆, 🍑 and 🏁" />
+            <UserText text="😂, 😃, 🧘🏻‍♂️, 🌍, 🌦️, 🍞, 🚗, 📞, 🎉, ❤️, 🍆, 🍑 and 🏁" />
           }
         />
         <ListTile
@@ -90,7 +90,7 @@ const circleAvatar = (
 export const Item = TemplateList(400).bind({});
 Item.args = {
   leading: circleAvatar,
-  title: <Emojify text="Some user" />,
+  title: <UserText text="Some user" />,
   subtitle: 'Hello my friend',
   clickable: true,
 };
diff --git a/ts/components/ListView.tsx b/ts/components/ListView.tsx
index 7f759ae2ae..ad3602ac38 100644
--- a/ts/components/ListView.tsx
+++ b/ts/components/ListView.tsx
@@ -50,11 +50,12 @@ export function ListView({
     [calculateRowHeight]
   );
 
-  const style = useMemo(() => {
+  const style: React.CSSProperties = useMemo(() => {
     return {
       // See `<Timeline>` for an explanation of this `any` cast.
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       overflowY: scrollable ? ('overlay' as any) : 'hidden',
+      direction: 'inherit',
     };
   }, [scrollable]);
 
diff --git a/ts/components/MediaEditor.tsx b/ts/components/MediaEditor.tsx
index 9a6e5366e7..0be953f4d9 100644
--- a/ts/components/MediaEditor.tsx
+++ b/ts/components/MediaEditor.tsx
@@ -45,6 +45,7 @@ import { Emojify } from './conversation/Emojify';
 import { AddNewLines } from './conversation/AddNewLines';
 import { useConfirmDiscard } from '../hooks/useConfirmDiscard';
 import { Spinner } from './Spinner';
+import { arrow } from '../util/keyboard';
 
 export type MediaEditorResultType = Readonly<{
   data: Uint8Array;
@@ -276,7 +277,7 @@ export function MediaEditor({
         },
       ],
       [
-        ev => ev.key === 'ArrowLeft',
+        ev => ev.key === arrow('start'),
         (obj, ev) => {
           const px = ev.shiftKey ? 20 : 1;
           if (ev.altKey) {
@@ -312,7 +313,7 @@ export function MediaEditor({
         },
       ],
       [
-        ev => ev.key === 'ArrowRight',
+        ev => ev.key === arrow('end'),
         (obj, ev) => {
           const px = ev.shiftKey ? 20 : 1;
           if (ev.altKey) {
diff --git a/ts/components/MiniPlayer.tsx b/ts/components/MiniPlayer.tsx
index 373c9df1ae..49ad6c0423 100644
--- a/ts/components/MiniPlayer.tsx
+++ b/ts/components/MiniPlayer.tsx
@@ -5,9 +5,9 @@ import classnames from 'classnames';
 import React, { useCallback } from 'react';
 import type { LocalizerType } from '../types/Util';
 import { durationToPlaybackText } from '../util/durationToPlaybackText';
-import { Emojify } from './conversation/Emojify';
 import { PlaybackButton } from './PlaybackButton';
 import { PlaybackRateButton } from './PlaybackRateButton';
+import { UserText } from './UserText';
 
 export enum PlayerState {
   loading = 'loading',
@@ -98,7 +98,7 @@ export function MiniPlayer({
       />
 
       <div className="MiniPlayer__state">
-        <Emojify text={title} />
+        <UserText text={title} />
         <span className="MiniPlayer__middot">&middot;</span>
         {duration !== undefined && (
           <span>
diff --git a/ts/components/ProfileEditor.tsx b/ts/components/ProfileEditor.tsx
index 2ab087f475..a192f9e585 100644
--- a/ts/components/ProfileEditor.tsx
+++ b/ts/components/ProfileEditor.tsx
@@ -41,7 +41,7 @@ import {
 } from './conversation/conversation-details/ConversationDetailsIcon';
 import { isWhitespace, trim } from '../util/whitespaceStringUtil';
 import { generateUsernameLink } from '../util/sgnlHref';
-import { Emojify } from './conversation/Emojify';
+import { UserText } from './UserText';
 
 export enum EditState {
   None = 'None',
@@ -613,7 +613,7 @@ export function ProfileEditor({
           icon={
             <i className="ProfileEditor__icon--container ProfileEditor__icon ProfileEditor__icon--name" />
           }
-          label={<Emojify text={getFullNameText()} />}
+          label={<UserText text={getFullNameText()} />}
           onClick={() => {
             setEditState(EditState.ProfileName);
           }}
@@ -631,7 +631,7 @@ export function ProfileEditor({
             )
           }
           label={
-            <Emojify
+            <UserText
               text={fullBio.aboutText || i18n('icu:ProfileEditor--about')}
             />
           }
diff --git a/ts/components/SafetyNumberChangeDialog.tsx b/ts/components/SafetyNumberChangeDialog.tsx
index 4d0b18f4e8..50713cc75a 100644
--- a/ts/components/SafetyNumberChangeDialog.tsx
+++ b/ts/components/SafetyNumberChangeDialog.tsx
@@ -22,6 +22,7 @@ import { Theme } from '../util/theme';
 import { isNotNil } from '../util/isNotNil';
 import { MY_STORY_ID } from '../types/Stories';
 import type { UUIDStringType } from '../types/UUID';
+import { UserText } from './UserText';
 
 export enum SafetyNumberChangeSource {
   Calling = 'Calling',
@@ -463,7 +464,7 @@ function ContactRow({
       />
       <div className="module-SafetyNumberChangeDialog__row--wrapper">
         <div className="module-SafetyNumberChangeDialog__row--name">
-          {contact.title}
+          <UserText text={contact.title} />
           {isInSystemContacts(contact) && (
             <span>
               {' '}
diff --git a/ts/components/SendStoryModal.tsx b/ts/components/SendStoryModal.tsx
index e91b18a9a2..bc32b64992 100644
--- a/ts/components/SendStoryModal.tsx
+++ b/ts/components/SendStoryModal.tsx
@@ -40,6 +40,7 @@ import type { AttachmentType } from '../types/Attachment';
 import { useConfirmDiscard } from '../hooks/useConfirmDiscard';
 import { getStoryBackground } from '../util/getStoryBackground';
 import { makeObjectUrl, revokeObjectUrl } from '../types/VisualAttachment';
+import { UserText } from './UserText';
 
 export type PropsType = {
   draftAttachment: AttachmentType;
@@ -568,7 +569,7 @@ export function SendStoryModal({
 
                     <div className="SendStoryModal__distribution-list__info">
                       <div className="SendStoryModal__distribution-list__name">
-                        {group.title}
+                        <UserText text={group.title} />
                       </div>
 
                       <div className="SendStoryModal__distribution-list__description">
@@ -834,7 +835,7 @@ export function SendStoryModal({
 
                 <div className="SendStoryModal__distribution-list__info">
                   <div className="SendStoryModal__distribution-list__name">
-                    {group.title}
+                    <UserText text={group.title} />
                   </div>
 
                   <div className="SendStoryModal__distribution-list__description">
diff --git a/ts/components/SharedGroupNames.tsx b/ts/components/SharedGroupNames.tsx
index 763fc83eee..5b284e9d8d 100644
--- a/ts/components/SharedGroupNames.tsx
+++ b/ts/components/SharedGroupNames.tsx
@@ -4,9 +4,9 @@
 import React from 'react';
 import { take } from 'lodash';
 
-import { Emojify } from './conversation/Emojify';
 import { Intl } from './Intl';
 import type { LocalizerType } from '../types/Util';
+import { UserText } from './UserText';
 
 type PropsType = {
   i18n: LocalizerType;
@@ -23,7 +23,7 @@ export function SharedGroupNames({
     // We cannot guarantee uniqueness of group names
     // eslint-disable-next-line react/no-array-index-key
     <strong key={i} className={nameClassName}>
-      <Emojify text={group} />
+      <UserText text={group} />
     </strong>
   ));
 
diff --git a/ts/components/Slider.tsx b/ts/components/Slider.tsx
index ce55a359ae..966b8094cd 100644
--- a/ts/components/Slider.tsx
+++ b/ts/components/Slider.tsx
@@ -4,6 +4,7 @@
 import type { CSSProperties, KeyboardEvent } from 'react';
 import React, { useRef } from 'react';
 import { getClassNamesFor } from '../util/getClassNamesFor';
+import { arrow } from '../util/keyboard';
 
 export type PropsType = {
   containerStyle?: CSSProperties;
@@ -71,14 +72,14 @@ export function Slider({
   const handleKeyDown = (ev: KeyboardEvent) => {
     let preventDefault = false;
 
-    if (ev.key === 'ArrowRight') {
+    if (ev.key === arrow('end')) {
       const nextValue = value + 1;
       onChange(Math.min(nextValue, 100));
 
       preventDefault = true;
     }
 
-    if (ev.key === 'ArrowLeft') {
+    if (ev.key === arrow('start')) {
       const nextValue = value - 1;
       onChange(Math.max(0, nextValue));
 
diff --git a/ts/components/StandaloneRegistration.tsx b/ts/components/StandaloneRegistration.tsx
index d1ebb9c854..81de522c05 100644
--- a/ts/components/StandaloneRegistration.tsx
+++ b/ts/components/StandaloneRegistration.tsx
@@ -248,6 +248,7 @@ export function StandaloneRegistration({
             <input
               className={`form-control ${isValidCode ? 'valid' : 'invalid'}`}
               type="text"
+              dir="auto"
               pattern="\s*[0-9]{3}-?[0-9]{3}\s*"
               title="Enter your 6-digit verification code. If you did not receive a code, click Call or Send SMS to request a new one"
               placeholder="Verification Code"
diff --git a/ts/components/StoriesSettingsModal.tsx b/ts/components/StoriesSettingsModal.tsx
index a76648658b..a5350d7d1a 100644
--- a/ts/components/StoriesSettingsModal.tsx
+++ b/ts/components/StoriesSettingsModal.tsx
@@ -40,6 +40,7 @@ import {
 import { useConfirmDiscard } from '../hooks/useConfirmDiscard';
 import { getGroupMemberships } from '../util/getGroupMemberships';
 import { strictAssert } from '../util/assert';
+import { UserText } from './UserText';
 
 export type PropsType = {
   candidateConversations: Array<ConversationType>;
@@ -223,7 +224,7 @@ function GroupStoryItem({
           title={groupStory.title}
         />
         <span className="StoriesSettingsModal__list__title">
-          {groupStory.title}
+          <UserText text={groupStory.title} />
           <span className="StoriesSettingsModal__list__viewers">
             {i18n('icu:StoriesSettings__group-story-subtitle')}
             &nbsp;&middot;&nbsp;
@@ -682,7 +683,7 @@ export function DistributionListSettingsModal({
                   title={member.title}
                 />
                 <span className="StoriesSettingsModal__list__title">
-                  {member.title}
+                  <UserText text={member.title} />
                 </span>
               </span>
 
@@ -1092,7 +1093,7 @@ export function EditDistributionListModal({
                 title={contact.title}
               />
               <span className="StoriesSettingsModal__list__title">
-                {contact.title}
+                <UserText text={contact.title} />
               </span>
             </span>
           </div>
@@ -1277,7 +1278,9 @@ export function GroupStorySettingsModal({
           size={AvatarSize.THIRTY_TWO}
           title={group.title}
         />
-        <span className="GroupStorySettingsModal__title">{group.title}</span>
+        <span className="GroupStorySettingsModal__title">
+          <UserText text={group.title} />
+        </span>
       </div>
 
       <hr className="StoriesSettingsModal__divider" />
@@ -1305,7 +1308,7 @@ export function GroupStorySettingsModal({
               title={member.title}
             />
             <p className="GroupStorySettingsModal__members_item__name">
-              {member.title}
+              <UserText text={member.title} />
             </p>
           </div>
         );
diff --git a/ts/components/StoryDistributionListName.tsx b/ts/components/StoryDistributionListName.tsx
index bcdfc81d77..3f3fd617e3 100644
--- a/ts/components/StoryDistributionListName.tsx
+++ b/ts/components/StoryDistributionListName.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 
 import type { LocalizerType } from '../types/Util';
 import { getStoryDistributionListName } from '../types/Stories';
+import { UserText } from './UserText';
 
 type PropsType = {
   i18n: LocalizerType;
@@ -17,5 +18,5 @@ export function StoryDistributionListName({
   id,
   name,
 }: PropsType): JSX.Element {
-  return <>{getStoryDistributionListName(i18n, id, name)}</>;
+  return <UserText text={getStoryDistributionListName(i18n, id, name)} />;
 }
diff --git a/ts/components/StoryViewer.tsx b/ts/components/StoryViewer.tsx
index c295a5d75d..ef01e8c37e 100644
--- a/ts/components/StoryViewer.tsx
+++ b/ts/components/StoryViewer.tsx
@@ -55,6 +55,7 @@ import { resolveStorySendStatus } from '../util/resolveStorySendStatus';
 import { strictAssert } from '../util/assert';
 import { MessageBody } from './conversation/MessageBody';
 import { RenderLocation } from './conversation/MessageTextRenderer';
+import { arrow } from '../util/keyboard';
 
 function renderStrong(parts: Array<JSX.Element | string>) {
   return <strong>{parts}</strong>;
@@ -409,7 +410,7 @@ export function StoryViewer({
         return;
       }
 
-      if (canNavigateRight && ev.key === 'ArrowRight') {
+      if (canNavigateRight && ev.key === arrow('end')) {
         viewStory({
           storyId: story.messageId,
           storyViewMode,
@@ -417,7 +418,7 @@ export function StoryViewer({
         });
         ev.preventDefault();
         ev.stopPropagation();
-      } else if (canNavigateLeft && ev.key === 'ArrowLeft') {
+      } else if (canNavigateLeft && ev.key === arrow('start')) {
         viewStory({
           storyId: story.messageId,
           storyViewMode,
diff --git a/ts/components/TextAttachment.tsx b/ts/components/TextAttachment.tsx
index cb5e0280c9..f24228df71 100644
--- a/ts/components/TextAttachment.tsx
+++ b/ts/components/TextAttachment.tsx
@@ -242,6 +242,7 @@ export const TextAttachment = forwardRef<HTMLTextAreaElement, PropsType>(
                   >
                     {onChange ? (
                       <TextareaAutosize
+                        dir="auto"
                         className="TextAttachment__text__container TextAttachment__text__textarea"
                         disabled={!isEditingText}
                         onChange={ev => onChange(ev.currentTarget.value)}
diff --git a/ts/components/Tooltip.stories.tsx b/ts/components/Tooltip.stories.tsx
index 352c98f2e6..4fb4c8e334 100644
--- a/ts/components/Tooltip.stories.tsx
+++ b/ts/components/Tooltip.stories.tsx
@@ -25,8 +25,8 @@ const Trigger = (
       display: 'inline-block',
       marginTop: 200,
       marginBottom: 200,
-      marginLeft: 200,
-      marginRight: 200,
+      marginInlineStart: 200,
+      marginInlineEnd: 200,
     }}
   >
     Trigger
diff --git a/ts/components/UserText.tsx b/ts/components/UserText.tsx
new file mode 100644
index 0000000000..e588421943
--- /dev/null
+++ b/ts/components/UserText.tsx
@@ -0,0 +1,12 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+import React from 'react';
+import { Emojify } from './conversation/Emojify';
+
+export function UserText({ text }: { text: string }): JSX.Element {
+  return (
+    <span dir="auto">
+      <Emojify text={text} />
+    </span>
+  );
+}
diff --git a/ts/components/conversation/ChangeNumberNotification.tsx b/ts/components/conversation/ChangeNumberNotification.tsx
index bdb84bcbaa..cddc486bff 100644
--- a/ts/components/conversation/ChangeNumberNotification.tsx
+++ b/ts/components/conversation/ChangeNumberNotification.tsx
@@ -9,7 +9,7 @@ import { Intl } from '../Intl';
 
 import { SystemMessage } from './SystemMessage';
 import { MessageTimestamp } from './MessageTimestamp';
-import { Emojify } from './Emojify';
+import { UserText } from '../UserText';
 
 export type PropsData = {
   sender: ConversationType;
@@ -32,7 +32,9 @@ export function ChangeNumberNotification(props: Props): JSX.Element {
           <Intl
             id="icu:ChangeNumber--notification"
             components={{
-              sender: <Emojify text={sender.title || sender.firstName || ''} />,
+              sender: (
+                <UserText text={sender.title || sender.firstName || ''} />
+              ),
             }}
             i18n={i18n}
           />
diff --git a/ts/components/conversation/ContactModal.tsx b/ts/components/conversation/ContactModal.tsx
index 35cd0b04ce..1e27c003d6 100644
--- a/ts/components/conversation/ContactModal.tsx
+++ b/ts/components/conversation/ContactModal.tsx
@@ -23,6 +23,7 @@ import { Modal } from '../Modal';
 import { RemoveGroupMemberConfirmationDialog } from './RemoveGroupMemberConfirmationDialog';
 import { SharedGroupNames } from '../SharedGroupNames';
 import { missingCaseError } from '../../util/missingCaseError';
+import { UserText } from '../UserText';
 
 export type PropsDataType = {
   areWeASubscriber: boolean;
@@ -206,7 +207,9 @@ export function ContactModal({
               title={contact.title}
               unblurredAvatarPath={contact.unblurredAvatarPath}
             />
-            <div className="ContactModal__name">{contact.title}</div>
+            <div className="ContactModal__name">
+              <UserText text={contact.title} />
+            </div>
             <div className="module-about__container">
               <About text={contact.about} />
             </div>
diff --git a/ts/components/conversation/ContactSpoofingReviewDialog.tsx b/ts/components/conversation/ContactSpoofingReviewDialog.tsx
index c4aaaa0bfa..f262dfb64f 100644
--- a/ts/components/conversation/ContactSpoofingReviewDialog.tsx
+++ b/ts/components/conversation/ContactSpoofingReviewDialog.tsx
@@ -19,10 +19,10 @@ import { RemoveGroupMemberConfirmationDialog } from './RemoveGroupMemberConfirma
 import { ContactSpoofingReviewDialogPerson } from './ContactSpoofingReviewDialogPerson';
 import { Button, ButtonVariant } from '../Button';
 import { Intl } from '../Intl';
-import { Emojify } from './Emojify';
 import { assertDev } from '../../util/assert';
 import { missingCaseError } from '../../util/missingCaseError';
 import { isInSystemContacts } from '../../util/isInSystemContacts';
+import { UserText } from '../UserText';
 
 export type PropsType = {
   conversationId: string;
@@ -316,8 +316,8 @@ export function ContactSpoofingReviewDialog(props: PropsType): JSX.Element {
                     i18n={i18n}
                     id="icu:ContactSpoofingReviewDialog__group__name-change-info"
                     components={{
-                      oldName: <Emojify text={oldName} />,
-                      newName: <Emojify text={newName} />,
+                      oldName: <UserText text={oldName} />,
+                      newName: <UserText text={newName} />,
                     }}
                   />
                 </div>
diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx
index 2cf77a3569..f352eb7637 100644
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@@ -12,7 +12,6 @@ import {
   SubMenu,
 } from 'react-contextmenu';
 
-import { Emojify } from './Emojify';
 import { DisappearingTimeDialog } from '../DisappearingTimeDialog';
 import { Avatar, AvatarSize } from '../Avatar';
 import { InContactsIcon } from '../InContactsIcon';
@@ -39,6 +38,7 @@ import {
   useKeyboardShortcuts,
 } from '../../hooks/useKeyboardShortcuts';
 import { PanelType } from '../../types/Panels';
+import { UserText } from '../UserText';
 
 export enum OutgoingCallButtonStyle {
   None,
@@ -185,7 +185,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
 
     return (
       <div className="module-ConversationHeader__header__info__title">
-        <Emojify text={title} />
+        <UserText text={title} />
         {isInSystemContacts({ name, type }) ? (
           <InContactsIcon
             className="module-ConversationHeader__header__info__title__in-contacts-icon"
@@ -359,6 +359,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
       setPinned,
       type,
     } = this.props;
+    const isRTL = i18n.getLocaleDirection() === 'rtl';
 
     const muteOptions = getMuteOptions(muteExpiresAt, i18n);
 
@@ -368,8 +369,8 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
       const isMuted = muteExpiresAt && isConversationMuted({ muteExpiresAt });
 
       return (
-        <ContextMenu id={triggerId}>
-          <SubMenu hoverDelay={1} title={muteTitle} rtl>
+        <ContextMenu id={triggerId} rtl={isRTL}>
+          <SubMenu hoverDelay={1} title={muteTitle} rtl={!isRTL}>
             {isMuted ? (
               <MenuItem
                 onClick={() => {
@@ -493,13 +494,13 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
     });
 
     return (
-      <ContextMenu id={triggerId}>
+      <ContextMenu id={triggerId} rtl={isRTL}>
         {disableTimerChanges ? null : (
-          <SubMenu hoverDelay={1} title={disappearingTitle} rtl>
+          <SubMenu hoverDelay={1} title={disappearingTitle} rtl={!isRTL}>
             {expireDurations}
           </SubMenu>
         )}
-        <SubMenu hoverDelay={1} title={muteTitle} rtl>
+        <SubMenu hoverDelay={1} title={muteTitle} rtl={!isRTL}>
           {muteOptions.map(item => (
             <MenuItem
               key={item.name}
diff --git a/ts/components/conversation/DeliveryIssueNotification.tsx b/ts/components/conversation/DeliveryIssueNotification.tsx
index 8cb25fe514..d37074bd54 100644
--- a/ts/components/conversation/DeliveryIssueNotification.tsx
+++ b/ts/components/conversation/DeliveryIssueNotification.tsx
@@ -9,9 +9,9 @@ import { SystemMessage } from './SystemMessage';
 import type { ConversationType } from '../../state/ducks/conversations';
 import type { LocalizerType } from '../../types/Util';
 import { Intl } from '../Intl';
-import { Emojify } from './Emojify';
 
 import { DeliveryIssueDialog } from './DeliveryIssueDialog';
+import { UserText } from '../UserText';
 
 export type PropsDataType = {
   sender?: ConversationType;
@@ -48,7 +48,7 @@ export function DeliveryIssueNotification(
           <Intl
             id="icu:DeliveryIssue--notification"
             components={{
-              sender: <Emojify text={sender.firstName || sender.title} />,
+              sender: <UserText text={sender.firstName || sender.title} />,
             }}
             i18n={i18n}
           />
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 6b324fc460..8ff5e7602f 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -91,11 +91,11 @@ import { getBadgeImageFileLocalPath } from '../../badges/getBadgeImageFileLocalP
 import { handleOutsideClick } from '../../util/handleOutsideClick';
 import { PaymentEventKind } from '../../types/Payment';
 import type { AnyPaymentEvent } from '../../types/Payment';
-import { Emojify } from './Emojify';
 import { getPaymentEventDescription } from '../../messages/helpers';
 import { PanelType } from '../../types/Panels';
 import { openLinkInWebBrowser } from '../../util/openLinkInWebBrowser';
 import { RenderLocation } from './MessageTextRenderer';
+import { UserText } from '../UserText';
 
 const GUESS_METADATA_WIDTH_TIMESTAMP_SIZE = 16;
 const GUESS_METADATA_WIDTH_EXPIRE_TIMER_SIZE = 18;
@@ -141,6 +141,13 @@ export enum TextDirection {
   None = 'None',
 }
 
+const TextDirectionToDirAttribute = {
+  [TextDirection.LeftToRight]: 'ltr',
+  [TextDirection.RightToLeft]: 'rtl',
+  [TextDirection.Default]: 'auto',
+  [TextDirection.None]: 'auto',
+};
+
 export const MessageStatuses = [
   'delivered',
   'error',
@@ -565,11 +572,8 @@ export class Message extends React.PureComponent<Props, State> {
       shouldHideMetadata,
       status,
       text,
-      textDirection,
     }: Readonly<Props> = this.props
   ): MetadataPlacement {
-    const isRTL = textDirection === TextDirection.RightToLeft;
-
     if (
       !expirationLength &&
       !expirationTimestamp &&
@@ -603,10 +607,6 @@ export class Message extends React.PureComponent<Props, State> {
       return MetadataPlacement.Bottom;
     }
 
-    if (isRTL) {
-      return MetadataPlacement.Bottom;
-    }
-
     return MetadataPlacement.InlineWithText;
   }
 
@@ -1208,6 +1208,7 @@ export class Message extends React.PureComponent<Props, State> {
             </div>
           ) : null}
           <div
+            dir="auto"
             className={classNames(
               'module-message__link-preview__text',
               previewHasImage && !isFullSizeImage
@@ -1277,7 +1278,6 @@ export class Message extends React.PureComponent<Props, State> {
         direction === 'incoming'
           ? i18n('icu:message--donation--unopened--incoming')
           : i18n('icu:message--donation--unopened--outgoing');
-      const isRTL = getDirection(description) === 'rtl';
       const { metadataWidth } = this.state;
 
       return (
@@ -1317,7 +1317,6 @@ export class Message extends React.PureComponent<Props, State> {
                 'module-message__text',
                 `module-message__text--${direction}`
               )}
-              dir={isRTL ? 'rtl' : undefined}
             >
               {description}
               {this.getMetadataPlacement() ===
@@ -1487,7 +1486,7 @@ export class Message extends React.PureComponent<Props, State> {
         </p>
         {payment.note != null && (
           <p className="module-payment-notification__note">
-            <Emojify text={payment.note} />
+            <UserText text={payment.note} />
           </p>
         )}
       </div>
@@ -1765,10 +1764,8 @@ export class Message extends React.PureComponent<Props, State> {
       status,
       text,
       textAttachment,
-      textDirection,
     } = this.props;
     const { metadataWidth } = this.state;
-    const isRTL = textDirection === TextDirection.RightToLeft;
 
     // eslint-disable-next-line no-nested-ternary
     const contents = deletedForEveryone
@@ -1793,7 +1790,6 @@ export class Message extends React.PureComponent<Props, State> {
             ? 'module-message__text--delete-for-everyone'
             : null
         )}
-        dir={isRTL ? 'rtl' : undefined}
         onDoubleClick={(event: React.MouseEvent) => {
           // Prevent double-click interefering with interactions _inside_
           // the bubble.
@@ -1824,10 +1820,9 @@ export class Message extends React.PureComponent<Props, State> {
           text={contents || ''}
           textAttachment={textAttachment}
         />
-        {!isRTL &&
-          this.getMetadataPlacement() === MetadataPlacement.InlineWithText && (
-            <MessageTextMetadataSpacer metadataWidth={metadataWidth} />
-          )}
+        {this.getMetadataPlacement() === MetadataPlacement.InlineWithText && (
+          <MessageTextMetadataSpacer metadataWidth={metadataWidth} />
+        )}
       </div>
     );
   }
@@ -2500,6 +2495,7 @@ export class Message extends React.PureComponent<Props, State> {
       onContextMenu,
       onKeyDown,
       text,
+      textDirection,
     } = this.props;
     const { isTargeted } = this.state;
 
@@ -2569,7 +2565,9 @@ export class Message extends React.PureComponent<Props, State> {
           tabIndex={-1}
         >
           {this.renderAuthor()}
-          {this.renderContents()}
+          <div dir={TextDirectionToDirAttribute[textDirection]}>
+            {this.renderContents()}
+          </div>
         </div>
         {this.renderReactions(direction === 'outgoing')}
       </div>
diff --git a/ts/components/conversation/MessageBody.tsx b/ts/components/conversation/MessageBody.tsx
index a43c4ace8c..9059e8192b 100644
--- a/ts/components/conversation/MessageBody.tsx
+++ b/ts/components/conversation/MessageBody.tsx
@@ -7,13 +7,13 @@ import React from 'react';
 import type { AttachmentType } from '../../types/Attachment';
 import { canBeDownloaded } from '../../types/Attachment';
 import { getSizeClass } from '../emoji/lib';
-import { Emojify } from './Emojify';
 
 import type { ShowConversationType } from '../../state/ducks/conversations';
 import type { HydratedBodyRangesType } from '../../types/BodyRange';
 import type { LocalizerType } from '../../types/Util';
 import { MessageTextRenderer } from './MessageTextRenderer';
 import type { RenderLocation } from './MessageTextRenderer';
+import { UserText } from '../UserText';
 
 export type Props = {
   author?: string;
@@ -103,7 +103,7 @@ export function MessageBody({
       {author && (
         <>
           <span className="MessageBody__author">
-            <Emojify text={author} />
+            <UserText text={author} />
           </span>
           :{' '}
         </>
@@ -111,7 +111,7 @@ export function MessageBody({
       {prefix && (
         <>
           <span className="MessageBody__prefix">
-            <Emojify text={prefix} />
+            <UserText text={prefix} />
           </span>{' '}
         </>
       )}
diff --git a/ts/components/conversation/WaveformScrubber.tsx b/ts/components/conversation/WaveformScrubber.tsx
index 0e623145bc..a5d73aec2d 100644
--- a/ts/components/conversation/WaveformScrubber.tsx
+++ b/ts/components/conversation/WaveformScrubber.tsx
@@ -6,6 +6,7 @@ import { useRefMerger } from '../../hooks/useRefMerger';
 import type { LocalizerType } from '../../types/Util';
 import { durationToPlaybackText } from '../../util/durationToPlaybackText';
 import { Waveform } from './Waveform';
+import { arrow } from '../../util/keyboard';
 
 type Props = Readonly<{
   i18n: LocalizerType;
@@ -73,9 +74,10 @@ export const WaveformScrubber = React.forwardRef(function WaveformScrubber(
     }
 
     let increment: number;
-    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+
+    if (event.key === 'ArrowUp' || event.key === arrow('end')) {
       increment = +SMALL_INCREMENT;
-    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+    } else if (event.key === 'ArrowDown' || event.key === arrow('start')) {
       increment = -SMALL_INCREMENT;
     } else if (event.key === 'PageUp') {
       increment = +BIG_INCREMENT;
diff --git a/ts/components/conversation/conversation-details/AddGroupMembersModal/ConfirmAdditionsModal.tsx b/ts/components/conversation/conversation-details/AddGroupMembersModal/ConfirmAdditionsModal.tsx
index d0fc07d9c9..514a8255f9 100644
--- a/ts/components/conversation/conversation-details/AddGroupMembersModal/ConfirmAdditionsModal.tsx
+++ b/ts/components/conversation/conversation-details/AddGroupMembersModal/ConfirmAdditionsModal.tsx
@@ -12,8 +12,8 @@ import { Spinner } from '../../../Spinner';
 import type { ConversationType } from '../../../../state/ducks/conversations';
 import { RequestState } from '../util';
 import { Intl } from '../../../Intl';
-import { Emojify } from '../../Emojify';
 import { ContactName } from '../../ContactName';
+import { UserText } from '../../../UserText';
 
 export type StatePropsType = {
   groupTitle: string;
@@ -40,7 +40,7 @@ export function ConfirmAdditionsModal({
     'Expected at least one conversation to be selected but none were picked'
   );
 
-  const groupTitleNode: JSX.Element = <Emojify text={groupTitle} />;
+  const groupTitleNode: JSX.Element = <UserText text={groupTitle} />;
 
   let headerText: ReactNode;
   if (selectedContacts.length === 1) {
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx b/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
index 28796366c2..6a44cf602e 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
@@ -7,7 +7,6 @@ import React, { useState } from 'react';
 import { Avatar, AvatarSize } from '../../Avatar';
 import { AvatarLightbox } from '../../AvatarLightbox';
 import type { ConversationType } from '../../../state/ducks/conversations';
-import { Emojify } from '../Emojify';
 import { GroupDescription } from '../GroupDescription';
 import { About } from '../About';
 import type { GroupV2Membership } from './ConversationDetailsMembershipList';
@@ -15,6 +14,7 @@ import type { LocalizerType, ThemeType } from '../../../types/Util';
 import { bemGenerator } from './util';
 import { BadgeDialog } from '../../BadgeDialog';
 import type { BadgeType } from '../../../badges/types';
+import { UserText } from '../../UserText';
 
 export type Props = {
   areWeASubscriber: boolean;
@@ -106,7 +106,7 @@ export function ConversationDetailsHeader({
   const contents = (
     <div>
       <div className={bem('title')}>
-        <Emojify text={isMe ? i18n('icu:noteToSelf') : conversation.title} />
+        {isMe ? i18n('icu:noteToSelf') : <UserText text={conversation.title} />}
         {isMe && <span className="ContactModal__official-badge__large" />}
       </div>
     </div>
diff --git a/ts/components/conversationList/GroupListItem.tsx b/ts/components/conversationList/GroupListItem.tsx
index c4eb83d548..77858b6f0d 100644
--- a/ts/components/conversationList/GroupListItem.tsx
+++ b/ts/components/conversationList/GroupListItem.tsx
@@ -6,8 +6,8 @@ import type { ConversationType } from '../../state/ducks/conversations';
 import type { LocalizerType } from '../../types/Util';
 import type { UUIDStringType } from '../../types/UUID';
 import { Avatar, AvatarSize } from '../Avatar';
-import { Emojify } from '../conversation/Emojify';
 import { ListTile } from '../ListTile';
+import { UserText } from '../UserText';
 
 export enum DisabledReason {
   AlreadyMember = 'already-member',
@@ -66,8 +66,8 @@ export function GroupListItem({
           badge={undefined}
         />
       }
-      title={<Emojify text={group.title} />}
-      subtitle={<Emojify text={messageText} />}
+      title={<UserText text={group.title} />}
+      subtitle={<UserText text={messageText} />}
       onClick={() => onSelectGroup(group.id)}
     />
   );
diff --git a/ts/components/conversationList/PhoneNumberCheckbox.tsx b/ts/components/conversationList/PhoneNumberCheckbox.tsx
index 46a5a114fb..9893cb0c18 100644
--- a/ts/components/conversationList/PhoneNumberCheckbox.tsx
+++ b/ts/components/conversationList/PhoneNumberCheckbox.tsx
@@ -12,9 +12,9 @@ import type { LocalizerType, ThemeType } from '../../types/Util';
 import { AvatarColors } from '../../types/Colors';
 import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid';
 import { ListTile } from '../ListTile';
-import { Emojify } from '../conversation/Emojify';
 import { Avatar, AvatarSize } from '../Avatar';
 import { Spinner } from '../Spinner';
+import { UserText } from '../UserText';
 
 export type PropsDataType = {
   phoneNumber: ParsedE164Type;
@@ -106,7 +106,7 @@ export const PhoneNumberCheckbox: FunctionComponent<PropsType> = React.memo(
       />
     );
 
-    const title = <Emojify text={phoneNumber.userInput} />;
+    const title = <UserText text={phoneNumber.userInput} />;
 
     return (
       <>
@@ -128,7 +128,7 @@ export const PhoneNumberCheckbox: FunctionComponent<PropsType> = React.memo(
             isChecked={isChecked}
             onClick={onClickItem}
             leading={avatar}
-            title={<Emojify text={phoneNumber.userInput} />}
+            title={<UserText text={phoneNumber.userInput} />}
           />
         )}
         {modal}
diff --git a/ts/components/emoji/EmojiPicker.tsx b/ts/components/emoji/EmojiPicker.tsx
index eab15c438a..21594b40b7 100644
--- a/ts/components/emoji/EmojiPicker.tsx
+++ b/ts/components/emoji/EmojiPicker.tsx
@@ -398,6 +398,7 @@ export const EmojiPicker = React.memo(
                     className="module-emoji-picker__header__search-field__input"
                     placeholder={i18n('icu:EmojiPicker--search-placeholder')}
                     onChange={handleSearchChange}
+                    dir="auto"
                   />
                 </div>
               ) : (
@@ -463,7 +464,7 @@ export const EmojiPicker = React.memo(
                 <Emoji
                   shortName="slightly_frowning_face"
                   size={16}
-                  style={{ marginLeft: '4px' }}
+                  style={{ marginInlineStart: '4px' }}
                 />
               </div>
             )}
diff --git a/ts/components/installScreen/InstallScreenChoosingDeviceNameStep.tsx b/ts/components/installScreen/InstallScreenChoosingDeviceNameStep.tsx
index 0d2db65e61..7df1bdb3f4 100644
--- a/ts/components/installScreen/InstallScreenChoosingDeviceNameStep.tsx
+++ b/ts/components/installScreen/InstallScreenChoosingDeviceNameStep.tsx
@@ -70,6 +70,7 @@ export function InstallScreenChoosingDeviceNameStep({
             ref={focusRef}
             spellCheck={false}
             value={deviceName}
+            dir="auto"
           />
           <Button
             disabled={!canSubmit}
diff --git a/ts/components/leftPane/LeftPaneSearchHelper.tsx b/ts/components/leftPane/LeftPaneSearchHelper.tsx
index 200d471bdb..8b778d9e28 100644
--- a/ts/components/leftPane/LeftPaneSearchHelper.tsx
+++ b/ts/components/leftPane/LeftPaneSearchHelper.tsx
@@ -18,8 +18,8 @@ import type {
 import { LeftPaneSearchInput } from '../LeftPaneSearchInput';
 
 import { Intl } from '../Intl';
-import { Emojify } from '../conversation/Emojify';
 import { assertDev } from '../../util/assert';
+import { UserText } from '../UserText';
 
 // The "correct" thing to do is to measure the size of the left pane and render enough
 //   search results for the container height. But (1) that's slow (2) the list is
@@ -153,7 +153,7 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
           components={{
             searchTerm,
             conversationName: (
-              <Emojify key="item-1" text={searchConversationName} />
+              <UserText key="item-1" text={searchConversationName} />
             ),
           }}
         />
diff --git a/ts/components/stickers/StickerButton.tsx b/ts/components/stickers/StickerButton.tsx
index 88ec21e81a..f29bc9ba9a 100644
--- a/ts/components/stickers/StickerButton.tsx
+++ b/ts/components/stickers/StickerButton.tsx
@@ -17,6 +17,7 @@ import { themeClassName } from '../../util/theme';
 import { handleOutsideClick } from '../../util/handleOutsideClick';
 import * as KeyboardLayout from '../../services/keyboardLayout';
 import { useRefMerger } from '../../hooks/useRefMerger';
+import { UserText } from '../UserText';
 
 export type OwnProps = {
   readonly className?: string;
@@ -284,7 +285,7 @@ export const StickerButton = React.memo(function StickerButtonInner({
                 )}
                 <span className="module-sticker-button__tooltip__text">
                   <span className="module-sticker-button__tooltip__text__title">
-                    {installedPack.title}
+                    <UserText text={installedPack.title} />
                   </span>{' '}
                   installed
                 </span>
diff --git a/ts/components/stickers/StickerManagerPackRow.tsx b/ts/components/stickers/StickerManagerPackRow.tsx
index 67b5d1ee33..8b4b312cbb 100644
--- a/ts/components/stickers/StickerManagerPackRow.tsx
+++ b/ts/components/stickers/StickerManagerPackRow.tsx
@@ -6,6 +6,7 @@ import { ConfirmationDialog } from '../ConfirmationDialog';
 import type { LocalizerType } from '../../types/Util';
 import type { StickerPackType } from '../../state/ducks/stickers';
 import { Button, ButtonVariant } from '../Button';
+import { UserText } from '../UserText';
 
 export type OwnProps = {
   readonly i18n: LocalizerType;
@@ -126,7 +127,7 @@ export const StickerManagerPackRow = React.memo(
           )}
           <div className="module-sticker-manager__pack-row__meta">
             <div className="module-sticker-manager__pack-row__meta__title">
-              {pack.title}
+              <UserText text={pack.title} />
               {pack.isBlessed ? (
                 <span className="module-sticker-manager__pack-row__meta__blessed-icon" />
               ) : null}
diff --git a/ts/components/stickers/StickerPreviewModal.tsx b/ts/components/stickers/StickerPreviewModal.tsx
index 92839beb56..830e13173a 100644
--- a/ts/components/stickers/StickerPreviewModal.tsx
+++ b/ts/components/stickers/StickerPreviewModal.tsx
@@ -11,6 +11,7 @@ import { Spinner } from '../Spinner';
 import { useRestoreFocus } from '../../hooks/useRestoreFocus';
 import { Modal } from '../Modal';
 import { Button, ButtonVariant } from '../Button';
+import { UserText } from '../UserText';
 
 export type OwnProps = {
   readonly onClose?: () => unknown;
@@ -164,7 +165,7 @@ export const StickerPreviewModal = React.memo(function StickerPreviewModalInner(
       <div className="module-sticker-manager__preview-modal__footer">
         <div className="module-sticker-manager__preview-modal__footer--info">
           <h3 className="module-sticker-manager__preview-modal__footer--title">
-            {pack.title}
+            <UserText text={pack.title} />
             {pack.isBlessed ? (
               <span className="module-sticker-manager__preview-modal__footer--blessed-icon" />
             ) : null}
diff --git a/ts/quill/mentions/completion.tsx b/ts/quill/mentions/completion.tsx
index b576431407..b33a62869c 100644
--- a/ts/quill/mentions/completion.tsx
+++ b/ts/quill/mentions/completion.tsx
@@ -18,6 +18,7 @@ import type { PreferredBadgeSelectorType } from '../../state/selectors/badges';
 import { matchBlotTextPartitions } from '../util';
 import { handleOutsideClick } from '../../util/handleOutsideClick';
 import { sameWidthModifier } from '../../util/popperUtil';
+import { UserText } from '../../components/UserText';
 
 export type MentionCompletionOptions = {
   getPreferredBadge: PreferredBadgeSelectorType;
@@ -274,7 +275,7 @@ export class MentionCompletion {
                     unblurredAvatarPath={member.unblurredAvatarPath}
                   />
                   <div className="module-composition-input__suggestions__title">
-                    {member.title}
+                    <UserText text={member.title} />
                   </div>
                 </button>
               ))}
diff --git a/ts/state/ducks/user.ts b/ts/state/ducks/user.ts
index 2f510a0ffd..410bf96e7c 100644
--- a/ts/state/ducks/user.ts
+++ b/ts/state/ducks/user.ts
@@ -116,6 +116,7 @@ export function getEmptyState(): UserStateType {
       getLocale: intlNotSetup,
       getIntl: intlNotSetup,
       isLegacyFormat: intlNotSetup,
+      getLocaleDirection: intlNotSetup,
     }),
     interactionMode: 'mouse',
     isMainWindowMaximized: false,
diff --git a/ts/state/smart/CallManager.tsx b/ts/state/smart/CallManager.tsx
index 342a16b7d6..ecc615d7b2 100644
--- a/ts/state/smart/CallManager.tsx
+++ b/ts/state/smart/CallManager.tsx
@@ -82,7 +82,7 @@ async function notifyForCall(
     title: notificationTitle,
     icon: isVideoCall
       ? 'images/icons/v2/video-solid-24.svg'
-      : 'images/icons/v2/phone-right-solid-24.svg',
+      : 'images/icons/v2/phone-hard-solid-24.svg',
     message: isVideoCall
       ? window.i18n('icu:incomingVideoCall')
       : window.i18n('icu:incomingAudioCall'),
diff --git a/ts/test-electron/quill/mentions/completion_test.tsx b/ts/test-electron/quill/mentions/completion_test.tsx
index b687c19cb6..b13756aa82 100644
--- a/ts/test-electron/quill/mentions/completion_test.tsx
+++ b/ts/test-electron/quill/mentions/completion_test.tsx
@@ -14,6 +14,7 @@ import type { ConversationType } from '../../../state/ducks/conversations';
 import { MemberRepository } from '../../../quill/memberRepository';
 import { ThemeType } from '../../../types/Util';
 import { getDefaultConversationWithUuid } from '../../../test-both/helpers/getDefaultConversation';
+import { setupI18n } from '../../../util/setupI18n';
 
 const me: ConversationType = getDefaultConversationWithUuid({
   id: '666777',
@@ -67,11 +68,7 @@ describe('MentionCompletion', () => {
 
     const options: MentionCompletionOptions = {
       getPreferredBadge: () => undefined,
-      i18n: Object.assign(sinon.stub(), {
-        getLocale: sinon.stub(),
-        getIntl: sinon.stub(),
-        isLegacyFormat: sinon.stub(),
-      }),
+      i18n: setupI18n('en', {}),
       me,
       memberRepositoryRef,
       setMentionPickerElement: sinon.stub(),
diff --git a/ts/test-node/app/locale_test.ts b/ts/test-node/app/locale_test.ts
index 78fe97e9ab..b5c4b287e2 100644
--- a/ts/test-node/app/locale_test.ts
+++ b/ts/test-node/app/locale_test.ts
@@ -2,17 +2,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { assert } from 'chai';
+import { stub } from 'sinon';
 import { load } from '../../../app/locale';
-import type { LoggerType } from '../../types/Logging';
-
-const logger: Pick<LoggerType, 'info' | 'warn'> = {
-  info(..._args: Array<unknown>) {
-    // noop
-  },
-  warn(..._args: Array<unknown>) {
-    throw new Error(String(_args));
-  },
-};
 
 describe('locale', async () => {
   describe('load', () => {
@@ -21,7 +12,17 @@ describe('locale', async () => {
         preferredSystemLocales: Array<string>,
         expectedLocale: string
       ) {
-        const actualLocale = await load({ preferredSystemLocales, logger });
+        const actualLocale = await load({
+          preferredSystemLocales,
+          logger: {
+            fatal: stub().throwsArg(0),
+            error: stub().throwsArg(0),
+            warn: stub().throwsArg(0),
+            info: stub(),
+            debug: stub(),
+            trace: stub(),
+          },
+        });
         assert.strictEqual(actualLocale.name, expectedLocale);
       }
 
diff --git a/ts/test-node/app/menu_test.ts b/ts/test-node/app/menu_test.ts
index 9af67e7250..04ef834438 100644
--- a/ts/test-node/app/menu_test.ts
+++ b/ts/test-node/app/menu_test.ts
@@ -199,12 +199,12 @@ describe('createTemplate', () => {
   const { i18n } = loadLocale({
     preferredSystemLocales: ['en'],
     logger: {
-      info(_arg: unknown) {
-        // noop
-      },
-      warn(arg: unknown) {
-        throw new Error(String(arg));
-      },
+      fatal: stub().throwsArg(0),
+      error: stub().throwsArg(0),
+      warn: stub().throwsArg(0),
+      info: stub(),
+      debug: stub(),
+      trace: stub(),
     },
   });
 
diff --git a/ts/types/RendererConfig.ts b/ts/types/RendererConfig.ts
index 52f2f73abc..79af911170 100644
--- a/ts/types/RendererConfig.ts
+++ b/ts/types/RendererConfig.ts
@@ -40,6 +40,7 @@ export const rendererConfigSchema = z.object({
   homePath: configRequiredStringSchema,
   hostname: configRequiredStringSchema,
   resolvedTranslationsLocale: configRequiredStringSchema,
+  resolvedTranslationsLocaleDirection: z.enum(['ltr', 'rtl']),
   preferredSystemLocales: z.array(configRequiredStringSchema),
   name: configRequiredStringSchema,
   nodeVersion: configRequiredStringSchema,
diff --git a/ts/types/Util.ts b/ts/types/Util.ts
index 5d30065524..8fdfa7d076 100644
--- a/ts/types/Util.ts
+++ b/ts/types/Util.ts
@@ -3,6 +3,7 @@
 
 import type { IntlShape } from 'react-intl';
 import type { UUIDStringType } from './UUID';
+import type { LocaleDirection } from '../../app/locale';
 
 export type StoryContextType = {
   authorUuid?: UUIDStringType;
@@ -23,6 +24,7 @@ export type LocalizerType = {
   getIntl(): IntlShape;
   isLegacyFormat(key: string): boolean;
   getLocale(): string;
+  getLocaleDirection(): LocaleDirection;
 };
 
 export enum SentMediaQualityType {
diff --git a/ts/util/keyboard.ts b/ts/util/keyboard.ts
new file mode 100644
index 0000000000..b90f210482
--- /dev/null
+++ b/ts/util/keyboard.ts
@@ -0,0 +1,20 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { LocaleDirection } from '../../app/locale';
+
+export type LogicalDirection = 'start' | 'end';
+export type HorizontalArrowKey = 'ArrowLeft' | 'ArrowRight';
+
+const logicalArrows: Record<
+  LogicalDirection,
+  Record<LocaleDirection, HorizontalArrowKey>
+> = {
+  start: { ltr: 'ArrowLeft', rtl: 'ArrowRight' },
+  end: { ltr: 'ArrowRight', rtl: 'ArrowLeft' },
+};
+
+export function arrow(logicalDirection: LogicalDirection): HorizontalArrowKey {
+  const localeDirection = window.getResolvedMessagesLocaleDirection();
+  return logicalArrows[logicalDirection][localeDirection];
+}
diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json
index 822a44b672..265f0fa151 100644
--- a/ts/util/lint/exceptions.json
+++ b/ts/util/lint/exceptions.json
@@ -2552,5 +2552,13 @@
     "reasonCategory": "falseMatch|testCode|exampleCode|otherUtilityCode|regexMatchedSafeCode|notExercisedByOurApp|ruleNeeded|usageTrusted",
     "updated": "2023-04-12T15:51:28.066Z",
     "reasonDetail": "<optional>"
+  },
+  {
+    "rule": "thenify-multiArgs",
+    "path": "node_modules/default-browser-id/node_modules/pify/index.js",
+    "line": "\t\t\t\t} else if (opts.multiArgs) {",
+    "reasonCategory": "falseMatch|testCode|exampleCode|otherUtilityCode|regexMatchedSafeCode|notExercisedByOurApp|ruleNeeded|usageTrusted",
+    "updated": "2023-04-20T16:43:40.643Z",
+    "reasonDetail": "<optional>"
   }
 ]
diff --git a/ts/util/setupI18n.ts b/ts/util/setupI18n.ts
index 0e49d1163c..a1e4b5619b 100644
--- a/ts/util/setupI18n.ts
+++ b/ts/util/setupI18n.ts
@@ -172,6 +172,9 @@ export function setupI18n(
     return legacyMessages[key] != null;
   };
   getMessage.getLocale = () => locale;
+  getMessage.getLocaleDirection = () => {
+    return window.getResolvedMessagesLocaleDirection();
+  };
 
   return getMessage;
 }
diff --git a/ts/window.d.ts b/ts/window.d.ts
index dd9f1767bc..819b33db3b 100644
--- a/ts/window.d.ts
+++ b/ts/window.d.ts
@@ -56,6 +56,7 @@ import type { SignalContextType } from './windows/context';
 import type * as Message2 from './types/Message2';
 import type { initializeMigrations } from './signal';
 import type { RetryPlaceholders } from './util/retryPlaceholders';
+import type { LocaleDirection } from '../app/locale';
 
 export { Long } from 'long';
 
@@ -169,6 +170,7 @@ declare global {
     getEnvironment: typeof getEnvironment;
     getHostName: () => string;
     getInteractionMode: () => 'mouse' | 'keyboard';
+    getResolvedMessagesLocaleDirection: () => LocaleDirection;
     getResolvedMessagesLocale: () => string;
     getPreferredSystemLocales: () => Array<string>;
     getServerPublicParams: () => string;
diff --git a/ts/windows/main/phase1-ipc.ts b/ts/windows/main/phase1-ipc.ts
index 348ded0026..48a947837c 100644
--- a/ts/windows/main/phase1-ipc.ts
+++ b/ts/windows/main/phase1-ipc.ts
@@ -42,6 +42,8 @@ window.RETRY_DELAY = false;
 window.platform = process.platform;
 window.getTitle = () => title;
 window.getResolvedMessagesLocale = () => config.resolvedTranslationsLocale;
+window.getResolvedMessagesLocaleDirection = () =>
+  config.resolvedTranslationsLocaleDirection;
 window.getPreferredSystemLocales = () => config.preferredSystemLocales;
 window.getEnvironment = getEnvironment;
 window.getAppInstance = () => config.appInstance;
diff --git a/yarn.lock b/yarn.lock
index e3a26d042e..841bf2cfa3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1261,6 +1261,26 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
+"@csstools/css-parser-algorithms@^2.1.0":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.1.1.tgz#7b62e6412a468a2d1096ed267edd1e4a7fd4a119"
+  integrity sha512-viRnRh02AgO4mwIQb2xQNJju0i+Fh9roNgmbR5xEuG7J3TGgxjnE95HnBLgsFJOJOksvcfxOUCgODcft6Y07cA==
+
+"@csstools/css-tokenizer@^2.1.0":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz#07ae11a0a06365d7ec686549db7b729bc036528e"
+  integrity sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==
+
+"@csstools/media-query-list-parser@^2.0.1":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.4.tgz#466bd254041530dfd1e88bcb1921e8ca4af75b6a"
+  integrity sha512-GyYot6jHgcSDZZ+tLSnrzkR7aJhF2ZW6d+CXH66mjy5WpAQhZD4HDke2OQ36SivGRWlZJpAz7TzbW6OKlEpxAA==
+
+"@csstools/selector-specificity@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz#2cbcf822bf3764c9658c4d2e568bd0c0cb748016"
+  integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==
+
 "@design-systems/utils@2.12.0":
   version "2.12.0"
   resolved "https://registry.yarnpkg.com/@design-systems/utils/-/utils-2.12.0.tgz#955c108be07cb8f01532207cbfea8f848fa760c9"
@@ -4084,6 +4104,11 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
+"@types/minimist@^1.2.0":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
+  integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
+
 "@types/mocha@9.0.0":
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-9.0.0.tgz#3205bcd15ada9bc681ac20bef64e9e6df88fd297"
@@ -5085,6 +5110,16 @@ ajv@^8.0.0, ajv@^8.8.0:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
+ajv@^8.0.1:
+  version "8.12.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
+  integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
 ansi-align@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
@@ -5477,6 +5512,11 @@ ast-types@^0.14.2:
   dependencies:
     tslib "^2.0.1"
 
+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
+
 async-each@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
@@ -5791,6 +5831,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+balanced-match@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9"
+  integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
+
 base64-js@^1.0.2, base64-js@^1.3.1, base64-js@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -6010,7 +6055,7 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
-braces@^3.0.1, braces@~3.0.2:
+braces@^3.0.1, braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -6396,6 +6441,15 @@ camelcase-keys@^2.0.0:
     camelcase "^2.0.0"
     map-obj "^1.0.0"
 
+camelcase-keys@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz#5e755d6ba51aa223ec7d3d52f25778210f9dc3c0"
+  integrity sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==
+  dependencies:
+    camelcase "^5.3.1"
+    map-obj "^4.0.0"
+    quick-lru "^4.0.1"
+
 camelcase@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
@@ -6786,6 +6840,11 @@ color-support@^1.1.2, color-support@^1.1.3:
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
+colord@^2.9.3:
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
+  integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==
+
 colorette@^1.2.2:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
@@ -7080,6 +7139,16 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+cosmiconfig@^8.1.3:
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.1.3.tgz#0e614a118fcc2d9e5afc2f87d53cd09931015689"
+  integrity sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==
+  dependencies:
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+
 cp-file@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/cp-file/-/cp-file-7.0.0.tgz#b9454cfd07fe3b974ab9ea0e5f29655791a9b8cd"
@@ -7196,6 +7265,11 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
+css-functions-list@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.1.0.tgz#cf5b09f835ad91a00e5959bcfc627cd498e1321b"
+  integrity sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w==
+
 css-loader@3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.2.0.tgz#bb570d89c194f763627fcf1f80059c6832d009b2"
@@ -7301,7 +7375,7 @@ css-selector-tokenizer@^0.7.0:
     fastparse "^1.1.1"
     regexpu-core "^1.0.0"
 
-css-tree@^2.2.1:
+css-tree@^2.2.1, css-tree@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
   integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==
@@ -7503,7 +7577,15 @@ debug@^3.0.0, debug@^3.1.0, debug@^3.2.6, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
+decamelize-keys@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.1.tgz#04a2d523b2f18d80d0158a43b895d56dff8d19d8"
+  integrity sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==
+  dependencies:
+    decamelize "^1.1.0"
+    map-obj "^1.0.0"
+
+decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
@@ -7795,6 +7877,11 @@ direction@1.0.4:
   resolved "https://registry.yarnpkg.com/direction/-/direction-1.0.4.tgz#2b86fb686967e987088caf8b89059370d4837442"
   integrity sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==
 
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
 dmg-builder@23.0.8:
   version "23.0.8"
   resolved "https://registry.yarnpkg.com/dmg-builder/-/dmg-builder-23.0.8.tgz#c68d9811da8d1891e6121c1e0807635519856800"
@@ -9085,6 +9172,17 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
+fast-glob@^3.2.12:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
@@ -9124,6 +9222,11 @@ fastest-levenshtein@^1.0.12:
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"
   integrity sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==
 
+fastest-levenshtein@^1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
+  integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
+
 fastparse@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
@@ -9968,6 +10071,22 @@ global-dirs@^3.0.0:
   dependencies:
     ini "2.0.0"
 
+global-modules@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
+  integrity sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==
+  dependencies:
+    global-prefix "^3.0.0"
+
+global-prefix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-3.0.0.tgz#fc85f73064df69f50421f47f883fe5b913ba9b97"
+  integrity sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==
+  dependencies:
+    ini "^1.3.5"
+    kind-of "^6.0.2"
+    which "^1.3.1"
+
 global@^4.3.0, global@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
@@ -10025,6 +10144,11 @@ globby@^9.2.0:
     pify "^4.0.1"
     slash "^2.0.0"
 
+globjoin@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
+  integrity sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==
+
 google-libphonenumber@3.2.27:
   version "3.2.27"
   resolved "https://registry.yarnpkg.com/google-libphonenumber/-/google-libphonenumber-3.2.27.tgz#06a0c1d42be712a6fd4189e2e3b07fc36cacee01"
@@ -10117,6 +10241,11 @@ handlebars@^4.0.3, handlebars@^4.7.7:
   optionalDependencies:
     uglify-js "^3.1.4"
 
+hard-rejection@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
+  integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -10406,7 +10535,7 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
-hosted-git-info@^4.1.0:
+hosted-git-info@^4.0.1, hosted-git-info@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-4.1.0.tgz#827b82867e9ff1c8d0c4d9d53880397d2c86d224"
   integrity sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==
@@ -10468,6 +10597,11 @@ html-tags@^3.1.0:
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.2.0.tgz#dbb3518d20b726524e4dd43de397eb0a95726961"
   integrity sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==
 
+html-tags@^3.2.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
+  integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
+
 html-void-elements@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.5.tgz#ce9159494e86d95e45795b166c2021c2cfca4483"
@@ -10754,6 +10888,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+ignore@^5.2.4:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
+  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
+
 immer@^2.0.0:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/immer/-/immer-2.1.5.tgz#0389947455c5a2c7a47f1e6f415c9d1a62a1ebed"
@@ -10784,6 +10923,11 @@ import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
 
+import-lazy@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-4.0.0.tgz#e8eb627483a0a43da3c03f3e35548be5cb0cc153"
+  integrity sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==
+
 import-local@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.2.tgz#a8cfd0431d1de4a2199703d003e3e62364fa6db6"
@@ -11048,6 +11192,13 @@ is-core-module@^2.2.0:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.5.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.12.0.tgz#36ad62f6f73c8253fd6472517a12483cf03e7ec4"
+  integrity sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==
+  dependencies:
+    has "^1.0.3"
+
 is-core-module@^2.8.1:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
@@ -11282,6 +11433,11 @@ is-path-inside@^3.0.2, is-path-inside@^3.0.3:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
+is-plain-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+  integrity sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==
+
 is-plain-obj@^2.0.0, is-plain-obj@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
@@ -11844,7 +12000,7 @@ kind-of@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
 
-kind-of@^6.0.0, kind-of@^6.0.2:
+kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@@ -11872,6 +12028,11 @@ klona@^2.0.4:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
 
+known-css-properties@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.27.0.tgz#82a9358dda5fe7f7bd12b5e7142c0a205393c0c5"
+  integrity sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==
+
 ky-universal@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/ky-universal/-/ky-universal-0.3.0.tgz#3fcbb0dd03da39b5f05100d9362a630d5e1d402e"
@@ -12124,6 +12285,11 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
 
+lodash.truncate@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
+  integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
+
 lodash.uniq@4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -12311,6 +12477,11 @@ map-obj@^1.0.0, map-obj@^1.0.1:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
   integrity sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==
 
+map-obj@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
+  integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
+
 map-or-similar@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08"
@@ -12341,6 +12512,11 @@ matcher@^3.0.0:
   dependencies:
     escape-string-regexp "^4.0.0"
 
+mathml-tag-names@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
+  integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
+
 md5-hex@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/md5-hex/-/md5-hex-1.3.0.tgz#d2c4afe983c4370662179b8cad145219135046c4"
@@ -12590,6 +12766,24 @@ meow@^3.1.0:
     redent "^1.0.0"
     trim-newlines "^1.0.0"
 
+meow@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
+  integrity sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==
+  dependencies:
+    "@types/minimist" "^1.2.0"
+    camelcase-keys "^6.2.2"
+    decamelize "^1.2.0"
+    decamelize-keys "^1.1.0"
+    hard-rejection "^2.1.0"
+    minimist-options "4.1.0"
+    normalize-package-data "^3.0.0"
+    read-pkg-up "^7.0.1"
+    redent "^3.0.0"
+    trim-newlines "^3.0.0"
+    type-fest "^0.18.0"
+    yargs-parser "^20.2.3"
+
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -12738,6 +12932,14 @@ micromatch@^4.0.2, micromatch@^4.0.4:
     braces "^3.0.1"
     picomatch "^2.2.3"
 
+micromatch@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
 microrouter@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/microrouter/-/microrouter-3.1.3.tgz#1e45df77d3e2d773be5da129cfc7d5e6e6c86f4e"
@@ -12852,6 +13054,15 @@ minimatch@^3.0.5, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimist-options@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
+  integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==
+  dependencies:
+    arrify "^1.0.1"
+    is-plain-obj "^1.1.0"
+    kind-of "^6.0.3"
+
 minimist@^1.1.3, minimist@^1.2.3, minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
@@ -13328,6 +13539,16 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
+normalize-package-data@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-3.0.3.tgz#dbcc3e2da59509a0983422884cd172eefdfa525e"
+  integrity sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==
+  dependencies:
+    hosted-git-info "^4.0.1"
+    is-core-module "^2.5.0"
+    semver "^7.3.4"
+    validate-npm-package-license "^3.0.1"
+
 normalize-path@3.0.0, normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -14198,7 +14419,7 @@ picomatch@^2.0.4, picomatch@^2.2.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
   integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
 
-picomatch@^2.2.3, picomatch@^2.3.0:
+picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -14359,6 +14580,11 @@ postcss-loader@^4.2.0:
     schema-utils "^3.0.0"
     semver "^7.3.4"
 
+postcss-media-query-parser@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
+  integrity sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==
+
 postcss-modules-extract-imports@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz#b614c9720be6816eaee35fb3a5faa1dba6a05ddb"
@@ -14459,6 +14685,21 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
+postcss-resolve-nested-selector@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
+  integrity sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==
+
+postcss-safe-parser@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz#bb4c29894171a94bc5c996b9a30317ef402adaa1"
+  integrity sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==
+
+postcss-scss@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.6.tgz#5d62a574b950a6ae12f2aa89b60d63d9e4432bfd"
+  integrity sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==
+
 postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
@@ -14468,7 +14709,7 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-selector-parser@^6.0.4:
+postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.4:
   version "6.0.11"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
   integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
@@ -14481,7 +14722,7 @@ postcss-value-parser@^4.0.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
   integrity sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==
 
-postcss-value-parser@^4.1.0:
+postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -14520,7 +14761,7 @@ postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.2.15:
+postcss@^8.2.15, postcss@^8.4.21:
   version "8.4.21"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
   integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
@@ -14866,6 +15107,11 @@ quick-format-unescaped@^4.0.3:
   resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz#93ef6dd8d3453cbc7970dd614fad4c5954d6b5a7"
   integrity sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==
 
+quick-lru@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
+  integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
+
 quick-lru@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
@@ -16372,6 +16618,15 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
 slide@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
@@ -16929,6 +17184,11 @@ style-loader@^2.0.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+style-search@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
+  integrity sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==
+
 style-to-object@0.3.0, style-to-object@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
@@ -16936,6 +17196,91 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
+stylelint-config-css-modules@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-css-modules/-/stylelint-config-css-modules-4.2.0.tgz#0196347d5c143eff9e2a3e97b1ba980253b6b8bf"
+  integrity sha512-5x7lzPNCc42puQEAFdr7dSzQ00aIg1vCVyV+QPUiSp2oZILpAt8HTgveXaDttazxcwWPBNJrxrLpa556xUP7Bw==
+  optionalDependencies:
+    stylelint-scss "^4.3.0"
+
+stylelint-config-recommended-scss@10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-10.0.0.tgz#06c5c6ad893d2641d7207994de3a5aa2fdcb4078"
+  integrity sha512-+YvPgUHi0W5mCJCKdupBCIsWPYNbWuJcRmFtSYujwNg+41ljFknhO9bpY6C+oahv659zW7W1AT7i6DQvJYYr1A==
+  dependencies:
+    postcss-scss "^4.0.6"
+    stylelint-config-recommended "^11.0.0"
+    stylelint-scss "^4.6.0"
+
+stylelint-config-recommended@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-11.0.0.tgz#b1cb7d71bd92f9b8593f93c2ca6df16ed7d61522"
+  integrity sha512-SoGIHNI748OCZn6BxFYT83ytWoYETCINVHV3LKScVAWQQauWdvmdDqJC5YXWjpBbxg2E761Tg5aUGKLFOVhEkA==
+
+stylelint-scss@^4.3.0, stylelint-scss@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-4.6.0.tgz#f7602d6d562bb256802e38e3fd5e49c46d2e31b6"
+  integrity sha512-M+E0BQim6G4XEkaceEhfVjP/41C9Klg5/tTPTCQVlgw/jm2tvB+OXJGaU0TDP5rnTCB62aX6w+rT+gqJW/uwjA==
+  dependencies:
+    dlv "^1.1.3"
+    postcss-media-query-parser "^0.2.3"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-selector-parser "^6.0.11"
+    postcss-value-parser "^4.2.0"
+
+stylelint-use-logical-spec@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-use-logical-spec/-/stylelint-use-logical-spec-5.0.0.tgz#5903e38ea37cb4277ea4f7d29e9a997772afab5f"
+  integrity sha512-uLF876lrsGVWFPQ8haGhfDfsTyAzPoJq2AAExuSzE2V1uC8uCmuy6S66NseiEwcf0AGqWzS56kPVzF/hVvWIjA==
+
+stylelint@15.4.0:
+  version "15.4.0"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-15.4.0.tgz#3958fff41fbcd68cf947fdecb329762d45f87013"
+  integrity sha512-TlOvpG3MbcFwHmK0q2ykhmpKo7Dq892beJit0NPdpyY9b1tFah/hGhqnAz/bRm2PDhDbJLKvjzkEYYBEz7Dxcg==
+  dependencies:
+    "@csstools/css-parser-algorithms" "^2.1.0"
+    "@csstools/css-tokenizer" "^2.1.0"
+    "@csstools/media-query-list-parser" "^2.0.1"
+    "@csstools/selector-specificity" "^2.2.0"
+    balanced-match "^2.0.0"
+    colord "^2.9.3"
+    cosmiconfig "^8.1.3"
+    css-functions-list "^3.1.0"
+    css-tree "^2.3.1"
+    debug "^4.3.4"
+    fast-glob "^3.2.12"
+    fastest-levenshtein "^1.0.16"
+    file-entry-cache "^6.0.1"
+    global-modules "^2.0.0"
+    globby "^11.1.0"
+    globjoin "^0.1.4"
+    html-tags "^3.2.0"
+    ignore "^5.2.4"
+    import-lazy "^4.0.0"
+    imurmurhash "^0.1.4"
+    is-plain-object "^5.0.0"
+    known-css-properties "^0.27.0"
+    mathml-tag-names "^2.1.3"
+    meow "^9.0.0"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.21"
+    postcss-media-query-parser "^0.2.3"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-safe-parser "^6.0.0"
+    postcss-selector-parser "^6.0.11"
+    postcss-value-parser "^4.2.0"
+    resolve-from "^5.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
+    style-search "^0.1.0"
+    supports-hyperlinks "^3.0.0"
+    svg-tags "^1.0.0"
+    table "^6.8.1"
+    v8-compile-cache "^2.3.0"
+    write-file-atomic "^5.0.0"
+
 sumchecker@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42"
@@ -16990,11 +17335,24 @@ supports-hyperlinks@^1.0.1:
     has-flag "^2.0.0"
     supports-color "^5.0.0"
 
+supports-hyperlinks@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz#c711352a5c89070779b4dad54c05a2f14b15c94b"
+  integrity sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svg-tags@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
+  integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
+
 svgo@3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-3.0.2.tgz#5e99eeea42c68ee0dc46aa16da093838c262fe0a"
@@ -17028,6 +17386,17 @@ tabbable@^5.2.1:
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.2.1.tgz#e3fda7367ddbb172dcda9f871c0fdb36d1c4cd9c"
   integrity sha512-40pEZ2mhjaZzK0BnI+QGNjJO8UYx9pP5v7BGe17SORTO0OEuuaAwQTkAp8whcZvqon44wKFOikD+Al11K3JICQ==
 
+table@^6.8.1:
+  version "6.8.1"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
+  integrity sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==
+  dependencies:
+    ajv "^8.0.1"
+    lodash.truncate "^4.4.2"
+    slice-ansi "^4.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
+
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -17409,6 +17778,11 @@ trim-newlines@^1.0.0:
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
   integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
 
+trim-newlines@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"
+  integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
+
 trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
@@ -17546,6 +17920,11 @@ type-fest@^0.13.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934"
   integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==
 
+type-fest@^0.18.0:
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
+  integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==
+
 type-fest@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
@@ -18025,6 +18404,11 @@ uuid@^8.3.0, uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+v8-compile-cache@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
+  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+
 v8-to-istanbul@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.0.0.tgz#be0dae58719fc53cb97e5c7ac1d7e6d4f5b19511"
@@ -18420,7 +18804,7 @@ which@2.0.2, which@^2.0.1, which@^2.0.2:
   dependencies:
     isexe "^2.0.0"
 
-which@^1.2.9, which@^1.3.0:
+which@^1.2.9, which@^1.3.0, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
@@ -18528,6 +18912,14 @@ write-file-atomic@^3.0.0:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
+write-file-atomic@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-5.0.0.tgz#54303f117e109bf3d540261125c8ea5a7320fab0"
+  integrity sha512-R7NYMnHSlV42K54lwY9lvW6MnSm1HSJqZL3xiSgi9E7//FYaI74r2G0rd+/X6VAMkHEdzxQaU5HUOXWUz5kA/w==
+  dependencies:
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.7"
+
 ws@^8.2.3:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.7.0.tgz#eaf9d874b433aa00c0e0d8752532444875db3957"
@@ -18620,7 +19012,7 @@ yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^20.2.2, yargs-parser@^20.2.9:
+yargs-parser@^20.2.2, yargs-parser@^20.2.3, yargs-parser@^20.2.9:
   version "20.2.9"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==