Custom color for background mushroom card

Share your Projects! Dashboards & Frontend
1

have cover mushroom card with if state 4 colors depend to his state.
instead of var from my theme I want to add custom css gradient color.
when I replace the color - nothing happen - its just white. only my vars.
any suggestion?

var(–blue) to
background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(209,241,183,1) 51%);

- type: custom:mushroom-cover-card
    entity: cover.aqara_curtain_driver_e1_2
    show_position_control: true
    show_buttons_control: true
    fill_container: false
    show_tilt_position_control: false
    name: Curtain Living Room
    card_mod:
      style: |
        ha-card {
          {% if states['cover.aqara_curtain_driver_e1_2'].state == 'open' %}
          background-color: **var(--blue);**
               }
          :host { 
            --primary-text-color: black;
          }
          {% elif states['cover.aqara_curtain_driver_e1_2'].state == 'closed' %}
          background-color: var(--red);
                    }
          :host { 
            --primary-text-color: black;
          }
          {% elif states['cover.aqara_curtain_driver_e1_2'].state == 'opening' %}
          background-color: var(--yellow);
                    }
          :host { 
            --primary-text-color: black;
          }
          {% elif states['cover.aqara_curtain_driver_e1_2'].state == 'closing' %}
          background-color: var(--orange);
          {% endif %}
        }