title: Angular Material Select: How to customize .mat-select-panel itself
body: <p>I have this structure of html using Angular Material Select</p>
  
  <pre><code>&lt;mat-form-field class="year-drpdwn-vacay-stock"&gt;
      &lt;mat-select placeholder="Year"&gt;
          &lt;mat-option&gt;None&lt;/mat-option&gt;
          &lt;mat-option *ngFor="let yr of year"  [value]="yr"&gt;{{yr}}&lt;/mat-option&gt;
      &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I placed a class because I also use Select in other components. I tried adding </p>
  
  <pre><code>::ng-deep .mat-select-panel {
      margin-top: 20%; 
  } 
  </code></pre>
  
  <p>in CSS to customize, but the problem is, other components containing another select box also gets affected (inherits the margin-top CSS)</p>
  
  <p>Currently I have this CSS</p>
  
  <pre><code>.year-drpdwn-vacay-stock mat-select.mat-select :host ::ng-deep .mat-select-panel {
      margin-top: 20%; 
  }
  </code></pre>
  
  <p>But it still doesn't work. </p>
  
  <blockquote>
    <p>UPDATE</p>
  </blockquote>
  
  <p>Goal: I want the options panel to move a bit downward upon opening the select box which is why I want <code>.mat-select-panel</code> to have a top margin of 20%</p>