Изменить цвет содержимого в Mat Expansion при наведении и фокусировке

Question

Я пишу css для изменения цвета текста и индикатора стрелки на фокусе и наведении. Однако стрелка индикатора действует отдельно. Я хочу, чтобы это изменилось, когда вы наводите курсор на всю панель. В настоящее время стрелочный индикатор изменяется только при наведении на него курсора. В основном, когда вся панель имеет фокус, или при наведении курсора измените заголовок и индикатор на css: https://stackblitz.com/edit/angular-imycgv?file=styles.css

.mat-expansion-indicator:hover::after,
.mat-expansion-indicator:focus::after{
  color: yellow;
}

.mat-expansion-panel:hover,
.mat-expansion-panel:focus{
  background-color: red;
}
.mat-expansion-panel-header-description:hover, .mat-expansion-panel-header-title:hover,
.mat-expansion-panel-header-description:focus, .mat-expansion-panel-header-title:focus{
  color: orange;
}
    }

Answer 1

Для достижения ожидаемого результата используйте опцию ниже индикатор расширения матов не является прямым потомком панели, поэтому на панели, меняйте цвет индикатора

.mat-expansion-panel:hover  .mat-expansion-indicator::after,
.mat-expansion-panel:focus  .mat-expansion-indicator::after{
  color: yellow;
}

коды и коробка для справки - https://codesandbox.io/s/angular-hh3oz