title: Change background-color of mat-button-focus-overlay without !important
body: <p>Angular Material documentation has something that I would like to reuse, and I would like to do it in correct way:
  <a href="https://material.angular.io/components/categories" rel="noreferrer">https://material.angular.io/components/categories</a>
  I would like to have buttons on the top bar with the same div.mat-button-focus-overlay which have:</p>
  
  <pre><code>.mat-button-focus-overlay {
     background-color: rgba(0,0,0,.12);
  }
  </code></pre>
  
  <p>No matter what I do everything I've got is this:</p>
  
  <pre><code>.mat-button-focus-overlay {
     background-color: rgba(63, 81, 181, 0.12);
  }
  </code></pre>
  
  <p>And this leaves me with the same color as a bar, so the overlay on hover is not visible. Example:
  <a href="https://stackblitz.com/edit/angular-lwmxw7" rel="noreferrer">https://stackblitz.com/edit/angular-lwmxw7</a></p>
  
  <p>How to do it in correct way? I wouldn't like to use any hacks, only best practices :)</p>
  
  <h2>EDIT:</h2>
  
  <p>I've found something strange... when I put this to scss file of the component:</p>
  
  <pre><code>body mat-toolbar.mat-toolbar button.mat-button div.mat-button-focus-overlay {
      background-color: rgba(0,0,0,0.12);
  }
  </code></pre>
  
  <p>It doesn't work, it looks like it doesn't even exist on the list of styles in browser (?), but the same code moved to style.scss works like a charm... Anyone knows why?</p>