room_toilet.yaml

type: custom:vertical-stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-template-card
    primary: Toilet
    icon: mdi:toilet
    icon_color: teal
    layout: horizontal
    entity: light.shellydim_toilet
    secondary: null
    tap_action:
      action: navigate
      navigation_path: /lovelace-tablet/toilet
    badge_icon: |
      {% if is_state('binary_sensor.toilet_beneden_occupancy', 'on') %}
        mdi:human-greeting
      {% else %}  
        mdi:motion-sensor-off
      {% endif %}
    badge_color: |
      {% if is_state('binary_sensor.toilet_beneden_occupancy', 'on') %}
        green
      {% else %}  
        disabled
      {% endif %}
  - type: custom:vertical-stack-in-card
    horizontal: true
    cards:
      - type: custom:mushroom-template-card
        entity: light.shellydim_toilet
        layout: vertical
        icon: |-
          {% if is_state('light.shellydim_toilet', 'on') %}
          hue:ceiling-being
          {% else %}
          hue:ceiling-being
          {% endif %}
        icon_color: |-
          {% if is_state('light.shellydim_toilet', 'on') %}
            yellow
          {% endif %}
        tap_action:
          action: toggle
        double_tap_action:
          action: call-service
          service: input_boolean.toggle
          target:
            entity_id: input_boolean.node_red_toilet_automations
          data: {}
        card_mod:
          style:
            mushroom-shape-icon$: >
              {% if is_state('input_boolean.node_red_toilet_automations', 'on')
              %}

              .shape {
                --shape-animation: ping 5s infinite;
              }

              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
                }
                
                100% {
                  box-shadow: 0 0 5px 5px transparent;
                }
              }

              {% elif is_state('input_boolean.node_red_toilet_automations',
              'off') %}

              {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:motion-sensor
        icon_color: |2-
            {% if is_state(entity, 'on') %}
            blue
            {% else %}
            grey
            {% endif %}
        entity: binary_sensor.toilet_beneden_occupancy
        tap_action:
          action: more-info
      - type: template
        icon: mdi:fan
        icon_color: |2-
            {% if is_state(entity, 'on') %}
            green
            {% else %}
            grey
            {% endif %}
        entity: switch.shelly1l_toiletfan
        tap_action:
          action: more-info
    alignment: end
    card_mod:
      style:
        mushroom-template-chip: |
          ha-card {
            --ha-card-box-shadow: none;
            --chip-background: none;
            --chip-box-shadow: none;
            --chip-spacing: 0;
            : -36px;
          } 
        mushroom-template-chip:nth-child(1)$: |
          {% if is_state('binary_sensor.toilet_beneden_occupancy','on') %}
          ha-state-icon {
            animation: clip 2s linear infinite;
          }
          @keyframes clip {
            50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
          }
          .shape {
            --shape-animation: motion 2s linear infinite;
          }
          @keyframes motion {
            0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
            50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
          }
          }
          {% else %}

          {% endif %}
          }
        mushroom-template-chip:nth-child(2)$: |
          {% if is_state('switch.shelly1l_toiletfan','on') %}
          ha-state-icon {
            animation: rotation 2s linear infinite;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
          }
          {% else %}

          {% endif %}
          }