Merge styles in templates

[warmfire540]

Checklist

• [x] I updated the card to the latest version available
• [x] I cleared the cache of my browser

Describe the bug Most likely my setup is just wrong - I am having 2 templates and I want to have them both apply styles based on different things. However sometimes all the styles from one or the other or used, or I get different results based on template order, or if I use the id functionality to "merge" states. However I'm not sure how this applies to styles.

Version of the card Version: 4.1.2

To Reproduce I have a card based on a light entity

type: "custom:button-card"
template:
  - card_room
  - yellow_device_on
  - red_climate_problem_on
name: Office
entity: light.office_light
icon: mdi:controller

one template applies styles to different places on the card:

---
yellow_device_on:
  state:
    - styles:
        icon:
          - color: "rgba(var(--color-yellow),1)"
        label:
          - color: "rgba(var(--color-yellow-text),1)"
        name:
          - color: "rgba(var(--color-yellow-text),1)"
        img_cell:
          - background-color: "rgba(var(--color-yellow), 0.2)"
        card:
          - background-color: "rgba(var(--color-background-yellow),var(--opacity-bg))"
      value: "on"
      id: "on"

another JUST modifies the label

---
red_climate_problem_on:
  label: '[[[ return states[variables.temperature_entity].state + "°F - " + states[variables.humidity_entity].state + "%"  ]]]'
  state:
    - styles:
        label:
          - color: "rgba(var(--color-red-text),1)"
      operator: template
      value: >
        [[[ return states[variables.temperature_entity].state > 80 ||  states[variables.humidity_entity].state > 80 ]]]
      #id: "on"
      id: "label"
  triggers_update:
    - "[[[ return variables.temperature_entity; ]]]"
    - "[[[ return variables.humidity_entity; ]]]"

I'd like the red label template to overide just the template of the yellow one, however the yellow one takes precedence

Swapping order of the templates produces same result.

If i use same id on both, then: if the order is

- red_climate_problem_on
- yellow_device_on

the yellow is activated instead when the red one is activated, not based on "on".

If i swap order, it even affects not related cards

Screenshots included in repro steps

Expected behavior A way for all the yellow styles to apply, but me to override just one (label). Like this:

However, when the light is OFF - I want it to stay just red label.

Desktop (please complete the following information):

• Browser [e.g. chrome, safari]: chrome
• Version [e.g. 22]: 121.0.6167.161

Additional context Add any other context about the problem here.