From 5841e43c8ceaa9cfa75506b8f641311e1dfc7d67 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Tue, 9 May 2023 20:20:43 -0700
Subject: [PATCH] chore(switch): flatten sass selectors

PiperOrigin-RevId: 530783676
---
 switch/lib/_handle.scss | 216 ++++++++++++++++++++--------------------
 switch/lib/_icon.scss   |  38 ++++---
 switch/lib/_switch.scss |  25 ++---
 switch/lib/_track.scss  | 132 ++++++++++++------------
 4 files changed, 201 insertions(+), 210 deletions(-)

diff --git a/switch/lib/_handle.scss b/switch/lib/_handle.scss
index a2d2a45d8a..96993b55aa 100644
--- a/switch/lib/_handle.scss
+++ b/switch/lib/_handle.scss
@@ -20,19 +20,20 @@ $_easing-standard: map.get($_md-sys-motion, easing-standard);
     // this easing is custom to perform the "overshoot" animation
     transition: margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
     display: flex;
-    $margin: calc(var(--_track-width) - var(--_track-height));
+  }
 
-    .switch--selected & {
-      margin-inline-start: $margin;
-    }
+  $margin: calc(var(--_track-width) - var(--_track-height));
 
-    .switch--unselected & {
-      margin-inline-end: $margin;
-    }
+  .switch--selected .handle-container {
+    margin-inline-start: $margin;
+  }
 
-    .switch:disabled & {
-      transition: none;
-    }
+  .switch--unselected .handle-container {
+    margin-inline-end: $margin;
+  }
+
+  .switch:disabled .handle-container {
+    transition: none;
   }
 
   .handle {
@@ -50,81 +51,78 @@ $_easing-standard: map.get($_md-sys-motion, easing-standard);
     transition-duration: 250ms, 250ms, 67ms;
     transition-timing-function: $_easing-standard, $_easing-standard, linear;
     z-index: 0;
+  }
+
+  .handle::before {
+    content: '';
+    display: flex;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    box-sizing: border-box;
+
+    transition: opacity 67ms linear;
+  }
 
-    &::before {
-      content: '';
-      display: flex;
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      border-radius: inherit;
-      box-sizing: border-box;
-
-      transition: opacity 67ms linear;
-
-      .switch--selected & {
-        // When selected, turn off ::before
-        opacity: 0;
-      }
-
-      .switch:disabled & {
-        transition: none;
-      }
-    }
-
-    .switch:disabled & {
-      transition: none;
-    }
-
-    .switch--selected &,
-    .switch--unselected &.handle--big {
-      height: var(--_selected-handle-height);
-      width: var(--_selected-handle-width);
-    }
-
-    .switch--selected:enabled:active &,
-    .switch--unselected:enabled:active & {
-      height: var(--_pressed-handle-height);
-      width: var(--_pressed-handle-width);
-      transition-timing-function: linear;
-      transition-duration: 100ms;
-    }
-
-    .switch--selected:hover & {
-      background-color: var(--_selected-hover-handle-color);
-    }
-
-    .switch--selected:focus-visible & {
-      background-color: var(--_selected-focus-handle-color);
-    }
-
-    .switch--selected:active & {
-      background-color: var(--_selected-pressed-handle-color);
-    }
-
-    .switch--selected:disabled & {
-      background-color: var(--_disabled-selected-handle-color);
-    }
-
-    &::before {
-      background-color: var(--_unselected-handle-color);
-
-      .switch--unselected:hover & {
-        background-color: var(--_unselected-hover-handle-color);
-      }
-
-      .switch--unselected:focus-visible & {
-        background-color: var(--_unselected-focus-handle-color);
-      }
-
-      .switch--unselected:active & {
-        background-color: var(--_unselected-pressed-handle-color);
-      }
-
-      .switch--unselected:disabled & {
-        background-color: var(--_disabled-unselected-handle-color);
-      }
-    }
+  .switch--selected .handle::before {
+    // When selected, turn off ::before
+    opacity: 0;
+  }
+
+  .switch:disabled .handle,
+  .switch:disabled .handle::before {
+    transition: none;
+  }
+
+  .switch--selected .handle,
+  .switch--unselected .handle.handle--big {
+    height: var(--_selected-handle-height);
+    width: var(--_selected-handle-width);
+  }
+
+  .switch--selected:enabled:active .handle,
+  .switch--unselected:enabled:active .handle {
+    height: var(--_pressed-handle-height);
+    width: var(--_pressed-handle-width);
+    transition-timing-function: linear;
+    transition-duration: 100ms;
+  }
+
+  .switch--selected:hover .handle {
+    background-color: var(--_selected-hover-handle-color);
+  }
+
+  .switch--selected:focus-visible .handle {
+    background-color: var(--_selected-focus-handle-color);
+  }
+
+  .switch--selected:active .handle {
+    background-color: var(--_selected-pressed-handle-color);
+  }
+
+  .switch--selected:disabled .handle {
+    background-color: var(--_disabled-selected-handle-color);
+  }
+
+  .handle::before {
+    background-color: var(--_unselected-handle-color);
+  }
+
+  .switch--unselected:hover .handle::before {
+    background-color: var(--_unselected-hover-handle-color);
+  }
+
+  .switch--unselected:focus-visible .handle::before {
+    background-color: var(--_unselected-focus-handle-color);
+  }
+
+  .switch--unselected:active .handle::before {
+    background-color: var(--_unselected-pressed-handle-color);
+  }
+
+  .switch--unselected:disabled .handle::before {
+    background-color: var(--_disabled-unselected-handle-color);
   }
 
   .ripple {
@@ -135,31 +133,31 @@ $_easing-standard: map.get($_md-sys-motion, easing-standard);
     transform: translate(-50%, -50%);
     height: var(--_state-layer-size);
     width: var(--_state-layer-size);
+  }
+
+  .switch--selected .ripple {
+    @include ripple.theme(
+      (
+        hover-color: var(--_selected-hover-state-layer-color),
+        focus-color: var(--_selected-focus-state-layer-color),
+        pressed-color: var(--_selected-pressed-state-layer-color),
+        hover-opacity: var(--_selected-hover-state-layer-opacity),
+        focus-opacity: var(--_selected-focus-state-layer-opacity),
+        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
+      )
+    );
+  }
 
