Trouble with conditional CSS statement in slider-button-card

I am trying to use CSS within custom:slider-button-card to change the icon color depending on if the entity is ‘on’ or ‘off’. I can’t figure out why my code isn’t working. Basically, I want the --icon-color: to be one color if the entity is on, and another if it is off.

type: custom:slider-button-card
  direction: left-right
  background: gradient
  use_state_color: false
  use_percentage_bg_opacity: true
  show_track: false
  toggle_on_click: false
  force_square: true
show_name: true
show_state: true
compact: false
  show: true
  use_state_color: false
    action: more-info
  icon: ''
  mode: custom
  icon: mdi:power
  show: true
  show_spinner: true
    action: toggle
entity: light.basement_office_light_switch
style: |
  :host {--slider-color: CornflowerBlue !important;}
  :host {--action-icon-color-off: Gainsboro !important;}
  :host {--action-icon-color-on: gold !important;}
  :host {
    --icon-color: {% if is_state('light.basement_office_light_switch', 'on') %}red{%else%}green{%endif%};

Did you ever solve this, as it’s driving me nuts trying to figure it out too!