Fixed Cards for RTL

src/components/cardbuilder/card.scss

@@ -406,6 +406,11 @@ button::-moz-focus-inner {
     display: flex;
     align-items: center;
     contain: layout style;
+
+    [dir="rtl"] & {
+        right: unset;
+        left: 0.225em;
+    }
 }
 
 .cardProgramAttributeIndicators {
@@ -415,6 +420,11 @@ button::-moz-focus-inner {
     display: flex;
     text-transform: uppercase;
     font-size: 92%;
+
+    [dir="rtl"] & {
+        left: unset;
+        right: 0;
+    }
 }
 
 .programAttributeIndicator {
@@ -435,6 +445,11 @@ button::-moz-focus-inner {
     position: absolute;
     bottom: 0;
     right: 0;
+
+    [dir="rtl"] & {
+        right: unset;
+        left: 0;
+    }
 }
 
 .cardOverlayButtonIcon {

src/components/indicators/indicators.js

@@ -84,7 +84,7 @@ export function getPlayedIndicatorHtml(item) {
     if (enablePlayedIndicator(item)) {
         const userData = item.UserData || {};
         if (userData.UnplayedItemCount) {
-            return '<div class="countIndicator indicator">' + userData.UnplayedItemCount + '</div>';
+            return '<div class="countIndicator indicator">' + userData.UnplayedItemCount.toLocaleString() + '</div>';
         }
 
         if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
@@ -99,7 +99,7 @@ export function getChildCountIndicatorHtml(item, options) {
     const minCount = options && options.minCount ? options.minCount : 0;
 
     if (item.ChildCount && item.ChildCount > minCount) {
-        return '<div class="countIndicator indicator">' + item.ChildCount + '</div>';
+        return '<div class="countIndicator indicator">' + item.ChildCount.toLocaleString() + '</div>';
     }
 
     return '';

src/components/indicators/indicators.scss

@@ -10,6 +10,11 @@
     top: 0;
     left: 0;
     bottom: 0;
+
+    [dir="rtl"] & {
+        left: unset;
+        right: 0;
+    }
 }
 
 .indicator {