declutter-racing-calendar-card

  racing-calendar-card:
    card:
      type: custom:mushroom-template-card
      entity: '[[sensor]]'
      primary: |
        {{ state_attr('[[sensor]]', 'session_name') }}
      secondary: |
        {{ states(entity) }}
      icon: '[[icon]]'
      icon_color: |
        {{ state_attr('[[sensor]]', 'icon_colour') }}
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            deviceID: this
            title: Upcoming events
            content:
              type: custom:atomic-calendar-revive
              enableModeChange: true
              entities:
                - entity: sensor.calendars
                  icon: mdi:calendar
                - entity: '[[calendarEntity]]'
              showMultiDay: false
              max_events: 5
              showRelativeTime: false
              showLocation: false
              maxDaysToShow: 365
              maxEventCount: 10
              showHiddenText: false
              startDaysAhead: -4
      card_mod:
        style: |
          ha-state-icon {
            {% if state_attr('[[sensor]]', 'icon_colour') == 'orange' %}
            animation: shake 1500ms infinite;
            {% elif state_attr('[[sensor]]', 'icon_colour') == 'yellow' %}
            animation: shake 750ms infinite;
            {% elif state_attr('[[sensor]]', 'icon_colour') == 'green' %}
            animation: wheelie 2s infinite;
            {% endif %}
          }
          @keyframes shake {
            0%, 100% { transform: translate(0, 0) rotate(0); }
            20%  { transform: translate(0.6px, -0.6px) rotate(-4deg); }
            40%  { transform: translate(-0.6px, 0.6px) rotate(4deg); }
            60%  { transform: translate(0.6px, 0.6px) rotate(-4deg); }
            80%  { transform: translate(-0.6px, -0.6px) rotate(4deg); }
          }
          @keyframes wheelie {
            0%, 100% { transform: rotate(0); }
            30%, 70%  { transform: rotate(-30deg); }
          }