fix(radio): circle not being greyed out when disabled

Fixes the radio button circle not being greyed out when it is disabled. It seems like we had the styles in place already, however they were with a lower specificity than the other theme styles.

Fixes #12125.

Author: crisbeto

src/lib/radio/_radio-theme.scss

@@ -27,20 +27,6 @@
     border-color: mat-color($foreground, secondary-text);
   }
 
-  .mat-radio-disabled .mat-radio-outer-circle {
-    border-color: mat-color($foreground, disabled);
-  }
-
-  .mat-radio-disabled {
-    .mat-radio-ripple .mat-ripple-element, .mat-radio-inner-circle {
-      background-color: mat-color($foreground, disabled);
-    }
-
-    .mat-radio-label-content {
-      color: mat-color($foreground, disabled);
-    }
-  }
-
   .mat-radio-button {
     &.mat-primary {
       @include _mat-radio-color($primary);
@@ -53,6 +39,25 @@
     &.mat-warn {
       @include _mat-radio-color($warn);
     }
+
+    // This needs extra specificity, because the classes above are combined
+    // (e.g. `.mat-radio-button.mat-accent`) which increases their specificity a lot.
+    // TODO: consider making the selectors into descendants (`.mat-primary .mat-radio-button`).
+    &.mat-radio-disabled {
+      &.mat-radio-checked .mat-radio-outer-circle,
+      .mat-radio-outer-circle {
+        border-color: mat-color($foreground, disabled);
+      }
+
+      .mat-radio-ripple .mat-ripple-element,
+      .mat-radio-inner-circle {
+        background-color: mat-color($foreground, disabled);
+      }
+
+      .mat-radio-label-content {
+        color: mat-color($foreground, disabled);
+      }
+    }
   }
 }