Ionic (v4) properties not using scss variable values

I only just noticed this not working in my Ionic 4 Angular project

I have the following in the component scss file:

$text-area-padding: 2px;
 ion-textarea {
   --padding-top: $text-area-padding;
   --padding-bottom: $text-area-padding;
   --padding-start: $text-area-padding;
   --padding-end: $text-area-padding;  

    width: 100%;    
    min-height: $text-area-padding;
    overflow-x: hidden;
    overflow-y: auto;
    border: $border;  
 }

But when I look in dev tools, I see the following...

So, for some reason, the variable is not being applied to the Ionic custom properties.

This also happens on other Ionic elements.

Also, I get an error in the scss file if I try to use a CSS variable such as --text-area-padding: 2px;

Why does it not pick up the scss variable for these properties?