Fixed bug in Sass.

Author: zelliott

src/material/core/focus-indicator/_focus-indicator.scss

@@ -8,58 +8,64 @@
 ///   }
 
 @mixin mat-strong-focus-indicators() {
-  $border-width: 2px;
+  // Reference to the root selector, used to simplify the nested selectors
+  // in this mixin.
+  $root-selector: #{&};
 
-  // Base styles for focus indicators.
-  & .mat-focus-indicator::before {
-    border-radius: 4px;
-    border: $border-width solid transparent;
-    box-sizing: border-box;
-    position: absolute;
-    pointer-events: none;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
+  // Border width of the focus indicators.
+  $border-width: 2px;
 
+  @at-root .mat-focus-indicator {
+    // Base styles for the focus indicators.
+    #{$root-selector} &::before {
+      border: $border-width solid transparent;
+      border-radius: 4px;
+      box-sizing: border-box;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+    
+    // By default, all focus indicators are flush with the bounding box of their
+    // host element. For particular elements (listed below), default inset/offset
+    // values are necessary to ensure that the focus indicator is sufficiently
+    // contrastive and renders appropriately.
 
-  // By default, all focus indicators are flush with the bounding box of their
-  // host element. For particular elements (listed below), default inset/offset
-  // values are necessary to ensure that the focus indicator is sufficiently
-  // contrastive and renders appropriately.
-  & .mat-focus-indicator {
-    &.mat-button-base::before,
-    &.mat-card::before,
-    &.mat-sort-header-button::before {
+    #{$root-selector} &.mat-button-base::before,
+    #{$root-selector} &.mat-card::before,
+    #{$root-selector} &.mat-sort-header-button::before {
       margin: $border-width * -2;
     }
 
-    &.mat-calendar-body-cell::before {
+    #{$root-selector} &.mat-calendar-body-cell::before {
       margin: $border-width * -1;
     }
 
-    &.mat-tab-link::before,
-    &.mat-tab-label::before {
+    #{$root-selector} &.mat-tab-link::before,
+    #{$root-selector} &.mat-tab-label::before {
       margin: $border-width * 2;
     }
-  }
 
-  // On focus, actually render the focus indicators. Defining a pseudo
-  // element's content will cause it to render.
-  & .mat-focus-indicator {
-    // Checkbox, Option, Slide Toggle
-    .cdk-focused.mat-checkbox &::before,
-    .cdk-focused.mat-radio-button &::before,
-    .cdk-focused.mat-slide-toggle &::before,
+    // Render the focus indicator on focus. Defining a pseudo element's
+    // content will cause it to render.
+    
+    // For checkboxes, radios, and slide toggles, render the focus indicator
+    // when the class .cdk-focused is present.
+    #{$root-selector} .cdk-focused.mat-checkbox &::before,
+    #{$root-selector} .cdk-focused.mat-radio-button &::before,
+    #{$root-selector} .cdk-focused.mat-slide-toggle &::before,
 
-    // Option
-    &.mat-option.mat-active::before,
+    // For options, render the focus indicator when the class .mat-active
+    // is present.
+    #{$root-selector} &.mat-active.mat-option::before,
 
-    // All other components
-    &:focus::before {
+    // For all other components, render the focus indicator on focus.
+    #{$root-selector} &:focus::before {
       content: '';
-    }
+    }      
   }
 }
 
@@ -80,7 +86,7 @@
 ///   }
 
 @mixin mat-strong-focus-indicators-theme($themeOrColor) {
-  & .mat-focus-indicator::before {
+  .mat-focus-indicator::before {
     border-color: if(
       type-of($themeOrColor) == 'map',
       mat-color(map_get($themeOrColor, primary)),