🔹 Card-mod - Add css styles to any lovelace card

please help me out with this probably simplest thing: how to change the badge color (using a templated color, not the theme variables) on a core type: tile card. These 2 mods work fine, but are not yet what I am looking for

        card_mod:
          style: |
            ha-card {
              background-color: {{states('sensor.xxx_background_color')}};
            }
            .badge {
              --tile-badge-icon-color: {{states('sensor.xxx_icon_color')}};
            }

using inspector I found the obvious --tile-badge-background-color on ha-tile-badge but I cant make that happen if I add it to

            ha-tile-badge {
              --tile-badge-background-color: {{states('sensor.xxx_background_color')}};
            }

or even the .badge


            .badge {
              --tile-badge-icon-color: black;
              --tile-badge-background-color: green;
              /*background-color: black*/
            }

using background-color in .badge has an effect, but the wrong effect. as it does color the complete background of the badge, and not the badge itself…

I did manage to set the border of the image and filter it based on state:

            .icon-container {
              border: solid {{states('sensor.xxx_background_color')}} 4px;
              border-radius: 50px;
            }
            ha-tile-image {
              filter: {{'grayscale(1)' if not is_state(config.entity,'home') else 'none'}};
            }

But, the color of the badge background remains to be found…
please have a look?

update

heck, I keep forgetting !important

            .badge {
              --tile-badge-icon-color: black;
              --tile-badge-background-color: green !important;
              /*background-color: black*/
            }

makes it work, and overrides the theme colors.

one challenge left, why the filter is applied in Chrome, but not in Safari…