Decluttering template Mushroom Battery

decluttering_templates:
  mushroom_battery:
    default:
      - entity: sensor.pixel_7_battery_level
      - name: Pixel 7
    card:
      type: custom:mushroom-template-card
      entity: '[[entity]]'
      icon: mdi:battery-high
      icon_color: |
        {% if states(config.entity) | int <= 30 %}
        red
        {%elif states (config.entity) | int <= 80 %}
        blue
        {% else %}
        green
        {% endif %}
      primary: '[[name]]'
      secondary: |
        {% set status = config.entity|replace("_level", "_state") %}
        {% if is_state(status, 'charging') %}
          in carica al {{ states(config.entity) }} %
        {% else %}
          Batteria al {{ states(config.entity) }} %
        {% endif %}
      card_mod:
        style:
          mushroom-shape-icon$: |
            .shape {
              {% set status = config.entity|replace("_level", "_state") %}
              {% if is_state(status, 'charging') %}
              --shape-animation: ping 3s infinite;
              {% else %}
              {% endif %};
            }
            @keyframes ping {
              {% if states(config.entity) | int <= 30 %}
              0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
              {%elif states (config.entity) | int <= 80 %}
              0% {box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0.7);}
              {% else %}
              0% {box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7);}
              {% endif %}
              70% {box-shadow: 0 0 0 10px transparent;}
              100% {box-shadow: 0 0 0 0 transparent;}
            }
          .: |
            ha-state-icon {
              {% set status = config.entity|replace("_level", "_state") %}
              {% if is_state(status, 'charging') %}
              animation: charge 3s steps(1) infinite;
              {% else %}
              {% endif %};
            }
            @keyframes charge {
              0% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
              20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
              40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
              60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
            }