From b295bbd706fef5056411b214c7b549059133f0ad Mon Sep 17 00:00:00 2001
From: Yosi Levy <37745463+yosilevy@users.noreply.github.com>
Date: Tue, 10 May 2022 17:57:18 +0300
Subject: [PATCH] RTL settings clickable list item fix (#12595)

---
 src/components/ha-clickable-list-item.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/ha-clickable-list-item.ts b/src/components/ha-clickable-list-item.ts
index 793b9d1795..032a2be2ed 100644
--- a/src/components/ha-clickable-list-item.ts
+++ b/src/components/ha-clickable-list-item.ts
@@ -47,10 +47,6 @@ export class HaClickableListItem extends ListItemBase {
           padding-left: 0px;
           padding-right: 0px;
         }
-        :host([rtl]) span {
-          margin-left: var(--mdc-list-item-graphic-margin, 20px) !important;
-          margin-right: 0px !important;
-        }
         :host([graphic="avatar"]:not([twoLine])),
         :host([graphic="icon"]:not([twoLine])) {
           height: 48px;
@@ -64,6 +60,16 @@ export class HaClickableListItem extends ListItemBase {
           padding-right: var(--mdc-list-side-padding, 20px);
           overflow: hidden;
         }
+        :host-context([style*="direction: rtl;"])
+          span.material-icons:first-of-type {
+          margin-left: var(--mdc-list-item-graphic-margin, 16px) !important;
+          margin-right: 0px !important;
+        }
+        :host-context([style*="direction: rtl;"])
+          span.material-icons:last-of-type {
+          margin-left: 0px !important;
+          margin-right: auto !important;
+        }
       `,
     ];
   }