Mushroom icona luci

type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |
  {% if states('sensor.luci_accese')|int >= 1 %}
    {{ 'mdi:numeric-' + states('sensor.luci_accese') + '-circle' }}
  {%- else -%}
    mdi:lightbulb
  {% endif %}
icon_color: |
  {% if states('sensor.luci_accese')|int >= 1 %}
    yellow
  {% else %}
    disabled
  {% endif %}
badge_icon: |
  {% if states('sensor.luci_accese')|int >= 1 %}
    mdi:lightbulb-on
  {% else %}
  {% endif %}
badge_color: yellow
layout: horizontal
tap_action:
  action: none
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if states('sensor.luci_accese')|int >= 1 %}
          --shape-color: rgba(var(--rgb-red), 0.4);
        {%- else -%}
        {% endif %}
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
      }
    .: |
      ha-card:active {
        transform: translateY(1.5px);
        transition: 0s;
      }
      ha-card {
        transform: scale(1.3);
        border: none;
        box-shadow: none;
        padding-left: 0px;
        background: rgba(0,0,0,0);
      }
      ha-state-icon {
        {% if states('sensor.luci_accese')|int >= 1 %}
          animation: alarm 3s ease infinite;
        {%- else -%}

        {% endif %}
      }
      @keyframes alarm {
        0%, 80%, 100% { transform: translateY(0); }
        10% { transform: translateY(-2px) rotate(-27deg); }
        20% { transform: translateY(-2px) rotate(21deg); }
        30% { transform: translateY(-2px) rotate(-15deg); }
        40% { transform: translateY(-2px) rotate(9deg); }
        50% { transform: translateY(0); }
        60% { transform: translateY(-1.2px) }
      }
      mushroom-badge-icon {
        #--badge-icon-size: 10px;
        --icon-color: red;
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
      0% {transform: rotate(-20deg);}
      100% {transform: rotate(20deg);}
      }