Heading Card-mod

I want to change the color of the badges based on the numeric value of a sensor.
< 0 green otherwise purple

I’m reading and trying now 2 days to figure out how-o. However due lack of knowledge but i want to learn.
What i’m i doing wrong. I see the value with the icon but it stay’s white.

type: heading
icon: mdi:fridge
heading: Stroomtotaal
heading_style: subtitle
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: sensor.p1_meter_3c39e72b4f9a_active_power
    icon: mdi:power-plug
card_mod:
  style:
    state-badge $: |
      ha-state-icon {
        {% if states('sensor.p1_meter_3c39e72b4f9a_active_power')|int < 0 %}
        color: green;
        {% else %}
        color: red;
        {% endif %}
      }