refactor(a11y): output less CSS for high contrast styles (#14567)

Reworks the media query to output slightly less CSS. Also fixes a high contrast selector in the badge that was being output 3 times unnecessarily.

src/cdk/a11y/_a11y.scss

@@ -26,7 +26,7 @@
  *    `white-on-black` or `black-on-white`.
  */
 @mixin cdk-high-contrast($target: active) {
-  @media screen and (-ms-high-contrast: $target) {
+  @media (-ms-high-contrast: $target) {
     @content;
   }
 }

src/lib/badge/_badge-theme.scss

@@ -18,11 +18,6 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
     width: $size;
     height: $size;
     line-height: $size;
-
-    @include cdk-high-contrast {
-      outline: solid 1px;
-      border-radius: 0;
-    }
   }
 
   &.mat-badge-above {
@@ -102,6 +97,11 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
   .mat-badge-content {
     color: mat-color($primary, default-contrast);
     background: mat-color($primary);
+
+    @include cdk-high-contrast {
+      outline: solid 1px;
+      border-radius: 0;
+    }
   }
 
   .mat-badge-accent {