perf(material/button): Use > combinator instead of descendent combinator in more selectors.

Author: kseamon

src/material/button/_button-base.scss

@@ -74,11 +74,11 @@
     background-color: token-utils.slot($ripple-color-token, $fallbacks);
   }
 
-  .mat-mdc-button-persistent-ripple::before {
+  & > .mat-mdc-button-persistent-ripple::before {
     background-color: token-utils.slot($state-layer-color-token, $fallbacks);
   }
 
-  &.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before {
+  &.mat-mdc-button-disabled > .mat-mdc-button-persistent-ripple::before {
     background-color: token-utils.slot($disabled-state-layer-color-token, $fallbacks);
   }
 
@@ -124,7 +124,7 @@
   $touch-target-size-token,
   $touch-target-display-token,
   $fallbacks) {
-  .mat-mdc-button-touch-target {
+  & > .mat-mdc-button-touch-target {
     position: absolute;
     top: 50%;
     height: token-utils.slot($touch-target-size-token, $fallbacks);
@@ -170,7 +170,7 @@
     }
   }
 
-  .mdc-button__label + .mat-icon {
+  & > .mdc-button__label + .mat-icon {
     margin-right: $icon-offset;
     margin-left: $icon-spacing;
 

src/material/button/button.scss

@@ -78,7 +78,7 @@ $fallbacks: m3-button.get-tokens();
   text-transform: token-utils.slot(button-text-label-text-transform, $fallbacks);
   font-weight: token-utils.slot(button-text-label-text-weight, $fallbacks);
 
-  &, .mdc-button__ripple {
+  &, & > .mdc-button__ripple {
     border-radius: token-utils.slot(button-text-container-shape, $fallbacks);
   }