perf(material/checkbox): Optimize css selectors (#30386)

(cherry picked from commit e4388c6)

Author: kseamon

src/material/checkbox/_checkbox-common.scss

@@ -457,15 +457,15 @@ $_fallback-size: 40px;
   // MDC expects `.mdc-checkbox__ripple::before` to be the state layer, but we use
   // `.mdc-checkbox__ripple` instead, so we emit the state layer slots ourselves.
   &:hover {
-    .mdc-checkbox__ripple {
+    > .mdc-checkbox__ripple {
       @include token-utils.create-token-slot(opacity, unselected-hover-state-layer-opacity);
       @include token-utils.create-token-slot(
         background-color,
         unselected-hover-state-layer-color
       );
     }
 
-    .mat-mdc-checkbox-ripple .mat-ripple-element {
+    > .mat-mdc-checkbox-ripple .mat-ripple-element {
       @include token-utils.create-token-slot(
         background-color,
         unselected-hover-state-layer-color
@@ -474,7 +474,7 @@ $_fallback-size: 40px;
   }
 
   .mdc-checkbox__native-control:focus {
-    & ~ .mdc-checkbox__ripple {
+    & + .mdc-checkbox__ripple {
       @include token-utils.create-token-slot(opacity, unselected-focus-state-layer-opacity);
       @include token-utils.create-token-slot(
         background-color,
@@ -490,8 +490,8 @@ $_fallback-size: 40px;
     }
   }
 
-  &:active .mdc-checkbox__native-control {
-    & ~ .mdc-checkbox__ripple {
+  &:active > .mdc-checkbox__native-control {
+    & + .mdc-checkbox__ripple {
       @include token-utils.create-token-slot(opacity, unselected-pressed-state-layer-opacity);
       @include token-utils.create-token-slot(
         background-color,
@@ -508,7 +508,7 @@ $_fallback-size: 40px;
   }
 
   &:hover .mdc-checkbox__native-control:checked {
-    & ~ .mdc-checkbox__ripple {
+    & + .mdc-checkbox__ripple {
       @include token-utils.create-token-slot(opacity, selected-hover-state-layer-opacity);
       @include token-utils.create-token-slot(
         background-color,
@@ -525,7 +525,7 @@ $_fallback-size: 40px;
   }
 
   .mdc-checkbox__native-control:focus:checked {
-    & ~ .mdc-checkbox__ripple {
+    & + .mdc-checkbox__ripple {
       @include token-utils.create-token-slot(opacity, selected-focus-state-layer-opacity);
       @include token-utils.create-token-slot(
         background-color,
@@ -541,8 +541,8 @@ $_fallback-size: 40px;
     }
   }
 
-  &:active .mdc-checkbox__native-control:checked {
-    & ~ .mdc-checkbox__ripple {
+  &:active > .mdc-checkbox__native-control:checked {
+    & + .mdc-checkbox__ripple {
       @include token-utils.create-token-slot(opacity, selected-pressed-state-layer-opacity);
       @include token-utils.create-token-slot(
         background-color,
@@ -561,7 +561,7 @@ $_fallback-size: 40px;
   // Needs extra specificity to override the focus, hover, active states.
   .mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive & {
     .mdc-checkbox__native-control ~ .mat-mdc-checkbox-ripple .mat-ripple-element,
-    .mdc-checkbox__native-control ~ .mdc-checkbox__ripple {
+    .mdc-checkbox__native-control + .mdc-checkbox__ripple {
       @include token-utils.create-token-slot(
         background-color,
         unselected-hover-state-layer-color