fix(ui5-radiobutton): focus outline in Compact & RTL (#18)

Author: ilhan007

packages/main/src/themes/base/RadioButton.less

@@ -116,8 +116,8 @@ ui5-radiobutton {
 
 		input {
 			margin: 0; /* FF puts margin */
-			-webkit-appearance: none;
 			visibility: hidden;
+			width: 0;
 		}
 	}
 
@@ -188,35 +188,22 @@ ui5-radiobutton {
 	}
 }
 
-/* RTL */
-:host([dir=RTL]) {
-	.sapMRb.sapMRbHasLabel:focus:before {
-		left: 0;
- 		right: 0.625rem;
-	}
-}
-/* RTL in Compact */
-:host([dir=RTL]) {
-	.sapUiSizeCompact .sapMRb.sapMRbHasLabel:focus:before {
-		left: 0;
- 		right: 0.375rem;
-	}
-}
-
 /* ListItem Context */
 :host(ui5-radiobutton.radioButtonInListItem) .sapMRb .sapMRbInner .sapMRbSvgOuter {
 	fill: @sapUiListBackground;
 }
 
-[dir=RTL] {
+/* RTL */
+span[dir="rtl"] {
 	.sapMRb.sapMRbHasLabel:focus:before {
 		left: 0;
  		right: 0.625rem;
 	}
 }
+
 /* RTL in Compact */
-[dir=RTL] {
-	.sapUiSizeCompact .sapMRb.sapMRbHasLabel:focus:before {
+span[dir="rtl"] {
+	&.sapUiSizeCompact .sapMRb.sapMRbHasLabel:focus:before {
 		left: 0;
  		right: 0.375rem;
 	}