:root selector is not working in the Angular component

I'd like to try to use css variables in my Angular 11 component.

<div class="main-content">
  <a>Test Link</a>
</div>

With this app.component.css

div.main-content{
  --main-color: red
}

a{
  color: var(--main-color);
}

But if I try to use :root in my css link is black.

:root {
  --main-color: red
}

a{
  color: var(--main-color);
}

The :root selector matches the document's root element.

Why it doesn't match in my case?

UPDATE If I put :root to default styles.css in angular project that is included globally everything works. What's wrong with my app.component.css?