MatTabGroup pagination chevron incorrect color when using backgroundColor property

[MarkoSkugor]

What is the expected behavior?
mat-tab-group pagination chevron should be correct contrast color

What is the current behavior?
https://stackblitz.com/angular/manempdpqjo?file=src%2Fapp%2Ftab-group-theme-example.ts

CSS selector for mat-tab-header-pagination-chevron is broken for mat-tab-group and only works for mat-tab-nav-bar

Screenshot from Angular Material docs example:

This selector specifically is broken as .mat-tab-header-pagination is not a direct child of .mat-tab-group

What are the steps to reproduce?
go to this stackblitz and shrink screen on blue background mat-tab-group until the pagination chevrons appear
https://stackblitz.com/angular/manempdpqjo?file=src%2Fapp%2Ftab-group-theme-example.ts

Which versions of Angular, Material, OS, TypeScript, browsers are affected?
11 (confirmed this was working in 10), all browsers and OS affected

[jelbourn]

The issue here is with this CSS selector applies the desired border color when changing the background color:

.mat-tab-group.mat-background-primary > .mat-tab-header-pagination .mat-tab-header-pagination-chevron

The problem is that .mat-tab-header-pagination is not a direct child of .mat-tab-group, mat-tab-header is in between.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}