Giorni a Natale

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:pine-tree
    icon_color: green
    primary: |
      {% set midnight = today_at() %}
      {% set event = states('input_datetime.natale') | as_datetime | as_local %}
      {% set delta = event - midnight %}
      {% if delta.days == 0 %}
        Oggi
      {% elif delta.days == 1 %}
        Domani
      {% elif delta.days == 2 %}
        Dopodomani
      {% else %}
        {{ delta.days }} giorni
      {% endif %}
    secondary: |
      {% set midnight = today_at() %}
      {% set event = states('input_datetime.natale') | as_datetime | as_local %}
      {% set delta = event - midnight %}
      {% if 0 <= delta.days <= 2 %}
        é Natale
      {% else %}
        a Natale
      {% endif %}
    card_mod:
      style: |
        ha-card {
          background: none !important;
        }
  - type: custom:mushroom-template-card
    icon: mdi:star-four-points
    icon_color: yellow
    primary: Star
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            background: none !important;
            width: 66px;
            top: -66px;
          }
          ha-state-icon {
            animation: star 8s ease infinite alternate;
          }
          @keyframes star {
            0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
            50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
          }
  - type: custom:mushroom-template-card
    icon: mdi:gift
    icon_color: red
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
            --icon-size: 25px;
            top: 22px;
            left: 8px;
          }
        .: |
          ha-card {
            background: none !important;
            width: 66px;
            top: -132px;
          }
          ha-state-icon {
            animation: surprise 4s ease infinite;
          }
          @keyframes surprise {
            0%, 20%, 100% { transform: translateY(0); }
            2.5% { transform: translateY(-2px) rotate(-27deg); }
            5% { transform: translateY(-2px) rotate(21deg); }
            7.5% { transform: translateY(-2px) rotate(-15deg); }
            10% { transform: translateY(-2px) rotate(9deg); }
            12.5% { transform: translateY(0); }
            15% { transform: translateY(-1.2px) }
          }
card_mod:
  style: |
    ha-card {
      height: 60px;
      background: none !important;
      border: 2px solid rgba(255, 69, 69, 1);
    }