Replaced all inline entries with attribute bases selectors

src/assets/css/dashboard.scss

@@ -117,8 +117,15 @@ div[data-role=controlgroup] a[data-role=button]:last-child {
 }
 
 div[data-role=controlgroup] a[data-role=button] + a[data-role=button] {
-    border-left-width: 0 !important;
+    [dir="ltr"] & {
-    margin: 0 0 0 -0.4em !important;
+        border-left-width: 0 !important;
+        margin: 0 0 0 -0.4em !important;
+    }
+
+    [dir="rtl"] & {
+        border-right-width: 0 !important;
+        margin: 0 -0.4em 0 0 !important;
+    }
 }
 
 div[data-role=controlgroup] a.ui-btn-active {

src/assets/css/librarybrowser.scss

@@ -170,11 +170,17 @@
 
 .pageTitle {
     display: inline-flex;
-    margin-block: 0;
-    margin-inline: 0.5em 0;
     height: 1.7em;
     align-items: center;
     flex-shrink: 1;
+
+    [dir="ltr"] & {
+        margin: 0 0 0 0.5em;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 0.5em 0 0;
+    }
 }
 
 .pageTitleWithDefaultLogo {
@@ -246,17 +252,30 @@
     align-items: center;
     text-decoration: none;
     color: inherit;
-    padding-block: 0.9em !important;
-    padding-inline: 2.4em 0 !important;
     flex-grow: 1;
     font-weight: 400 !important;
     margin: 0 !important;
     border-radius: 0 !important;
+
+    [dir="ltr"] & {
+        padding: 0.9em 0 0.9em 2.4em !important;
+    }
+
+    [dir="rtl"] & {
+        padding: 0.9em 2.4em 0.9em 0 !important;
+    }
 }
 
 .navMenuOptionIcon {
-    margin-inline-end: 1.2em;
     flex-shrink: 0;
+
+    [dir="ltr"] & {
+        margin-right: 1.2em;
+    }
+
+    [dir="rtl"] & {
+        margin-left: 1.2em;
+    }
 }
 
 .navMenuOptionText {
@@ -265,9 +284,15 @@
 }
 
 .sidebarHeader {
-    padding-inline-start: 1.2em;
+    margin: 1em 0 0.5em;
-    margin-block: 1em 0.5em;
+
-    margin-inline: 0;
+    [dir="ltr"] & {
+        padding-left: 1.2em;
+    }
+
+    [dir="rtl"] & {
+        padding-right: 1.2em;
+    }
 }
 
 .dashboardDocument .skinBody {
@@ -309,8 +334,11 @@
         width: 20.205em !important;
         font-size: 94%;
 
+        [dir="ltr"] & {
+            left: 0 !important;
+        }
+
         [dir="rtl"] & {
-            left: unset !important;
             right: 0 !important;
         }
     }
@@ -320,11 +348,12 @@
     }
 
     .dashboardDocument .skinBody {
-        left: 20em;
+        [dir="ltr"] & {
+            left: 20em;
+        }
 
         [dir="rtl"] & {
-            left: 0 !important;
+            right: 20em;
-            right: 20em !important;
         }
     }
 }
