style the focus state of an angular mat-slide-toggle

Question

What class do I use to style the focus state of a mat-slide-toggle?

From what I can tell via Inspect in the browser it might be something like ::ng-deep .mat-ripple-element .mat-slide-toggle-persistent-ripple but that's not working. I've tried a couple variations of ripple but I can't seem to find the right one, if I'm even looking in the right direction.

What I want is to recolor and shrink the diameter of the pink circle below, I just can't figure out how to select it for the SASS.

HTML:

<mat-slide-toggle (change)="onChange($event)">{{ variable-here }}</mat-slide-toggle>

Answer 1

I am assuming your component is an encapsulated component...

$primary-color: #2eb66fl
:host{
/deep/ .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
  background-color: rgba($primary-color, 0.54);
}
/deep/ .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
 background: $primary-color;
}

below code is to style ripple.

/deep/ .mat-slide-toggle.mat-checked .mat-ripple-element {
    background-color: $primary-color;
    }    
   }