Replaced all inline entries with attribute bases selectors

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"] {
-    @media all and (min-width: 62.5em) {
-        .alphaPicker-fixed-right {
-            right: unset;
+        [dir="rtl"] & {
             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;
-    inset-inline-start: 0;
+    top: 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;
-    margin-inline: 0 1em;
+    [dir="ltr"] & {
+        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 {