@@ -391,7 +420,14 @@
 
 .headerArrowImage {
     height: 20px;
-    margin-inline-start: 0.5em;
+
+    [dir="ltr"] & {
+        margin-left: 0.5em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0.5em;
+    }
 }
 
 .backdropContainer {
@@ -421,15 +457,28 @@
 }
 
 .viewControls + .listTopPaging {
-    margin-inline-start: 0.5em !important;
+    [dir="ltr"] & {
+        margin-left: 0.5em !important;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0.5em !important;
+    }
 }
 
 .criticReview {
     margin: 1.5em 0;
     background: #222;
-    padding: 0.8em 0.8em 0.8em 3em;
     border-radius: 0.3em;
     position: relative;
+
+    [dir="ltr"] & {
+        padding: 0.8em 0.8em 0.8em 3em;
+    }
+
+    [dir="rtl"] & {
+        padding: 0.8em 3em 0.8em 0.8em;
+    }
 }
 
 .detailLogo {
@@ -482,12 +531,25 @@
 }
 
 .reviewDate {
-    margin-inline-start: 1em;
+    [dir="ltr"] & {
+        margin-left: 1em;
+
+    }
+
+    [dir="rtl"] & {
+        margin-right: 1em;
+    }
 }
 
 .reviewScore {
     position: absolute;
-    inset-inline-start: 0.8em;
+    [dir="ltr"] & {
+        left: 0.8em;
+    }
+
+    [dir="rtl"] & {
+        right: 0.8em;
+    }
 }
 
 .itemBackdrop {
@@ -524,7 +586,6 @@
 .detailPageContent {
     display: flex;
     flex-direction: column;
-    padding-inline: 32.45vw 2%;
 
     .layout-mobile & {
         padding-left: 5%;
@@ -534,19 +595,25 @@
     .layout-desktop &,
     .layout-tv & {
         .emby-scroller {
-            margin-left: 0;
+            [dir="ltr"] & {
-        }
+                margin-left: 0;
-    }
+            }
 
-    [dir="rtl"] & {
+            [dir="rtl"] & {
-        .layout-desktop &,
-        .layout-tv & {
-            .emby-scroller {
-                margin-left: unset;
                 margin-right: 0;
             }
         }
     }
+
+    [dir="ltr"] & {
+        padding-left: 32.45vw;
+        padding-right: 2%;
+    }
+
+    [dir="rtl"] & {
+        padding-right: 32.45vw;
+        padding-left: 2%;
+    }
 }
 
 .detailSectionContent a {
@@ -673,7 +740,6 @@
 .layout-mobile .mainDetailButtons {
     margin-top: 1em;
     margin-bottom: 0.5em;
-    margin-inline-start: 0;
 
     @include header-poster-padding;
 
@@ -683,7 +749,12 @@
         padding-left: 0;
     }
 
+    [dir="ltr"] & {
+        margin-left: 0;
+    }
+
     [dir="rtl"] & {
+        margin-right: 0;
         padding-left: unset !important;
 
         @include header-poster-padding-rtl;
@@ -716,24 +787,28 @@
     .layout-mobile & {
         display: block;
         position: relative;
-        padding: 0.5rem 5% !important;
+        padding: 0.5rem 5%;
     }
 
     .layout-desktop & {
         position: relative;
-        padding-left: 32.45vw !important;
     }
 
     .layout-tv & {
         display: block;
-        padding-left: 32.45vw !important;
+    }
+
+    [dir="ltr"] & {
+        .layout-desktop &,
+        .layout-tv & {
+            padding-left: 32.45vw;
+        }
     }
 
     [dir="rtl"] & {
         .layout-desktop &,
         .layout-tv & {
-            padding-right: 32.45vw !important;
+            padding-right: 32.45vw;
-            padding-left: unset !important;
         }
     }
 }
@@ -769,9 +844,16 @@
 }
 
 .infoText {
-    text-align: start;
     min-width: 0;
     max-width: 100%;
+
+    [dir="ltr"] & {
+        text-align: left;
+    }
+
+    [dir="rtl"] & {
+        text-align: right;
+    }
 }
 
 .detailPageSecondaryContainer {
@@ -972,8 +1054,17 @@ div.itemDetailGalleryLink.defaultCardBackground {
 }
 
 .recordingFields button {
-    margin-inline: 0 0.5em;
     flex-shrink: 0;
+
+    [dir="ltr"] & {
+        margin-left: 0;
+        margin-right: 0.5em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0;
+        margin-left: 0.5em;
+    }
 }
 
 .mainDetailButtons.hide + .recordingFields {
@@ -1116,8 +1207,15 @@ div.itemDetailGalleryLink.defaultCardBackground {
 }
 
 .mediaInfoLabel {
-    margin-inline-end: 1em;
     font-weight: 600;
+
+    [dir="ltr"] & {
+        margin-right: 1em;
+    }
+
+    [dir="rtl"] & {
+        margin-left: 1em;
+    }
 }
 
 .recordingProgressBar::-moz-progress-bar {
@@ -1207,19 +1305,39 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 }
 
 .sectionTitleButton {
-    margin-inline-start: 1.5em !important;
     flex-shrink: 0;
+
+    [dir="ltr"] & {
+        margin-left: 1.5em !important;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 1.5em !important;
+    }
 }
 
 .sectionTitleButton + .sectionTitleButton {
-    margin-inline-start: 0.5em !important;
+    [dir="ltr"] & {
+        margin-left: 0.5em !important;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0.5em !important;
+    }
 }
 
 .sectionTitleIconButton {
-    margin-inline-start: 1.5em !important;
     flex-shrink: 0;
     font-size: 84% !important;
     padding: 0.5em !important;
+
+    [dir="ltr"] & {
+        margin-left: 1.5em !important;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 1.5em !important;
+    }
 }
 
 .horizontalItemsContainer {
@@ -1248,11 +1366,23 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 }
 
 .padded-left {
-    padding-inline-start: 3.3%;
+    [dir="ltr"] & {
+        padding-left: 3.3%;
+    }
+
+    [dir="rtl"] & {
+        padding-right: 3.3%;
+    }
 }
 
 .padded-right {
-    padding-inline-end: 3.3%;
+    [dir="ltr"] & {
+        padding-right: 3.3%;
+    }
+
+    [dir="rtl"] & {
+        padding-left: 3.3%;
+    }
 }
 
 .padded-top {

src/assets/css/metadataeditor.scss

@@ -7,7 +7,13 @@
 }
 
 .libraryTree {
-    margin-inline-start: 0.25em;
+    [dir="ltr"] & {
+        margin-left: 0.25em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0.25em;
+    }
 }
 
 .offlineEditorNode {
@@ -54,22 +60,30 @@
 @media all and (min-width: 50em) {
     .editPageSidebar {
         position: fixed;
-        inset-block: 5.2em 0;
+        top: 5.2em;
-        inset-inline-start: 0;
+        bottom: 0;
         width: 30%;
-        border-inline-end: 1px solid #555;
         display: block;
+
+        [dir="ltr"] & {
+            left: 0;
+            border-right: 1px solid #555;
+        }
+
+        [dir="rtl"] & {
+            right: 0;
+            border-left: 1px solid #555;
+        }
     }
 
     .editPageInnerContent {
-        float: right;
         width: 68.5%;
-    }
-}
 
-[dir="rtl"] {
+        [dir="ltr"] & {
-    @media all and (min-width: 50em) {
+            float: right;
-        .editPageInnerContent {
+        }
+
+        [dir="rtl"] & {
             float: left;
         }
     }

src/components/actionSheet/actionSheet.scss

@@ -45,7 +45,14 @@
 }
 
 .actionsheetListItemBody {
-    padding: 0.4em 1em 0.4em 0.6em !important;
+    [dir="ltr"] & {
+        padding: 0.4em 1em 0.4em 0.6em !important;
+
+    }
+
+    [dir="rtl"] & {
+        padding: 0.4em 0.6em 0.4em 1em !important;
+    }
 }
 
 .actionSheetItemText {
@@ -64,7 +71,16 @@
     display: flex;
     justify-content: flex-end;
     flex-shrink: 0;
-    margin-inline: 5em 0.5em;
+
+    [dir="ltr"] & {
+        margin-left: 5em;
+        margin-right: 0.5em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 5em;
+        margin-left: 0.5em;
+    }
 }
 
 .actionSheetScroller {
@@ -100,9 +116,15 @@
 }
 
 .actionsheetMenuItemIcon {
-    margin-block: 0 !important;
-    margin-inline: 0.45em 0.85em !important;
     padding: 0 !important;
+
+    [dir="ltr"] & {
+        margin: 0 0.85em 0 0.45em !important;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 0.45em 0 0.85em !important;
+    }
 }
 
 .actionsheet-xlargeFont {
@@ -112,5 +134,12 @@
 .btnCloseActionSheet {
     position: fixed;
     top: 0.75em;
-    inset-inline-start: 0.5em;
+
+    [dir="ltr"] & {
+        left: 0.5em;
+    }
+
+    [dir="rtl"] & {
+        right: 0.5em;
+    }
 }

src/components/alphaPicker/style.scss

@@ -107,19 +107,22 @@
 }
 
 .alphaPicker-fixed-right {
-    inset-inline-end: 0.4em;
+    [dir="ltr"] & {
+        right: 0.4em;
+    }
+
+    [dir="rtl"] & {
+        left: 0.4em;
+    }
 }
 
 @media all and (min-width: 62.5em) {
     .alphaPicker-fixed-right {
-        right: 1em;
+        [dir="ltr"] & {
-    }
+            right: 1em;
-}
+        }
 
-[dir="rtl"] {
+        [dir="rtl"] & {
-    @media all and (min-width: 62.5em) {
-        .alphaPicker-fixed-right {
-            right: unset;
             left: 1em;
         }
     }

src/components/cardbuilder/card.scss

@@ -302,7 +302,14 @@ button::-moz-focus-inner {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    text-align: start;
+    [dir="ltr"] & {
+        text-align: left;
+
+    }
+
+    [dir="rtl"] & {
+        text-align: right;
+    }
 }
 
 .dialog .cardText {
@@ -396,21 +403,35 @@ button::-moz-focus-inner {
 }
 
 .cardIndicators {
-    inset-inline-end: 0.225em;
     top: 0.225em;
     position: absolute;
     display: flex;
     align-items: center;
     contain: layout style;
+
+    [dir="ltr"] & {
+        right: 0.225em;
+    }
+
+    [dir="rtl"] & {
+        left: 0.225em;
+    }
 }
 
 .cardProgramAttributeIndicators {
     top: 0;
-    inset-inline-start: 0;
     position: absolute;
     display: flex;
     text-transform: uppercase;
     font-size: 92%;
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .programAttributeIndicator {
@@ -430,7 +451,15 @@ button::-moz-focus-inner {
 .cardOverlayButton-br {
     position: absolute;
     bottom: 0;
-    inset-inline-end: 0;
+
+    [dir="ltr"] & {
+        right: 0;
+
+    }
+
+    [dir="rtl"] & {
+        left: 0;
+    }
 }
 
 .cardOverlayButtonIcon {

src/components/dialog/dialog.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader formDialogHeader-clear justify-content-center">
-    <h1 class="formDialogHeaderTitle" style="margin-inline-start:0;margin-top: .5em;padding: 0 1em;"></h1>
+    <h1 class="formDialogHeaderTitle" style="margin-top: .5em;padding: 0 1em;"></h1>
 </div>
 
 <div class="formDialogContent smoothScrollY">

src/components/formdialog.scss

@@ -12,15 +12,27 @@
 }
 
 .formDialogHeaderTitle {
-    margin-inline-start: 0.25em;
-
     /* In case of h1, h2, h3 */
     margin-top: 0;
     margin-bottom: 0;
+
+    [dir="ltr"] & {
+        margin-left: 0.25em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0.25em;
+    }
 }
 
 .formDialogHeaderTitle:first-child {
-    margin-inline-start: 1em;
+    [dir="ltr"] & {
+        margin-left: 1em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 1em;
+    }
 }
 
 .formDialogContent:not(.no-grow) {
@@ -98,7 +110,17 @@
 .formDialogFooterItem-autosize {
     flex-basis: initial;
     flex-grow: initial;
-    padding-inline: 2em;
+
+    [dir="ltr"] & {
+
+        padding-left: 2em;
+        padding-right: 2em;
+    }
+
+    [dir="rtl"] & {
+        padding-right: 2em;
+        padding-left: 2em;
+    }
 }
 
 @media all and (min-width: 50em) {
@@ -107,7 +129,15 @@
     }
 
     .dialogContentInner {
-        padding-inline: 1.5em;
+        [dir="ltr"] & {
+            padding-left: 1.5em;
+            padding-right: 1.5em;
+        }
+
+        [dir="rtl"] & {
+            padding-right: 1.5em;
+            padding-left: 1.5em;
+        }
     }
 }
 
@@ -117,6 +147,14 @@
     }
 
     .dialogContentInner {
-        padding-inline: 2em;
+        [dir="ltr"] & {
+            padding-left: 2em;
+            padding-right: 2em;
+        }
+
+        [dir="rtl"] & {
+            padding-right: 2em;
+            padding-left: 2em;
+        }
     }
 }

src/components/guide/guide.scss

@@ -307,13 +307,20 @@
 }
 
 .programIcon {
-    margin-inline-start: 0.5em;
     height: 1em;
     width: 1em;
     font-size: 1.6em;
     color: #ddd;
     flex-shrink: 0;
     flex-grow: 0;
+
+    [dir="ltr"] & {
+        margin-left: 0.5em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0.5em;
+    }
 }
 
 .guide-programTextIcon {
@@ -340,11 +347,19 @@
 }
 
 .guideChannelName {
-    margin-inline-start: auto;
-    margin-inline-end: 1em;
     text-overflow: ellipsis;
     overflow: hidden;
     max-width: 70%;
+
+    [dir="ltr"] & {
+        margin-left: auto;
+        margin-right: 1em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: auto;
+        margin-left: 1em;
+    }
 }
 
 .guideChannelImage {

src/components/imageUploader/imageUploader.template.html

@@ -13,7 +13,7 @@
             <div class="flex align-items-center" style="margin:1.5em 0;">
                 <h2 style="margin:0;">${HeaderAddUpdateImage}</h2>
 
-                <button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-inline-start:1.5em;">
+                <button is="emby-button" type="button" class="raised raised-mini btnBrowse">
                     <span class="material-icons folder" aria-hidden="true"></span>
                     <span>${Browse}</span>
                 </button>

src/components/imageUploader/style.scss

@@ -10,3 +10,7 @@
     align-items: center;
     justify-content: center;
 }
+
+.raised.raised-mini.btnBrowse {
+    margin-left:1.5em;
+}

src/components/imageeditor/imageeditor.scss

@@ -7,3 +7,23 @@
 .first-imageEditor-buttons {
     margin-top: 2em;
 }
+
+.btnBrowseAllImages {
+    [dir="ltr"] & {
+        margin-left: 1em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 1em
+    }
+}
+
+.btnOpenUploadMenu {
+    [dir="ltr"] & {
+        margin-left: .5em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: .5em;
+    }
+}

src/components/imageeditor/imageeditor.template.html

@@ -11,10 +11,10 @@
         <div id="imagesContainer">
             <div class="imageEditor-buttons first-imageEditor-buttons">
                 <h2 style="margin:0;">${Images}</h2>
-                <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-inline-start: 1em;">
+                <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize">
                     <span class="material-icons search" aria-hidden="true"></span>
                 </button>
-                <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-inline-start: .5em;">
+                <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
             </div>
@@ -26,10 +26,10 @@
         <div id="backdropsContainer" class="hide">
             <div class="imageEditor-buttons">
                 <h2 style="margin:0;">${Backdrops}</h2>
-                <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-inline-start: 1em;" data-imagetype="Backdrop">
+                <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" data-imagetype="Backdrop">
                     <span class="material-icons search" aria-hidden="true"></span>
                 </button>
-                <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-inline-start: .5em;" data-imagetype="Backdrop">
+                <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" data-imagetype="Backdrop">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
             </div>

src/components/indicators/indicators.scss

@@ -7,8 +7,16 @@
 
 .itemProgressBarForeground {
     position: absolute;
-    inset-block: 0;
+    top: 0;
-    inset-inline-start: 0;
+    bottom: 0;
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .indicator {
@@ -31,7 +39,13 @@
 }
 
 .indicator + .indicator {
-    margin-inline-start: 0.25em;
+    [dir="ltr"] & {
+        margin-left: 0.25em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0.25em;
+    }
 }
 
 .indicatorIcon {

src/components/libraryoptionseditor/libraryoptionseditor.js

@@ -11,6 +11,7 @@ import dom from '../../scripts/dom';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-input/emby-input';
+import './style.scss';
 import template from './libraryoptionseditor.template.html';
 
     function populateLanguages(parent) {
@@ -231,7 +232,7 @@ import template from './libraryoptionseditor.template.html';
         html += '<h3 class="checkboxListLabel" style="margin:0;">' + globalize.translate('HeaderTypeImageFetchers', globalize.translate('TypeOptionPlural' + availableTypeOptions.Type)) + '</h3>';
         const supportedImageTypes = availableTypeOptions.SupportedImageTypes || [];
         if (supportedImageTypes.length > 1 || supportedImageTypes.length === 1 && supportedImageTypes[0] !== 'Primary') {
-            html += '<button is="emby-button" class="raised btnImageOptionsForType" type="button" style="margin-inline-start:1.5em;font-size:90%;"><span>' + globalize.translate('HeaderFetcherSettings') + '</span></button>';
+            html += '<button is="emby-button" class="raised btnImageOptionsForType" type="button" style="font-size:90%;"><span>' + globalize.translate('HeaderFetcherSettings') + '</span></button>';
         }
         html += '</div>';
         html += '<div class="checkboxList paperList checkboxList-paperList">';

src/components/libraryoptionseditor/style.scss

@@ -0,0 +1,9 @@
+.raised.btnImageOptionsForType {
+    [dir="ltr"] & {
+        margin-left:1.5em;
+    }
+
+    [dir="rtl"] & {
+        margin-right:1.5em;
+    }
+}

src/components/listview/listview.scss

@@ -9,10 +9,18 @@
     margin: 0;
     display: block;
     align-items: center;
-    text-align: start;
-    padding: 0.25em 0.25em 0.25em 0.5em;
     cursor: pointer;
     overflow: hidden;
+
+    [dir="ltr"] & {
+        text-align: left;
+        padding: 0.25em 0.25em 0.25em 0.5em;
+    }
+
+    [dir="rtl"] & {
+        text-align: right;
+        padding: 0.25em 0.5em 0.25em 0.25em;
+    }
 }
 
 .listItem-withContentWrapper {
@@ -211,7 +219,14 @@
     width: 1em !important;
     height: 1em !important;
     font-size: 143%;
-    margin: 0 0.25em 0 0;
+
+    [dir="ltr"] & {
+        margin: 0 0.25em 0 0;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 0 0 0.25em;
+    }
 }
 
 .listItemIcon:not(.listItemIcon-transparent) {
@@ -219,7 +234,14 @@
     color: #fff;
     padding: 0.5em;
     border-radius: 100em;
-    margin: 0 0.2em 0 0.4em;
+
+    [dir="ltr"] & {
+        margin: 0 0.2em 0 0.4em;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 0.4em 0 0.2em;
+    }
 }
 
 .listItemProgressBar {

src/components/mediaLibraryCreator/mediaLibraryCreator.js

@@ -20,6 +20,7 @@ import '../../elements/emby-toggle/emby-toggle';
 import '../listview/listview.scss';
 import '../formdialog.scss';
 import '../../assets/css/flexstyles.scss';
+import './style.scss';
 import toast from '../toast/toast';
 import alert from '../alert';
 import template from './mediaLibraryCreator.template.html';

src/components/mediaLibraryCreator/mediaLibraryCreator.template.html

@@ -19,7 +19,7 @@
         <div class="folders">
             <div style="display: flex; align-items: center;">
                 <h1 style="margin: .5em 0;">${Folders}</h1>
-                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-inline-start:1em;" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddFolder submit" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
             </div>

src/components/mediaLibraryCreator/style.scss

@@ -0,0 +1,19 @@
+.fab.btnAddFolder.submit {
+    [dir="ltr"] & {
+        margin-left: 1em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 1em;
+    }
+}
+
+.listItem.listItem-border.lnkPath {
+    [dir="ltr"] & {
+        padding-left:.5em;
+    }
+
+    [dir="rtl"] & {
+        padding-right:.5em;
+    }
+}

src/components/mediaLibraryEditor/mediaLibraryEditor.js

@@ -18,6 +18,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../formdialog.scss';
 import '../../elements/emby-toggle/emby-toggle';
 import '../../assets/css/flexstyles.scss';
+import './style.scss';
 import toast from '../toast/toast';
 import confirm from '../confirm/confirm';
 import template from './mediaLibraryEditor.template.html';

src/components/mediaLibraryEditor/mediaLibraryEditor.template.html

@@ -12,7 +12,7 @@
         <div class="folders hide">
             <div style="display: flex; align-items: center;">
                 <h1 style="margin: .5em 0;">${Folders}</h1>
-                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-inline-start:1em;" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddFolder submit" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
             </div>

src/components/mediaLibraryEditor/style.scss

@@ -0,0 +1,19 @@
+.fab.btnAddFolder.submit {
+    [dir="ltr"] & {
+        margin-left: 1em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 1em;
+    }
+}
+
+.listItem.listItem-border.lnkPath {
+    [dir="ltr"] & {
+        padding-left:.5em;
+    }
+
+    [dir="rtl"] & {
+        padding-right:.5em;
+    }
+}

src/components/mediainfo/mediainfo.scss

@@ -1,7 +1,13 @@
 .mediaInfoItem {
-    margin-block: 0;
-    margin-inline: 0 1em;
     padding: 0;
+
+    [dir="ltr"] & {
+        margin: 0 1em 0 0;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 0 0 1em;
+    }
 }
 
 .mediaInfoText {
@@ -26,7 +32,13 @@
 }
 
 .mediaInfoItem:last-child {
-    margin-inline-end: 0;
+    [dir="ltr"] & {
+        margin-right: 0;
+    }
+
+    [dir="rtl"] & {
+        margin-left: 0;
+    }
 }
 
 .starRatingContainer {
@@ -47,7 +59,6 @@
 }
 
 .mediaInfoCriticRating {
-    padding-inline-start: 1.5em;
     background-position: left center;
     background-repeat: no-repeat;
     background-size: auto 1.2em;
@@ -55,7 +66,12 @@
     display: flex;
     align-items: center;
 
+    [dir="ltr"] & {
+        padding-left: 1.5em;
+    }
+
     [dir="rtl"] & {
+        padding-right: 1.5em;
         background-position: right center;
     }
 }

src/components/multiSelect/multiSelect.js

@@ -130,7 +130,7 @@ import datetime from '../../scripts/datetime';
             html += '<h1 class="itemSelectionCount"></h1>';
 
             const moreIcon = 'more_vert';
-            html += `<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-inline-start:auto;"><span class="material-icons ${moreIcon}" aria-hidden="true"></span></button>`;
+            html += `<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize"><span class="material-icons ${moreIcon}" aria-hidden="true"></span></button>`;
 
             selectionCommandsPanel.innerHTML = html;
 

src/components/multiSelect/multiSelect.scss

@@ -34,3 +34,7 @@
 .withMultiSelect {
     position: relative;
 }
+
+.btnSelectionPanelOptions {
+    margin-left:auto;
+}

src/components/nowPlayingBar/nowPlayingBar.scss

@@ -54,10 +54,20 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     vertical-align: middle;
-    text-align: start;
     flex-grow: 1;
     font-size: 92%;
-    margin-inline: 0.5em 1em;
+
+    [dir="ltr"] & {
+        text-align: left;
+        margin-right: 1em;
+        margin-left: 0.5em;
+    }
+
+    [dir="rtl"] & {
+        text-align: right;
+        margin-left: 1em;
+        margin-right: 0.5em;
+    }
 }
 
 .nowPlayingBarCenter {
@@ -91,8 +101,6 @@
 
 .nowPlayingBarRight {
     position: relative;
-    margin-block: 0;
-    margin-inline: auto 0.5em;
 
     /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
     z-index: 2;
@@ -100,6 +108,14 @@
     justify-content: flex-end;
     align-items: center;
     flex-shrink: 0;
+
+    [dir="ltr"] & {
+        margin: 0 0.5em 0 auto;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 auto 0 0.5em;
+    }
 }
 
 .nowPlayingBarCurrentTime {
@@ -110,7 +126,13 @@
 }
 
 .nowPlayingBarVolumeSliderContainer {
-    margin-inline-end: 2em;
+    [dir="ltr"] & {
+        margin-right: 2em;
+    }
+
+    [dir="rtl"] & {
+        margin-left: 2em;
+    }
 }
 
 .nowPlayingBarUserDataButtons {

src/components/playerstats/playerstats.scss

@@ -2,9 +2,16 @@
     background: rgba(28, 28, 28, 0.8);
     border-radius: 0.3em;
     color: #fff;
-    inset-inline-start: 1.5em;
     position: absolute;
     top: 5em;
+
+    [dir="ltr"] & {
+        left: 1.5em;
+    }
+
+    [dir="rtl"] & {
+        right: 1.5em;
+    }
 }
 
 .playerStats-tv {
@@ -31,26 +38,51 @@
 .playerStats-stats {
     display: flex;
     flex-direction: column;
-    padding-block: 0 1em;
-    padding-inline: 1em 3em;
     max-width: 50em;
     overflow: hidden;
+
+    [dir="ltr"] & {
+        padding: 0 3em 1em 1em;
+    }
+
+    [dir="rtl"] & {
+        padding: 0 1em 1em 3em;
+    }
 }
 
 .playerStats-stat {
     display: flex;
-    margin-inline-start: 1em;
+
+    [dir="ltr"] & {
+        margin-left: 1em;
+
+    }
+
+    [dir="rtl"] & {
+        margin-right: 1em;
+    }
 }
 
 .playerStats-stat-label {
     font-weight: 500;
-    margin-block: 0;
+
-    margin-inline: 0 0.5em;
+    [dir="ltr"] & {
+        margin: 0 0.5em 0 0;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 0 0 0.5em;
+    }
 }
 
 .playerStats-stat-header {
-    margin-block: 1em 0;
+    [dir="ltr"] & {
-    margin-inline: 0 1em;
+        margin: 1em 1em 0 0;
+    }
+
+    [dir="rtl"] & {
+        margin: 1em 0 0 1em;
+    }
 }
 
 .playerStats-stat-value {

src/components/recordingcreator/recordingfields.scss

@@ -1,6 +1,13 @@
 .recordingButton {
-    margin-inline-start: 0;
     min-width: 10em;
+
+    [dir="ltr"] & {
+        margin-left: 0;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0;
+    }
 }
 
 .recordingIcon-active {

src/components/remotecontrol/remotecontrol.scss

@@ -39,7 +39,13 @@
 }
 
 .nowPlayingPageTitle {
-    margin: 0 0 0.5em 0.5em;
+    [dir="ltr"] & {
+        margin: 0 0 0.5em 0.5em;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 0.5em 0.5em 0;
+    }
 }
 
 .nowPlayingAlbum a,
@@ -98,10 +104,17 @@
 
 .nowPlayingPageImageContainer {
     width: 16%;
-    margin-inline-end: 1em;
     position: relative;
     -webkit-flex-shrink: 0;
     flex-shrink: 0;
+
+    [dir="ltr"] & {
+        margin-right: 1em;
+    }
+
+    [dir="rtl"] & {
+        margin-left: 1em;
+    }
 }
 
 .nowPlayingPageImageContainerNoAlbum {
@@ -269,7 +282,13 @@
 
 @media all and (min-width: 80em) {
     .nowPlayingPageImageContainer {
-        margin-inline-end: 0.75em;
+        [dir="ltr"] & {
+            margin-right: 0.75em;
+        }
+
+        [dir="rtl"] & {
+            margin-left: 0.75em;
+        }
     }
 }
 
@@ -366,24 +385,49 @@
 
     .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button {
         padding-top: 0;
-        padding-inline-end: 0;
-        margin-inline-end: 0;
-        float: inline-end;
         border-radius: 0;
+
+        [dir="ltr"] & {
+            padding-right: 0;
+            margin-right: 0;
+            float: right;
+        }
+
+        [dir="rtl"] & {
+            padding-left: 0;
+            margin-left: 0;
+            float: left;
+        }
     }
 
     .nowPlayingInfoButtons .btnRepeat,
     .nowPlayingInfoButtons .btnRewind {
-        margin-inline-start: 0;
-        margin-inline-end: auto;
         font-size: smaller;
+
+        [dir="ltr"] & {
+            margin-left: 0;
+            margin-right: auto;
+        }
+
+        [dir="rtl"] & {
+            margin-right: 0;
+            margin-left: auto;
+        }
     }
 
     .nowPlayingInfoButtons .btnShuffleQueue,
     .nowPlayingInfoButtons .btnFastForward {
-        margin-inline-start: auto;
-        margin-inline-end: 0;
         font-size: smaller;
+
+        [dir="ltr"] & {
+            margin-left: auto;
+            margin-right: 0;
+        }
+
+        [dir="rtl"] & {
+            margin-right: auto;
+            margin-left: 0;
+        }
     }
 
     .paper-icon-button-light {

src/components/subtitleuploader/style.scss

@@ -9,3 +9,8 @@
     align-items: center;
     justify-content: center;
 }
+
+.raised.raised-mini.btnBrowse {
+    margin-left:1.5em;
+}
+

src/components/subtitleuploader/subtitleuploader.template.html

@@ -13,7 +13,7 @@
             <div class="flex align-items-center" style="margin:1.5em 0;">
                 <h2 style="margin:0;">${HeaderAddUpdateSubtitle}</h2>
 
-                <button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;">
+                <button is="emby-button" type="button" class="raised raised-mini btnBrowse">
                     <span class="material-icons folder" aria-hidden="true"></span>
                     <span>${Browse}</span>
                 </button>

src/components/toast/toast.scss

@@ -1,12 +1,19 @@
 .toastContainer {
     position: fixed;
-    inset-inline-start: 0;
     bottom: 0;
     pointer-events: none;
     z-index: 9999999;
     padding: 1em;
     display: flex;
     flex-direction: column;
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .toast {

src/components/tvproviders/schedulesdirect.js

@@ -8,6 +8,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-button/emby-button';
 import '../../assets/css/flexstyles.scss';
+import './style.scss';
 import Dashboard from '../../utils/dashboard';
 import { Events } from 'jellyfin-apiclient';
 

src/components/tvproviders/schedulesdirect.template.html

@@ -37,7 +37,7 @@
         <h2 style="background-color:rgba(82,181,75,.8);color:#fff;margin: 0;border-radius:100em;height:1.7em;width:1.7em;" class="flex align-items-center justify-content-center">
             2
         </h2>
-        <h3 style="margin:0 0 0 .5em;">
+        <h3 class="guideProviderSelectListings">
             ${GuideProviderSelectListings}
         </h3>
     </div>

src/components/tvproviders/style.scss

@@ -0,0 +1,9 @@
+.guideProviderSelectListings {
+    [dir="ltr"] & {
+        margin:0 0 0 .5em;
+    }
+
+    [dir="rtl"] & {
+        margin:0 .5em 0 0;
+    }
+}

src/components/upnextdialog/upnextdialog.scss

@@ -4,7 +4,6 @@
     bottom: 0;
     width: 30em;
     padding: 1em;
-    margin: 0 2em 2em 0;
     display: flex;
     flex-direction: column;
     will-change: transform, opacity;
@@ -13,6 +12,14 @@
     color: #fff;
     user-select: none;
     -webkit-touch-callout: none;
+
+    [dir="ltr"] & {
+        margin: 0 2em 2em 0;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 0 2em 2em;
+    }
 }
 
 .upNextDialog-hidden {

src/controllers/dashboard/devices/devices.js

@@ -113,7 +113,10 @@ import confirm from '../../../components/confirm/confirm';
             deviceHtml += '<div class="cardFooter">';
 
             if (canEdit || canDelete(device.Id)) {
-                deviceHtml += '<div style="text-align:end; float:inline-end;padding-top:5px;">';
+                if (globalize.getIsRTL())
+                    deviceHtml += '<div style="text-align:left; float:left;padding-top:5px;">';
+                else
+                    deviceHtml += '<div style="text-align:right; float:right;padding-top:5px;">';
                 deviceHtml += '<button type="button" is="paper-icon-button-light" data-id="' + device.Id + '" title="' + globalize.translate('Menu') + '" class="btnDeviceMenu"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
                 deviceHtml += '</div>';
             }

src/controllers/dashboard/plugins/installed/index.js

@@ -83,7 +83,10 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
     html += '<div class="cardFooter">';
 
     if (configPage || plugin.CanUninstall) {
-        html += '<div style="text-align:end; float:inline-end;padding-top:5px;">';
+        if (globalize.getIsRTL())
+            html += '<div style="text-align:left; float:left;padding-top:5px;">';
+        else
+            html += '<div style="text-align:right; float:right;padding-top:5px;">';
         html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
         html += '</div>';
     }

src/controllers/dashboard/scheduledtasks/scheduledtasks.js

@@ -58,7 +58,10 @@ import '../../../elements/emby-button/emby-button';
             html += '<span class="material-icons listItemIcon schedule" aria-hidden="true"></span>';
             html += '</a>';
             html += '<div class="listItemBody two-line">';
-            html += "<a class='clearLink' style='margin:0;padding:0;display:block;text-align:start;' is='emby-linkbutton' href='scheduledtask.html?id=" + task.Id + "'>";
+            let textAlignStyle = 'left';
+            if (globalize.getIsRTL())
+                textAlignStyle = 'right';
+            html += "<a class='clearLink' style='margin:0;padding:0;display:block;text-align:" + textAlignStyle + ";' is='emby-linkbutton' href='scheduledtask.html?id=" + task.Id + "'>";
             html += "<h3 class='listItemBodyText'>" + task.Name + '</h3>';
             html += "<div class='secondary listItemBodyText' id='taskProgress" + task.Id + "'>" + getTaskProgressHtml(task) + '</div>';
             html += '</a>';

src/elements/emby-collapse/emby-collapse.scss

@@ -17,20 +17,36 @@
     align-items: center;
     text-transform: none;
     width: 100%;
-    text-align: start;
     border-width: 0 0 0.1em 0;
     border-style: solid;
     padding-left: 0.1em;
     background: transparent;
     box-shadow: none;
+
+    [dir="ltr"] & {
+        text-align: left;
+        padding-left: 0.1em;
+    }
+
+    [dir="rtl"] & {
+        text-align: right;
+        padding-right: 0.1em;
+    }
 }
 
 .emby-collapse-expandIcon {
     transform-origin: 50% 50%;
     transition: transform 180ms ease-out;
     position: absolute;
-    inset-inline-end: 0.5em;
     font-size: 1.5em;
+
+    [dir="ltr"] & {
+        right: 0.5em;
+    }
+
+    [dir="rtl"] & {
+        left: 0.5em;
+    }
 }
 
 .emby-collapse-expandIconExpanded {

src/elements/emby-input/emby-input.scss

@@ -47,12 +47,24 @@
 
 .inlineForm .inputContainer:first-child,
 .inlineForm .selectContainer:first-child {
-    margin-inline-start: 0;
+    [dir="ltr"] & {
+        margin-left: 0;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0
+    }
 }
 
 .inlineForm .inputContainer:last-child,
 .inlineForm .selectContainer:last-child {
-    margin-inline-end: 0;
+    [dir="ltr"] & {
+        margin-right: 0;
+    }
+
+    [dir="rtl"] & {
+        margin-left: 0;
+    }
 }
 
 .inputLabel {

src/elements/emby-radio/emby-radio.scss

@@ -32,11 +32,18 @@
 
 .mdl-radio__circles {
     position: relative;
-    margin-inline-end: 0.54em;
     width: 1.08em;
     height: 1.08em;
     border-radius: 50%;
     cursor: pointer;
+
+    [dir="ltr"] & {
+        margin-right: 0.54em;
+    }
+
+    [dir="rtl"] & {
+        margin-left: 0.54em;
+    }
 }
 
 .mdl-radio__circles svg {
@@ -44,9 +51,16 @@
     height: 100%;
     position: absolute;
     top: 0;
-    inset-inline-start: 0;
     z-index: 1;
     overflow: visible;
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .mdl-radio__button:disabled + .mdl-radio__circles {

src/elements/emby-scrollbuttons/emby-scrollbuttons.scss

@@ -1,7 +1,6 @@
 .emby-scrollbuttons {
     position: absolute;
     top: 0;
-    inset-inline-end: 0;
     align-items: center;
     justify-content: center;
     min-width: 104px;
@@ -10,6 +9,14 @@
     z-index: 1;
     color: #fff;
     display: flex;
+
+    [dir="ltr"] & {
+        right: 0;
+    }
+
+    [dir="rtl"] & {
+        left: 0;
+    }
 }
 
 .emby-scrollbuttons-button > .material-icons {

src/elements/emby-scroller/emby-scroller.scss

@@ -9,7 +9,15 @@
 
 /* align first card in scroller to heading */
 .itemsContainer > .card > .cardBox {
-    margin-inline: 0 1.2em;
+    [dir="ltr"] & {
+        margin-left: 0;
+        margin-right: 1.2em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0;
+        margin-left: 1.2em;
+    }
 }
 
 .servers > .card > .cardBox {

src/elements/emby-select/emby-select.scss

@@ -11,14 +11,20 @@
     /* General select styles: change as needed */
     font-family: inherit;
     font-weight: inherit;
-    padding-block: 0.5em;
-    padding-inline: 0.5em 1.9em;
 
     /* Prevent padding from causing width overflow */
     box-sizing: border-box;
     outline: none !important;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     width: 100%;
+
+    [dir="ltr"] & {
+        padding: 0.5em 1.9em 0.5em 0.5em;
+    }
+
+    [dir="rtl"] & {
+        padding: 0.5em 0.5em 0.5em 1.9em;
+    }
 }
 
 .emby-select[disabled] {
@@ -35,9 +41,15 @@
 }
 
 .selectContainer-inline > .emby-select {
-    padding-block: 0.3em;
-    padding-inline: 0.5em 1.9em;
     font-size: inherit;
+
+    [dir="ltr"] & {
+        padding: 0.3em 1.9em 0.3em 0.5em;
+    }
+
+    [dir="rtl"] & {
+        padding: 0.3em 0.5em 0.3em 1.9em;
+    }
 }
 
 .selectContainer-inline > .emby-select[disabled] {
@@ -94,10 +106,17 @@
 
 .selectArrowContainer {
     position: absolute;
-    inset-inline-end: 0.3em;
     top: 0.2em;
     color: inherit;
     pointer-events: none;
+
+    [dir="ltr"] & {
+        right: 0.3em;
+    }
+
+    [dir="rtl"] & {
+        left: 0.3em;
+    }
 }
 
 .selectContainer-inline > .selectArrowContainer {

src/elements/emby-slider/emby-slider.js

@@ -417,7 +417,10 @@ import globalize from '../../scripts/globalize';
 
     function setRange(elem, startPercent, endPercent) {
         const style = elem.style;
-        style.insetInlineStart = Math.max(startPercent, 0) + '%';
+        if (globalize.getIsRTL())
+            style.right = Math.max(startPercent, 0) + '%';
+        else
+            style.left = Math.max(startPercent, 0) + '%';
 
         const widthPercent = endPercent - startPercent;
         style.width = Math.max(Math.min(widthPercent, 100), 0) + '%';

src/elements/emby-slider/emby-slider.scss

@@ -151,10 +151,16 @@
     width: 100%;
     box-sizing: border-box;
     top: 50%;
-    inset-inline-start: 0;
     position: absolute;
-    padding-block: 0;
+    padding: 0 0.54em; /* half of slider thumb size */
-    padding-inline: 0.54em;/* half of slider thumb size */
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .mdl-slider-background-flex {
@@ -163,11 +169,18 @@
     margin-top: -0.1em;
     width: 100%;
     top: 50%;
-    inset-inline-start: 0;
     display: flex;
     overflow: hidden;
     border: 0;
     padding: 0;
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .mdl-slider-background-flex-inner {
@@ -178,11 +191,18 @@
 .mdl-slider-background-lower {
     /* transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */
     position: absolute;
-    inset-inline-start: 0;
     width: 0;
     top: 0;
     bottom: 0;
     background-color: #00a4dc;
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .mdl-slider-background-lower-clear {
@@ -212,8 +232,7 @@
     position: absolute;
     left: 0;
     right: 0;
-    margin-block: 0;
+    margin: 0 0.54em; /* half of slider thumb size */
-    margin-inline: 0.54em; /* half of slider thumb size */
 }
 
 .sliderBubble {

src/elements/emby-toggle/emby-toggle.scss

@@ -59,7 +59,6 @@
 .mdl-switch__thumb {
     background: #999;
     position: absolute;
-    inset-inline-start: 0;
     top: -0.25em;
     height: 1.44em;
     width: 1.44em;
@@ -72,6 +71,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {

src/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="preload">
+<html class="preload" dir="ltr">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
@@ -98,12 +98,19 @@
         .mainDrawerHandle {
             position: fixed;
             top: 0;
-            inset-inline-start: 0;
             bottom: 0;
             z-index: 1;
             width: 0.8em;
         }
 
+        [dir="ltr"] .mainDrawerHandle {
+            left: 0;
+        }
+
+        [dir="rtl"] .mainDrawerHandle {
+            left: 0;
+        }
+
         @-webkit-keyframes fadein {
             from {
                 opacity: 0;
@@ -148,7 +155,7 @@
         }
     </style>
 </head>
-<body>
+<body dir="ltr">
     <div class="backdropContainer"></div>
     <div class="backgroundContainer"></div>
     <div class="mainDrawer hide">