From 115ff3269b7d3ea8f3d93a859620481a2fa99e37 Mon Sep 17 00:00:00 2001
From: droshev <mladen.droshev@sap.com>
Date: Tue, 3 Mar 2020 08:29:28 -0500
Subject: [PATCH] fix: radio button alignment in RTL mode

---
 src/mixins/_forms.scss |  2 +-
 src/radio.scss         | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/mixins/_forms.scss b/src/mixins/_forms.scss
index 605a038d72..8826cc040c 100644
--- a/src/mixins/_forms.scss
+++ b/src/mixins/_forms.scss
@@ -149,7 +149,7 @@
 
   @include fd-rtl() {
     &::after {
-      left: $fd-radio-label-padding - $fd-radio-focus-offset;
+      left: $fd-radio-label-padding;
       right: $margin - $fd-radio-focus-offset;
     }
   }
diff --git a/src/radio.scss b/src/radio.scss
index 7e6947fd98..d060e307f7 100644
--- a/src/radio.scss
+++ b/src/radio.scss
@@ -48,6 +48,10 @@ $block: #{$fd-namespace}-radio;
     align-items: center;
     overflow: hidden;
     padding: $fd-radio-outer-circle-margin 0 $fd-radio-outer-circle-margin $fd-radio-outer-circle-margin;
+    
+    @include fd-rtl() {
+      padding: $fd-radio-outer-circle-margin $fd-radio-outer-circle-margin $fd-radio-outer-circle-margin 0;
+    }
 
     &::before {
       content: "";
@@ -61,11 +65,19 @@ $block: #{$fd-namespace}-radio;
       font-family: "SAP-icons";
       background-color: var(--sapField_Background);
       margin-right: $fd-radio-outer-circle-margin;
+      margin-left: 0;
       color: var(--sapSelectedColor);
       border: var(--sapField_BorderWidth) solid var(--sapField_BorderColor);
       border-radius: 50%;
     }
 
+    @include fd-rtl() {
+      &::before {
+        margin-left: $fd-radio-outer-circle-margin;
+        margin-right: 0;
+      }
+    }
+
     @include fd-hover() {
       &::before {
         background-color: var(--sapField_Hover_Background);
@@ -120,12 +132,23 @@ $block: #{$fd-namespace}-radio;
     + .#{$block}__label {
       padding: $fd-radio-outer-circle-margin-compact 0 $fd-radio-outer-circle-margin-compact $fd-radio-outer-circle-margin-compact;
 
+      @include fd-rtl() {
+        padding: $fd-radio-outer-circle-margin-compact $fd-radio-outer-circle-margin-compact $fd-radio-outer-circle-margin-compact 0;
+      }
       &::before {
         font-size: 0.4375rem;
         height: $fd-radio-inner-circle-diameter-compact;
         width: $fd-radio-inner-circle-diameter-compact;
         min-width: $fd-radio-inner-circle-diameter-compact;
         margin-right: $fd-radio-outer-circle-margin-compact;
+        margin-left: 0
+      }
+
+      @include fd-rtl() {
+        &::before {
+          margin-left: $fd-radio-outer-circle-margin-compact;
+          margin-right: 0;
+        }
       }
     }