Sub button background-color change 3 conditions (or more)

[auclairp]

For a bubble-button is it possible to display a different background-color for more than 2 or 3 conditions.

Example

• = 0: gray
• < 1000: green
• < 2000: yellow

• 2000: red

I try to use the style contained in the reference, but it only works for one condition

styles: | .bubble-sub-button-1 { opacity: 1 !important; background-color: ${hass.states['sensor.energy_meter_ac_power_ab'].state > '2000' ? 'rgb(241, 148, 138)' : 'transparent'} !important; }
THANKS

[MrBearPresident]

.bubble-sub-button-1 { 
  background: ${hass.states['sensor.energy_meter_ac_power_ab'].state > 2000 ? '#EC1616AA'
                : hass.states['sensor.energy_meter_ac_power_ab'].state > 1000 ? '#FFD000AA' 
                : hass.states['sensor.energy_meter_ac_power_ab'].state > 1 ? '#O5CE37AA' 
                         : '#9D9D9DAA'} !important; 
}                        

---

_{If this solves your issue, please mark this as solved.}

[auclairp]

A big thank you. it works