From 62ebb003e42c958119e229f8fb486a7c2e70abcc Mon Sep 17 00:00:00 2001
From: gschrag <gschrag@google.com>
Date: Thu, 13 Aug 2020 16:11:02 -0600
Subject: [PATCH 1/2] fix: move include statements to avoid nested classes

remove use of segment-theme mixins with references to css classes inside
of references to css classes
---
 .../mdc-segmented-button/segment/_segment.scss    | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/mdc-segmented-button/segment/_segment.scss b/packages/mdc-segmented-button/segment/_segment.scss
index 87e3007bcde..8d10ba251ec 100644
--- a/packages/mdc-segmented-button/segment/_segment.scss
+++ b/packages/mdc-segmented-button/segment/_segment.scss
@@ -37,9 +37,11 @@
   @include touch-target.wrapper($query);
   @include elevation.overlay-common($query);
 
+  @include _unselected-themes($query);
+  @include _selected-themes($query);
+
   .mdc-segmented-button__segment {
     @include base($query);
-    @include _unselected($query);
 
     &:hover {
       @include feature-targeting.targets($feat-structure) {
@@ -81,11 +83,6 @@
     }
   }
 
-  // Style for when element is selected
-  .mdc-segmented-button__segment--selected {
-    @include _selected($query);
-  }
-
   // maintains visual design when inside a touch-target-wrapper
   // This could also be accomplished with --first/--last classes
   .mdc-touch-target-wrapper {
@@ -126,7 +123,6 @@
   @include elevation-theme.overlay-surface-position($query: $query);
   @include elevation-theme.overlay-dimensions(100%, $query: $query);
   @include typography.typography(button, $query);
-  @include segment-theme.outline-color(segment-theme.$outline-color, $query);
   @include feature-targeting.targets($feat-structure) {
     display: inline-flex;
     vertical-align: top;
@@ -139,7 +135,8 @@
   }
 }
 
-@mixin _unselected($query: feature-targeting.all()) {
+@mixin _unselected-themes($query: feature-targeting.all()) {
+  @include segment-theme.outline-color(segment-theme.$outline-color, $query);
   @include segment-theme.unselected-ink-color(
     segment-theme.$unselected-ink-color,
     $query
@@ -150,7 +147,7 @@
   );
 }
 
-@mixin _selected($query: feature-targeting.all()) {
+@mixin _selected-themes($query: feature-targeting.all()) {
   @include segment-theme.selected-ink-color(
     segment-theme.$selected-ink-color,
     $query

From 0b429ebb214e5551f5f46c16920c4e98ff711014 Mon Sep 17 00:00:00 2001
From: gschrag <gschrag@google.com>
Date: Thu, 13 Aug 2020 16:47:55 -0600
Subject: [PATCH 2/2] style: rename mixins

remove 'theme' from mixin names
---
 packages/mdc-segmented-button/segment/_segment.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/mdc-segmented-button/segment/_segment.scss b/packages/mdc-segmented-button/segment/_segment.scss
index 8d10ba251ec..ea07da9bd17 100644
--- a/packages/mdc-segmented-button/segment/_segment.scss
+++ b/packages/mdc-segmented-button/segment/_segment.scss
@@ -37,8 +37,8 @@
   @include touch-target.wrapper($query);
   @include elevation.overlay-common($query);
 
-  @include _unselected-themes($query);
-  @include _selected-themes($query);
+  @include _unselected($query);
+  @include _selected($query);
 
   .mdc-segmented-button__segment {
     @include base($query);
@@ -135,7 +135,7 @@
   }
 }
 
-@mixin _unselected-themes($query: feature-targeting.all()) {
+@mixin _unselected($query: feature-targeting.all()) {
   @include segment-theme.outline-color(segment-theme.$outline-color, $query);
   @include segment-theme.unselected-ink-color(
     segment-theme.$unselected-ink-color,
@@ -147,7 +147,7 @@
   );
 }
 
-@mixin _selected-themes($query: feature-targeting.all()) {
+@mixin _selected($query: feature-targeting.all()) {
   @include segment-theme.selected-ink-color(
     segment-theme.$selected-ink-color,
     $query