Sprite info and Sprite selector RTL

Changed left/right to first/last. Added direction aware styles.

src/components/sprite-info/sprite-info.css

@@ -59,27 +59,45 @@
     cursor: default;
 }
 
-.radio-left {
+.radio-first {
     border: 1px solid $ui-black-transparent;
+}
+
+[dir="ltr"] .radio-first {
     border-top-left-radius: $form-radius;
     border-bottom-left-radius: $form-radius;
 }
 
-.radio-left:focus {
+[dir="rtl"] .radio-first {
+    border-top-right-radius: $form-radius;
+    border-bottom-right-radius: $form-radius;
+}
+
+.radio-first:focus {
     border-color: $motion-primary;
     box-shadow: inset 0 0 0 -2px $ui-black-transparent;
 }
 
-.radio-right {
+.radio-last {
     border-bottom: 1px solid $ui-black-transparent;
     border-top: 1px solid $ui-black-transparent;
+}
+
+[dir="ltr"] .radio-last {
     border-right: 1px solid $ui-black-transparent;
     border-left: 1px solid $ui-black-transparent;
     border-top-right-radius: $form-radius;
     border-bottom-right-radius: $form-radius;
 }
 
-.radio-right:focus {
+[dir="rtl"] .radio-last {
+    border-left: 1px solid $ui-black-transparent;
+    border-right: 1px solid $ui-black-transparent;
+    border-top-left-radius: $form-radius;
+    border-bottom-left-radius: $form-radius;
+}
+
+.radio-last:focus {
     border-color: $motion-primary;
     box-shadow: inset 0 0 0 -2px $ui-black-transparent;
 }

src/components/sprite-info/sprite-info.jsx

@@ -180,7 +180,7 @@ class SpriteInfo extends React.Component {
                             <div
                                 className={classNames(
                                     styles.radio,
-                                    styles.radioLeft,
+                                    styles.radioFirst,
                                     styles.iconWrapper,
                                     {
                                         [styles.isActive]: this.props.visible && !this.props.disabled,
@@ -199,7 +199,7 @@ class SpriteInfo extends React.Component {
                             <div
                                 className={classNames(
                                     styles.radio,
-                                    styles.radioRight,
+                                    styles.radioLast,
                                     styles.iconWrapper,
                                     {
                                         [styles.isActive]: !this.props.visible && !this.props.disabled,

src/components/sprite-selector-item/sprite-selector-item.css

@@ -80,15 +80,29 @@
 .delete-button {
     position: absolute;
     top: 0.125rem;
-    right: 0.125rem;
     z-index: 1;
 }
 
+[dir="ltr"] .delete-button {
+    right: 0.125rem;
+}
+
+[dir="rtl"] .delete-button {
+    left: 0.125rem;
+}
+
 .number {
     position: absolute;
     top: 0.15rem;
-    left: 0.15rem;
     font-size: 0.625rem;
     font-weight: bold;
     z-index: 2;
 }
+
+[dir="ltr"] .number {
+    left: 0.15rem;
+}
+
+[dir="rtl"] .number {
+    right: 0.15rem;
+}