diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts
index 563ee32e32..8d73e8bda4 100644
--- a/src/components/ha-fab.ts
+++ b/src/components/ha-fab.ts
@@ -11,11 +11,9 @@ export class HaFab extends Fab {
 
   static override styles = Fab.styles.concat([
     css`
-      :host-context([style*="direction: rtl;"])
-        .mdc-fab--extended
-        .mdc-fab__icon {
-        margin-left: 12px !important;
-        margin-right: calc(12px - 20px) !important;
+      .mdc-fab--extended .mdc-fab__icon {
+        margin-left: var(--rtl-12px, calc(12px - 20px)) !important;
+        margin-right: var(--rtl--8px, 12px) !important;
       }
     `,
   ]);
diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts
index 2a7f91fba2..f3458df109 100644
--- a/src/panels/config/logs/error-log-card.ts
+++ b/src/panels/config/logs/error-log-card.ts
@@ -235,8 +235,8 @@ class ErrorLogCard extends LitElement {
       color: var(--warning-color);
     }
 
-    :host-context([style*="direction: rtl;"]) mwc-button {
-      direction: rtl;
+    mwc-button {
+      direction: var(--rtl-dir, ltr);
     }
   `;
 }
diff --git a/src/state/translations-mixin.ts b/src/state/translations-mixin.ts
index 5a118b67cc..37f7d9893d 100644
--- a/src/state/translations-mixin.ts
+++ b/src/state/translations-mixin.ts
@@ -180,12 +180,29 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
 
     private _applyTranslations(hass: HomeAssistant) {
       document.querySelector("html")!.setAttribute("lang", hass.language);
-      this.style.direction = computeRTL(hass) ? "rtl" : "ltr";
+      this._applyDirection(hass);
       this._loadCoreTranslations(hass.language);
       this.__loadedFragmetTranslations = new Set();
       this._loadFragmentTranslations(hass.language, hass.panelUrl);
     }
 
+    private _applyDirection(hass: HomeAssistant) {
+      if (computeRTL(hass)) {
+        this.style.direction = "rtl";
+        // apply custom properties used to fix RTL appearance throughout the system
+        this.style.setProperty("--rtl-12px", "12px");
+        this.style.setProperty("--rtl--8px", "-8px");
+        this.style.setProperty("--rtl-dir", "rtl");
+      } else {
+        // clear all custom properties (can't use "all" for this)
+        for (let i = this.style.length; i--; ) {
+          this.style.removeProperty(this.style[i]);
+        }
+
+        this.style.direction = "ltr";
+      }
+    }
+
     /**
      * Load translations from the backend
      * @param language language to fetch