From 8d5882cf177aae2dabed0e0924c1aa4b6e296ece Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 20 Jun 2022 10:38:46 +0200
Subject: [PATCH] fix(material/button-toggle): selected state not visible in
 high contrast mode (#25114)

It looks like at some point we regressed to where the selected indication in high contrast mode became transparent.

(cherry picked from commit 00f743e68c15d85ccd09444115990564a179953c)
---
 src/material/button-toggle/button-toggle.scss | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss
index 02de7b704b04..0de4c4755b32 100644
--- a/src/material/button-toggle/button-toggle.scss
+++ b/src/material/button-toggle/button-toggle.scss
@@ -117,33 +117,36 @@ $legacy-border-radius: 2px !default;
 
 // Overlay to be used as a tint.
 .mat-button-toggle-focus-overlay {
+  @include layout-common.fill;
   border-radius: inherit;
 
   // Disable pointer events to prevent it from hijacking user events.
   pointer-events: none;
   opacity: 0;
-  @include layout-common.fill;
+}
 
+@include cdk.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 cdk.high-contrast(active, off) {
-    .mat-button-toggle-checked & {
+  .mat-button-toggle-checked {
+    .mat-button-toggle-focus-overlay {
       border-bottom: solid $legacy-height;
       opacity: 0.5;
       height: 0;
     }
-  }
-}
 
-@include cdk.high-contrast(active, off) {
-  .mat-button-toggle-checked.mat-button-toggle-appearance-standard
-  .mat-button-toggle-focus-overlay {
-    // In high contrast mode, we use a border for the checked state because backgrounds
-    // can either be opaque or transparent. We set the border height to a value that is larger
-    // than usual button toggles are. This allows us to keep this high contrast style in the
-    // base component style, instead of making it dependent on height determined through density.
-    border-bottom: solid 500px;
+    &:hover .mat-button-toggle-focus-overlay {
+      opacity: 0.6;
+    }
+
+    &.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
+      // In high contrast mode, we use a border for the checked state because backgrounds
+      // can either be opaque or transparent. We set the border height to a value that is larger
+      // than usual button toggles are. This allows us to keep this high contrast style in the
+      // base component style, instead of making it dependent on height determined through density.
+      border-bottom: solid 500px;
+    }
   }
 }