Card lavatrice

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        entity: binary_sensor.lavatrice_run
        primary: |
          {% if is_state (config.entity, 'on') %}
          {{ states('sensor.lavatrice_active_power') | round(0) }} W
          {% else %}
            Lavatrice
          {% endif %}
        secondary: |
          {% if is_state (config.entity, 'on') %}
          {{states('sensor.lavatrice_fase_programma')}}
          {% else %}
            Spenta
          {% endif %}
        icon: mdi:washing-machine
        badge_icon: |
          {% if is_state (config.entity, 'on') %}
            mdi:tshirt-crew
          {% endif %}
        badge_color: red
        tap_action:
          action: none
        hold_action:
          action: none
        icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
        fill_container: true
        layout: horizontal
        multiline_secondary: false
        card_mod:
          style: |
            ha-card {
              background: none !important;
              border: none;
              box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
              height: 66px !important;
              --card-primary-color: black; --card-secondary-color: black;
            }
            ha-state-icon {
              animation: {{ 'shake 400ms ease-in-out infinite' if is_state('binary_sensor.lavatrice_run', 'on') }};
              transform-origin: 50% 58%;
              clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%,
             65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
            } @keyframes shake {
              0%, 100% { transform: translate(0, 0) rotate(0); }
              20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
              40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
              60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
              80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
            }
      - type: custom:mushroom-template-card
        icon: mdi:washing-machine
        entity: binary_sensor.lavatrice_run
        icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
        tap_action:
          action: navigate
          navigation_path: /bubble-d/lavatrice
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                background: none !important;
                box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
              }
            .: |
              ha-card {
                background: none !important;
                box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
                border: none;

                height: 66px !important;
                top: -74px;
              }
              ha-state-icon {
                {{ 'animation:spin 1s linear infinite;' if is_state('binary_sensor.lavatrice_run', 'on') }};
                transform-origin: 50% 58%;
                clip-path: circle(21.7% at 50% 58%);
              }
    card_mod:
      style: |
        ha-card {
          background-image: url( '/local/ic/lavatrice.png' );
          background-blend-mode: overlay;
          background-position: top;
          background-repeat: no-repeat;
          background-size: 105%;
          background-color: rgba(var(--rgb-card-background-color),0.3);
          position: relative;
          height: 66px !important;
          border: none;
          box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
        }