fix(material/button-toggle): unable to override elevation and high co…

…ntrast styling applied incorrectly (#14722)

* Fixes not being able to override the elevation of a button toggle. Similar to #7909, but makes avoids issues with the new appearance.
* Fixes some of the styles that are only intended to be applied in high contrast mode being active all the time. Seems like an issue while rebasing.

Fixes #14721.

(cherry picked from commit b703cb3)

src/material/button-toggle/_button-toggle-theme.scss

@@ -14,12 +14,14 @@
 
   .mat-button-toggle-standalone,
   .mat-button-toggle-group {
-    @include private.private-theme-elevation(2, $config);
+    @include private.private-theme-overridable-elevation(2, $config);
   }
 
   .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
   .mat-button-toggle-group-appearance-standard {
-    box-shadow: none;
+    &:not([class*='mat-elevation-z']) {
+      box-shadow: none;
+    }
   }
 
   .mat-button-toggle {

src/material/button-toggle/button-toggle.scss

@@ -120,13 +120,12 @@ $legacy-border-radius: 2px !default;
   opacity: 0;
   @include layout-common.fill;
 
-  .mat-button-toggle-checked & {
-    border-bottom: solid $legacy-height;
-
-    // Changing the background color for the selected item won't be visible in high contrast mode.
-    // We fall back to using the overlay to draw a brighter, semi-transparent tint on top instead.
-    // It uses a border, because the browser will render it using a brighter color.
-    @include a11y.high-contrast(active, off) {
+  // Changing the background color for the selected item won't be visible in high contrast mode.
+  // We fall back to using the overlay to draw a brighter, semi-transparent tint on top instead.
+  // It uses a border, because the browser will render it using a brighter color.
+  @include a11y.high-contrast(active, off) {
+    .mat-button-toggle-checked & {
+      border-bottom: solid $legacy-height;
       opacity: 0.5;
       height: 0;
     }