washing machine

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: binary_sensor.lavatrice_run
    icon: mdi:washing-machine
    badge_icon: |
      {% if is_state (config.entity, 'on') %}
        mdi:tshirt-crew
      {% endif %}
    badge_color: red
    icon_color: "{{ 'orange' if is_state(entity, 'on') else 'disabled' }}"
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --icon-size: 44px;
            {{ '--shape-animation: ping 2s infinite'  if is_state(config.entity, 'on') }};
          }
          @keyframes ping {
            0% {box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7);}
            70% {box-shadow: 0 0 0 10px transparent;}
            100% {box-shadow: 0 0 0 0 transparent;}
          }
        .: |
          ha-card {
            height: 60px;
            border: none !important;
            background: none;
            box-shadow: none;
            margin-top: -3px;
          }
          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: none
    double_tap_action:
      action: none
    hold_action:
      action: none
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --icon-size: 45px;
            background: none !important;
          }
        .: |
          ha-card {
            background: none !important;
            border: none !important;
            box-shadow: none;
            width: 66px;
            top: -73px;
          }
          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 {
      height: 60px !important;
      background: none !important;
      border: none !important;
      border-radius: 14px;
      transform: scale(1.2);
    }