title: How to disable or overwrite cdk-focused in Angular
body: <p>I am working on mat-button-toggle-group for which I modified existing css by overwriting mat-button-toggle-checked class like below. Now, when I toggle between buttons the css is not working till I get focus out and that is because 2 cdk classes 'cdk-focused' and 'cdk-program-focused' are being added when the clicked button is on focus . Is there any way that I can make these classes disable or make them not apply or overwrite them with same css of mat-button-toggle-checked?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-button-toggle-group #group="matButtonToggleGroup" value="line"&gt;
      &lt;mat-button-toggle (click)="showLine()" value="line"&gt;Line&lt;/mat-button-toggle&gt;
      &lt;mat-button-toggle (click)="showChart()" value="chart"&gt;Chart&lt;/mat-button-toggle&gt;
  &lt;/mat-button-toggle-group&gt;
  </code></pre>
  
  <p>and css</p>
  
  <pre class="lang-css prettyprint-override"><code>mat-button-toggle-group {
      border: solid 1px #d1d8de;
      width:260px;
      height:41px;
      text-align: center;
      .mat-button-toggle-checked{
        background-color: #ffffff;
        font-weight: bold;
      }
      .mat-button-toggle{
        width:50%;
        font-size: 15px;
      }
    }
  </code></pre>