From 9a12eabf6b4c44af7d39566d1b541c0c42449714 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Sun, 20 Feb 2022 20:01:30 +0100
Subject: [PATCH] fix(material/button-toggle): unable to override elevation and
 high contrast 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 b703cb36a875d124a526f1b4404ecc153ae36b14)
---
 .../button-toggle/_button-toggle-theme.scss         |  6 ++++--
 src/material/button-toggle/button-toggle.scss       | 13 ++++++-------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss
index 02e0b29173a3..20bd434e0d4a 100644
--- a/src/material/button-toggle/_button-toggle-theme.scss
+++ b/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 {
diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss
index 0756fd4e97cb..989346841cbc 100644
--- a/src/material/button-toggle/button-toggle.scss
+++ b/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;
     }