Same effects working in chips and cards

[sorcer1]

Hi,
I tried this example and it works in a classic card but the code doesn't work when it's chips.

Working example :

type: custom:mushroom-template-card
icon: mdi:alarm-light
icon_color: red
primary: Alert
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: alert 0.8s infinite;
      }
      @keyframes alert {
        0%, 100% { color: rgb(var(--rgb-orange)); }
        50% { clip-path: polygon(0% 55%, 25% 55%, 25% 35%, 35% 25%, 50% 18%, 65% 20%, 75% 35%, 75% 55%, 100% 55%, 100% 100%, 0 100%); color: rgb(var(--rgb-red)); }
      }
      .shape {
        --shape-animation: alert-shape 0.8s infinite;
      }
      @keyframes alert-shape {
        0%, 100% { --shape-color: rgba(var(--rgb-orange), 0.2); }
        60% { --shape-color: rgba(var(--rgb-red), 0.2); }
      }

Same exemple doesn't work in chips :

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: sensor.count_all_doors_open
    icon: mdi:door
    content: "{{ states('sensor.count_all_doors_open') }}"
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: alert 0.8s infinite;
          }
          @keyframes alert {
            0%, 100% { color: rgb(var(--rgb-orange)); }
            50% { clip-path: polygon(0% 55%, 25% 55%, 25% 35%, 35% 25%, 50% 18%, 65% 20%, 75% 35%, 75% 55%, 100% 55%, 100% 100%, 0 100%); color: rgb(var(--rgb-red)); }
          }
          .shape {
            --shape-animation: alert-shape 0.8s infinite;
          }
          @keyframes alert-shape {
            0%, 100% { --shape-color: rgba(var(--rgb-orange), 0.2); }
            60% { --shape-color: rgba(var(--rgb-red), 0.2); }
          }
grid_options:
  columns: full
  rows: 1
alignment: center