Replaced all inline entries with attribute bases selectors

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 {