Bubble card wont change color

i am trying to change a bubble card color based on the value of sensor. when i run the text of the code in debug, it correctly yields the green, yellow, red. but when i input in styles, it doesnt change. if i manually type green, yellow, red in styles, it will change properly.

styles: |-
  .bubble-sub-button {
        font-size: 16px !important;
        }
  .bubble-button-background {
    background-color: |
      {% if states("sensor.core_600s_pm2_5") | int <= 5 %} 
        green
      {% elif states("sensor.core_600s_pm2_5") | int <= 10 %}
        yellow
      {% elif states("sensor.core_600s_pm2_5") | int > 10 %}
        red
      {% endif %}
  }
1 Like