Various RTL fixes (#12721)

src/components/ha-date-range-picker.ts

@@ -140,6 +140,9 @@ export class HaDateRangePicker extends LitElement {
     return css`
       ha-svg-icon {
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
+        direction: var(--direction);
       }
 
       .date-range-inputs {
@@ -166,6 +169,9 @@ export class HaDateRangePicker extends LitElement {
 
       ha-textfield:last-child {
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
+        direction: var(--direction);
       }
 
       @media only screen and (max-width: 800px) {

src/components/ha-expansion-panel.ts

@@ -133,6 +133,9 @@ class HaExpansionPanel extends LitElement {
       .summary-icon {
         transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
         margin-left: auto;
+        margin-inline-start: auto;
+        margin-inline-end: initial;
+        direction: var(--direction);
       }
 
       .summary-icon.expanded {

src/panels/calendar/ha-full-calendar.ts

@@ -336,6 +336,9 @@ export class HAFullCalendar extends LitElement {
 
         .today {
           margin-right: 20px;
+          margin-inline-end: 20px;
+          margin-inline-start: initial;
+          direction: var(--direction);
         }
 
         .prev,

src/panels/calendar/ha-panel-calendar.ts

@@ -194,10 +194,13 @@ class PanelCalendar extends LitElement {
 
         .calendar-list {
           padding-right: 16px;
+          padding-inline-end: 16px;
+          padding-inline-start: initial;
           min-width: 170px;
           flex: 0 0 15%;
           overflow: hidden;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
+          direction: var(--direction);
         }
 
         .calendar-list > div {

src/panels/developer-tools/template/developer-tools-template.ts

@@ -248,7 +248,6 @@ class HaPanelDevTemplate extends LitElement {
 
         .content {
           padding: 16px;
-          direction: ltr;
         }
 
         .edit-pane {
@@ -280,6 +279,7 @@ class HaPanelDevTemplate extends LitElement {
           white-space: pre-wrap;
           background-color: var(--secondary-background-color);
           padding: 8px;
+          direction: ltr;
         }
 
         .all_listeners {

src/panels/history/ha-panel-history.ts

@@ -259,11 +259,17 @@ class HaPanelHistory extends LitElement {
 
         ha-date-range-picker {
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
           max-width: 100%;
+          direction: var(--direction);
         }
 
         :host([narrow]) ha-date-range-picker {
           margin-right: 0;
+          margin-inline-end: 0;
+          margin-inline-start: initial;
+          direction: var(--direction);
         }
 
         ha-circular-progress {

src/panels/logbook/ha-panel-logbook.ts

@@ -252,11 +252,17 @@ export class HaPanelLogbook extends LitElement {
 
         ha-date-range-picker {
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
           max-width: 100%;
+          direction: var(--direction);
         }
 
         :host([narrow]) ha-date-range-picker {
           margin-right: 0;
+          margin-inline-end: 0;
+          margin-inline-start: initial;
+          direction: var(--direction);
         }
 
         .filters {

src/panels/media-browser/ha-bar-media-player.ts

@@ -595,6 +595,7 @@ export class BarMediaPlayer extends LitElement {
         align-items: center;
         justify-content: center;
         flex-direction: column;
+        direction: ltr;
       }
 
       .progress {