-    .switch--selected & {
-      @include ripple.theme(
-        (
-          hover-color: var(--_selected-hover-state-layer-color),
-          focus-color: var(--_selected-focus-state-layer-color),
-          pressed-color: var(--_selected-pressed-state-layer-color),
-          hover-opacity: var(--_selected-hover-state-layer-opacity),
-          focus-opacity: var(--_selected-focus-state-layer-opacity),
-          pressed-opacity: var(--_selected-pressed-state-layer-opacity),
-        )
-      );
-    }
-
-    .switch--unselected & {
-      @include ripple.theme(
-        (
-          hover-color: var(--_unselected-hover-state-layer-color),
-          focus-color: var(--_unselected-focus-state-layer-color),
-          pressed-color: var(--_unselected-pressed-state-layer-color),
-          hover-opacity: var(--_unselected-hover-state-layer-opacity),
-          focus-opacity: var(--_unselected-focus-state-layer-opacity),
-          pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
-        )
-      );
-    }
+  .switch--unselected .ripple {
+    @include ripple.theme(
+      (
+        hover-color: var(--_unselected-hover-state-layer-color),
+        focus-color: var(--_unselected-focus-state-layer-color),
+        pressed-color: var(--_unselected-pressed-state-layer-color),
+        hover-opacity: var(--_unselected-hover-state-layer-opacity),
+        focus-opacity: var(--_unselected-focus-state-layer-opacity),
+        pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
+      )
+    );
   }
 }
diff --git a/switch/lib/_icon.scss b/switch/lib/_icon.scss
index f0504df798..188c6555bc 100644
--- a/switch/lib/_icon.scss
+++ b/switch/lib/_icon.scss
@@ -28,10 +28,10 @@ $_easing-standard: map.get($_md-sys-motion, easing-standard);
     transition: fill 67ms linear, opacity 33ms linear,
       transform 167ms $_easing-standard;
     opacity: 0;
+  }
 
-    .switch:disabled & {
-      transition: none;
-    }
+  .switch:disabled .icon {
+    transition: none;
   }
 
   .switch--selected .icon--on,
@@ -44,25 +44,23 @@ $_easing-standard: map.get($_md-sys-motion, easing-standard);
     transform: rotate(-45deg);
   }
 
-  .icon {
-    .switch--selected & {
-      width: var(--_selected-icon-size);
-      height: var(--_selected-icon-size);
-      fill: var(--_selected-icon-color);
-    }
+  .switch--selected .icon {
+    width: var(--_selected-icon-size);
+    height: var(--_selected-icon-size);
+    fill: var(--_selected-icon-color);
+  }
 
-    .switch--unselected & {
-      width: var(--_unselected-icon-size);
-      height: var(--_unselected-icon-size);
-      fill: var(--_unselected-icon-color);
-    }
+  .switch--unselected .icon {
+    width: var(--_unselected-icon-size);
+    height: var(--_unselected-icon-size);
+    fill: var(--_unselected-icon-color);
+  }
 
-    .switch--selected:disabled & {
-      fill: var(--_disabled-selected-icon-color);
-    }
+  .switch--selected:disabled .icon {
+    fill: var(--_disabled-selected-icon-color);
+  }
 
-    .switch--unselected:disabled & {
-      fill: var(--_disabled-unselected-icon-color);
-    }
+  .switch--unselected:disabled .icon {
+    fill: var(--_disabled-unselected-icon-color);
   }
 }
