Как создать собственное закругленное подчеркивание на вкладке «Угловой материал» ⇐ CSS

[Anonymous]

Наши дизайнеры хотят, чтобы мы реализовали подчеркивание следующим образом:





По сути, это верхняя половина прямоугольника с закругленными углами. Однако мы используем Angular Material, и мне не удалось стилизовать существующий компонент (https://material.angular.io/comComponents/tabs/examples)

Мне удалось сделать подчеркивание по умолчанию толще и закруглить углы, установив для них переменные:

--mdc-tab-indicator-active-indicator-height: 6px;
--mdc-tab-indicator-active-indicator-shape: 10px;

Вот что у меня сейчас есть:



Я даже не знаю, как найти то, что я пытаюсь здесь сделать. Любые советы приветствуются, прежде чем я пропущу использование компонента Material и создам что-нибудь самостоятельно.