how to have multiple state colors?

[platini76]

.bubble-sub-button-1 > ha-icon {
color: ${hass.states['sensor.nuki_porta_bocchio_battery'].state > '50' ? 'green' : 'red'} !important;
}

I want to have a state color for 50 to 100, one for 20 to 50 and one for 0 to 20
how to have them on this mod?
thanks for help

[petanque]

This works for me:

color: ${hass.states['sensor.radiator_stue_battery'].state < 10 ? 'red' : (hass.states['sensor.radiator_stue_battery'].state <= 20 ? 'yellow' : 'green')} !important;

[platini76]

are you shure that this can work?
.bubble-icon {
color: ${hass.states['lock.porta_fronte_bocchio_lock'].state === 'locked' ? 'lightred' : 'lightgreen'} !important;
}
.bubble-sub-button-1 { .bubble-sub-button-1 > ha-icon {
color: ${hass.states['sensor.porta_fronte_bocchio_batteria'].state < 10 ? 'red' : (hass.states['sensor.porta_fronte_bocchio_batteria'].state <= 20 ? 'yellow' : 'green')} !important;
} ${icon.setAttribute("icon", hass.states['lock.porta_fronte_bocchio_lock'].state === 'locked' ? 'mdi:lock' : 'mdi:lock-open')}