fix(badge): incorrectly handling rtl (#10630)

* Fixes all of the RTL selectors being scoped to the badge itself, rather than a parent, which means that consumers would have to set `dir="rtl"` on each individual badge.
* Fixes none of the `left`/`right` values being inverted.

Author: crisbeto

src/lib/badge/_badge-theme.scss

@@ -40,53 +40,73 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
   &.mat-badge-before {
     margin-left: $size;
 
-    &[dir='rtl'] {
-      margin-left: 0;
-      margin-right: $size;
+    .mat-badge-content {
+      left: -$size;
     }
+  }
+
+  [dir='rtl'] &.mat-badge-before {
+    margin-left: 0;
+    margin-right: $size;
 
     .mat-badge-content {
-      left: -$size;
+      left: auto;
+      right: -$size;
     }
   }
 
   &.mat-badge-after {
     margin-right: $size;
 
-    &[dir='rtl'] {
-      margin-right: 0;
-      margin-left: $size;
+    .mat-badge-content {
+      right: -$size;
     }
+  }
+
+  [dir='rtl'] &.mat-badge-after {
+    margin-right: 0;
+    margin-left: $size;
 
     .mat-badge-content {
-      right: -$size;
+      right: auto;
+      left: -$size;
     }
   }
 
   &.mat-badge-overlap {
     &.mat-badge-before {
       margin-left: $size / 2;
 
-      &[dir='rtl'] {
-        margin-left: 0;
-        margin-right: $size / 2;
+      .mat-badge-content {
+        left: -$size / 2;
       }
+    }
+
+    [dir='rtl'] &.mat-badge-before {
+      margin-left: 0;
+      margin-right: $size / 2;
 
       .mat-badge-content {
-        left: -$size / 2;
+        left: auto;
+        right: -$size / 2;
       }
     }
 
     &.mat-badge-after {
       margin-right: $size / 2;
 
-      &[dir='rtl'] {
-        margin-right: 0;
-        margin-left: $size;
+      .mat-badge-content {
+        right: -$size / 2;
       }
+    }
+
+    [dir='rtl'] &.mat-badge-after {
+      margin-right: 0;
+      margin-left: $size;
 
       .mat-badge-content {
-        right: -$size / 2;
+        right: auto;
+        left: -$size / 2;
       }
     }
   }