Bubble-card type Separator, the sub-button style does not recognise states.

[J-PD]

Hi,

I'm rebuilding my dashboard using Bubble cards and was able to overcome all my styling challenges except for this one, I hoop someone can help me out.

I created a Bubble card with type Separator and added a sub-button to turn on/off a media player. I added following to the Custom styles/templates configuration.

`type: custom:bubble-card
card_type: separator
name: Tuin
icon: mdi:music
styles: |
.bubble-line {
opacity: 0.8 !important;
height: 4px;
background-color: white !important;
margin-right: 14px;
}
.bubble-sub-button-icon {
--mdc-icon-size: 30px !important;
color: ${state === 'on' ? 'rgb(0, 250, 0)' : 'rgb(250, 0, 0)' } !important ;
}
.bubble-sub-button {
background-color: ${state === 'on' ? 'rgb(0, 70, 0)' : 'rgb(70, 0, 0)' } !important ;
}
card_layout: large
sub_button:

• entity: switch.sh150_y002
  icon: mdi:power
  show_state: true
  tap_action:
  action: toggle
  `

Everything works as I want except that the color of the sub-button (.bubble-sub-button and .bubble-sub-button-icon) does not change with the state. I have no idea what I'm doing wrong at this point and was hoping that someone can point me in the good direction.

This is how it looks on my dashboard when the media player is power off,

and when the media player is power on I get this where the sub-button should be green in stead of red.

[MrBearPresident]

'state' is linked to the main entity of the bubble-card.
You have to use hass.states['entityID'].state instead.

---

^{If this solves your issue please mark it as solved and close it.}

[J-PD]

Thank you, that was indeed the solution,

Thanks again for this super fast answer .