Targetbar overwriting backgroundbar

[filikun]

Hey! I'm trying to have one color on the targetbar, another on the rest of the bar and a completely different background. I can change the filled bar with the original color option and the background (non-filled) with the bar-card-backgroundbar but whenever I set at color in bar-card-targetbar it changes color on the bar-card-backgroundbar to the same as targetbar.

Example:

type: custom:stack-in-card
cards:
  - type: custom:bar-card
    color: var(--ios-blue)
    positions:
      name: 'off'
      icon: 'off'
    entities:
      - entity: sensor.carbon_dioxide_office
        max: 2500
        target: 500
    entity_row: true
    card_mod:
      style: |-
        bar-card-targetbar {
          background-color: red;
          opacity: 1;
        }
        bar-card-backgroundbar {
          opacity: 1;
          background-color: black;
        }