Replaced all inline entries with attribute bases selectors

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 {