Merge styles in templates

[warmfire540]

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.

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

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.

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

Related Logs (can be found in the browser-console (F12)) Add related logs for the problem

Related Card Config Add the card config from ui-lovelace.yaml with the related problem

paste the yaml code here