fix(material/datepicker): screen reader close button style specificit…

…y too low

The specificity of the screen reader close button was the same as `.mat-raised-button`
which means that if the button styles are loaded after the datepicker styles, they'll
be overridden and will make the button look weird. These changes bump up the
specificity a bit to work around the issue.

Fixes angular#21043.

src/material/datepicker/datepicker-content.scss

@@ -29,6 +29,15 @@ $mat-datepicker-touch-max-height: 788px;
     width: $mat-datepicker-non-touch-calendar-width;
     height: $mat-datepicker-non-touch-calendar-height;
   }
+
+  // Note that this selector doesn't technically have to be nested, but we want the slightly
+  // higher specificity, or it can be overridden based on the CSS insertion order (see #21043).
+  .mat-datepicker-close-button {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 8px;
+  }
 }
 
 .mat-datepicker-content-touch {
@@ -49,13 +58,6 @@ $mat-datepicker-touch-max-height: 788px;
   }
 }
 
-.mat-datepicker-close-button {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin-top: 8px;
-}
-
 @media all and (orientation: landscape) {
   .mat-datepicker-content-touch .mat-calendar {
     width: $mat-datepicker-touch-landscape-width;