Card vacuum

type: custom:mushroom-template-card
entity: vacuum.vacky
primary: |
  {% if is_state (config.entity, 'docked') %}
   Vacky
  {% else %}
    In pulizia {{ state_attr('vacuum.vacky', 'battery_level')}} %
  {% endif %}
picture: /local/ic/vacuum.png
tap_action:
  action: navigate
  navigation_path: /bubble-d/vacky
secondary: |
  {% set speed = state_attr('vacuum.vacky', 'suction_grade') or '' %}
  {% if speed == 3 %}
  {% set vel = 'Turbo' %}
  {% elif speed == 2 %}
  {% set vel = 'Media' %}
  {% elif speed == 1 %}
  {% set vel = 'Standard' %}
  {% elif speed == 0 %}
  {% set vel = 'Silenziosa' %}
  {% endif %}
  {% if is_state (config.entity, 'docked') %}
    alla base
  {% else %}
    Potenza {{ vel }}
  {% endif %}
fill_container: false
card_mod:
  style:
    mushroom-state-info$: |
      .primary {
        padding-left: 0px;
        font-family: 'Montserrat', cursive;
        --card-primary-font-size: 14px;
      }
      .secondary {
        padding-left: 0px;
        font-family: 'Montserrat', cursive;
        --card-secondary-font-size: 10px;
      }
    .: |
      mushroom-shape-avatar {
        display: flex;
        animation: {{ 'wobbling 0.5s ease-in-out infinite alternate' if not is_state('vacuum.vacky', 'docked') }};
      }
      @keyframes wobbling {
        0% {
          transform: rotate(-20deg);
        }
        100% {
          transform: rotate(20deg);
        }
      }
      ha-card {
        background-image: url( '{{ state_attr( "vacuum.vacky", "entity_picture" ) }}' );
        background-blend-mode: overlay;
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 80%;
        background-color: rgba(var(--rgb-card-background-color),0.3);
        position: relative;
        border: none;
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
        --card-primary-color: black; --card-secondary-color: black;
        background: {{ 'rgba(var(--rgb-amber), 0.7); --card-primary-color: black; --card-secondary-color: black; ' if not is_state('vacuum.vacky', 'docked')}};
        animation: {{ 'ping 2s ease-out infinite;' if not is_state('vacuum.vacky', 'docked')}};
        #transform: scale(1);
        height: 66px !important;
      }
      @keyframes ping {
        0% {
          box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
        }
        100% {
          box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
        }
      }