In my html file i am passing value for --is-item-status as :-

<ion-label class="textColor label-md black-shade-light" style="--is-item-status: {{item.status}}" >{{item.status | formatEnum | async}}</ion-label>

(Note:- this is populated inside *ngFor condition).

in the browser i am able to see the value getting populated as :-

In my scss file i have code like :-

.textColor {
  @if var(--is-item-status) ==  'INVOICE_OPEN' {
    color: blue;
  } @else if var(--is-item-status) == ('PAYMENT_STATUS_CANCELLED'  or 'INVOICE_CANCELLED' or 'ORDER_CANCELLED') {
    color: red;
  } @else if var(--is-item-status) == ('PAYMENT_STATUS_PARTLY_APPLIED' or 'INVOICE_PARTLY_PAID' or 'ORDER_CLOSED') {
    color: black;
  } @else if var(--is-item-status) == ('PAYMENT_STATUS_APPLIED' or 'INVOICE_PARTLY_PAID' or 'ORDER_INVOICED') {
    color: green;
  }  @else {
    color: yellow;
  }
}

But the if conditions are not getting satisfied. Could someone tell me what am i doing wrong in this?