diff --git a/switch/lib/_switch.scss b/switch/lib/_switch.scss
index 970654a92d..171892b9ce 100644
--- a/switch/lib/_switch.scss
+++ b/switch/lib/_switch.scss
@@ -118,9 +118,7 @@ $_forced-colors-theme: (
     outline: none;
     vertical-align: top;
     -webkit-tap-highlight-color: transparent;
-  }
 
-  md-focus-ring {
     @include focus-ring.theme(
       (
         'shape-start-start': var(--_track-shape-start-start),
@@ -164,18 +162,17 @@ $_forced-colors-theme: (
   }
 
   // Disabled - Track
-  .track {
-    .switch:disabled & {
-      background-color: transparent;
-      border-color: transparent;
-
-      &::before {
-        background-clip: content-box;
-      }
-    }
-    .switch--selected:disabled & {
-      background-clip: border-box;
-    }
+  .switch:disabled .track {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .switch:disabled .track::before {
+    background-clip: content-box;
+  }
+
+  .switch--selected:disabled .track {
+    background-clip: border-box;
   }
 
   @include track.styles();
diff --git a/switch/lib/_track.scss b/switch/lib/_track.scss
index 05148b599e..fd3350f8b5 100644
--- a/switch/lib/_track.scss
+++ b/switch/lib/_track.scss
@@ -23,73 +23,71 @@
 
     transition: background-color 67ms linear;
     background-color: var(--_selected-track-color);
+  }
+  .switch:disabled .track {
+    transition: none;
+  }
+
+  .switch--selected:hover .track {
+    background-color: var(--_selected-hover-track-color);
+  }
+
+  .switch--selected:focus-visible .track {
+    background-color: var(--_selected-focus-track-color);
+  }
+
+  .switch--selected:active .track {
+    background-color: var(--_selected-pressed-track-color);
+  }
+
+  .switch--selected:disabled .track {
+    background-color: var(--_disabled-selected-track-color);
+  }
+
+  .track::before {
+    content: '';
+    display: flex;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    box-sizing: border-box;
+    border-style: solid;
+
+    transition-property: opacity, background-color;
+    transition-timing-function: linear;
+    transition-duration: 67ms;
+
+    border-width: var(--_track-outline-width);
+    background-color: var(--_unselected-track-color);
+    border-color: var(--_unselected-track-outline-color);
+  }
+  .switch:disabled .track::before {
+    transition: none;
+  }
+
+  .switch--selected .track::before {
+    // When selected, turn off ::before
+    opacity: 0;
+  }
+
+  .switch--unselected:hover .track::before {
+    background-color: var(--_unselected-hover-track-color);
+    border-color: var(--_unselected-hover-track-outline-color);
+  }
+
+  .switch--unselected:focus-visible .track::before {
+    background-color: var(--_unselected-focus-track-color);
+    border-color: var(--_unselected-focus-track-outline-color);
+  }
+
+  .switch--unselected:active .track::before {
+    background-color: var(--_unselected-pressed-track-color);
+    border-color: var(--_unselected-pressed-track-outline-color);
+  }
 
-    .switch:disabled & {
-      transition: none;
-    }
-
-    .switch--selected:hover & {
-      background-color: var(--_selected-hover-track-color);
-    }
-
-    .switch--selected:focus-visible & {
-      background-color: var(--_selected-focus-track-color);
-    }
-
-    .switch--selected:active & {
-      background-color: var(--_selected-pressed-track-color);
-    }
-
-    .switch--selected:disabled & {
-      background-color: var(--_disabled-selected-track-color);
-    }
-
-    &::before {
-      content: '';
-      display: flex;
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      border-radius: inherit;
-      box-sizing: border-box;
-      border-style: solid;
-
-      transition-property: opacity, background-color;
-      transition-timing-function: linear;
-      transition-duration: 67ms;
-
-      border-width: var(--_track-outline-width);
-      background-color: var(--_unselected-track-color);
-      border-color: var(--_unselected-track-outline-color);
-
-      .switch:disabled & {
-        transition: none;
-      }
-
-      .switch--selected & {
-        // When selected, turn off ::before
-        opacity: 0;
-      }
-
-      .switch--unselected:hover & {
-        background-color: var(--_unselected-hover-track-color);
-        border-color: var(--_unselected-hover-track-outline-color);
-      }
-
-      .switch--unselected:focus-visible & {
-        background-color: var(--_unselected-focus-track-color);
-        border-color: var(--_unselected-focus-track-outline-color);
-      }
-
-      .switch--unselected:active & {
-        background-color: var(--_unselected-pressed-track-color);
-        border-color: var(--_unselected-pressed-track-outline-color);
-      }
-
-      .switch--unselected:disabled & {
-        background-color: var(--_disabled-unselected-track-color);
-        border-color: var(--_disabled-unselected-track-outline-color);
-      }
-    }
+  .switch--unselected:disabled .track::before {
+    background-color: var(--_disabled-unselected-track-color);
+    border-color: var(--_disabled-unselected-track-outline-color);
   }
 }