Why is Angular build prod adding moz to my readonly class selector, why is the class not applied and how can I fix it?

I am trying to style non readonly text areas. Although it's working fine locally with ng serve, the class is not being applied at all when deploying with ng build --prod.

This is the CSS code:

.my-class:not(:read-only) {
    ...;
}

With ng serve, the browser dev console displays the following css:

.my-class[_ngcontent-c11]:not(:-moz-read-only) { 
    ...;
}

.my-class[_ngcontent-c11]:not(:read-only) { 
    ...;
}

However, when I use ng build --prod, the CSS I get is

.my-class:not(:-moz-read-only),
.my-class:not(:read-only) { 
    ...;
}

Unfortunately, the last version is simply not working. The style is not applied to the element. If I use Chrome's override feature and remove the .my-class:not(:-moz-read-only), line completely, it works fine.

Why is the code different from ng serve to ng build --prod, why isn't the style being applied, and what can I do to fix it?

The angular version (project and CLI) I am using is 10.2.0 and I am using SCSS.