how to apply :root() variables from imported .css to angular component

Question

I would like to apply styles from a third-party UI-library: https://www.npmjs.com/package/@clr/ui to only a specific component in my app.

To achieve this, I set the ViewEncapsulation of the component to ShadowDom and import the .css in the apps' .scss file:

my-app.component.scss

@import '~@clr/ui/clr-ui.min.css';

unfortunately some of the variables defined in the .css seem to be undefined when checking it with the inspector in the browser, hence some styles are not correctly applied. The variables are definitely defined in the .css but they are part of a :root element.

Example part of ~@clr/ui/clr-ui.min.css':

:root {
  --clr-color-neutral-0: hsl(198, 0%, 100%);
  --clr-color-neutral-50: hsl(198, 0%, 98%);
}

Changing the ViewEncapsulation of the component to None makes it so all the styles are correctly applied but is not what I want as it will also affect other components.

Stackblitz: https://stackblitz.com/edit/clarity-datagrid-5-kcluqk?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.scss,src%2Fpeople.service.ts

How can I make this work?