how could I add a style to the mat-tab? It turns out that in a component I have two mat-tabs but I want to leave the mat-tabs with different style, is this feasible? Currently I have this css code where I want to add this style to one, but to another the one that angular has by default.

for example, I have a modified mat-tabs style like the following one, which I want to put in a tab of the two that I have in my component

host::ng-deep.mat-tab-label-container {
  overflow: visible ;
  margin-bottom: 6px ;
  .mat-tab-labels {
    background-color: transparent;
    justify-content: center;
    .mat-tab-label {
      height: 30px ;
      padding: 0px 50px ;
      min-width: 70px ;
      opacity: 1 ;
    }
    .mat-tab-label-active {
      background-color:  transparent ;
    }
  }
  .mat-tab-label-active{
    color: #43a9f8 ;
    opacity: 1 ;
  }
  .mat-tab-label:focus {
    color: #43a9f8 ;
    font-weight: 700 ;
    font-size: 15px ;
  }
  .mat-tab-label {
    color: #969da2 ;
    font-weight: 700 ;
    height: 30px ;
    font-size: 15px ;
  }
}
:host::ng-deep.mat-tab-group.mat-primary {
  .mat-ink-bar,
  .mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: transparent ;
    height: 4px ;
    &::before {
      content: '' ;
      display: block ;
      width: 30.5% ;
      background-color: #43a9f8 ;
      height: 6px ;
      border-radius: 10px ;
      left: 34.5% ;
      position: relative ;
  }
}
}
:host::ng-deep.mat-tab-body-content {
  padding: 15px 30px ;
  overflow: hidden ;
  height: auto;
}

To the other tab I want it to continue having the style of the main scc

.mat-tab-label-container {
  .mat-tab-labels {
    background-color: $primary-color;
    justify-content: center;
    .mat-tab-label {
      height: 65px;
      padding: 0px 15px;
      min-width: 70px;
      opacity: 1;
    }
    .mat-tab-label-active {
      background-color:  #f59c00;
    }
    .mat-tab-label, .mat-tab-link {
      font-size: 0.6875rem;
      color: #fff;   
      font-weight: 300;
    }
    .mat-tab-label-content {
      flex-direction: column;
      img {
        width: 21px;
        height: 21px;
      }
    }
  }
   .mat-ink-bar {
    visibility: hidden;
  }
}

.mat-tab-body-content {
  padding: 10px 30px !important;
  height: 325px;
}

I have tried adding the mat-tab-group in a class but it doesn't work for me.

<mat-tab-group class="blabla" dynamicHeight>
  <mat-tab label="Short tab">
    <div class="example-small-box mat-elevation-z4">
      Small content
    </div>
  </mat-tab>
  <mat-tab label="Long tab">
    <div class="example-large-box mat-elevation-z4">
      Large content
    </div>
  </mat-tab>
</mat-tab-group>

How could I have different styles on the mat-tabs?