type: horizontal-stack
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Lavabo
        icon: mdi:faucet
        icon_color: "{{ 'amber' if is_state(entity, 'on') }}"
        entity: light.luz_lavabo
        tap_action:
          action: navigate
          navigation_path: /dashboard-ambientes/lavabo
        hold_action:
          action: toggle
        fill_container: true
        layout: horizontal
        multiline_secondary: false
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: light.luz_lavabo
            icon_color: amber
            icon: mdi:lightbulb
            content_info: none
            tap_action:
              action: toggle
          - type: entity
            entity: binary_sensor.janela_lavabo_contact
            icon: mdi:window-closed-variant
            icon_color: amber
            content_info: none
          - type: entity
            entity: binary_sensor.movimento_lavabo_occupancy
            icon: mdi:motion-sensor
            icon_color: amber
            content_info: none
        alignment: end
        card_mod:
          style: |
            .chip-container {
              display: flex;
              flex-wrap: wrap;
            }
            .chip-container > * {
              min-width: 32px; /* Aplica o min-width a todos os chips */
            }
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
              --chip-border-color: transparent;
              background-color: #222222;
              box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
              display: block;
            }
            :host {
              background-color: #222222;
              box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
              display: block;
            }  
    card_mod:
      style: |
        ha-card {
          position: relative;
          box-shadow: none;
          --ha-card-border-width: 0px;
          background: {{
            '#1c1c1c' if is_state('light.luz_lavabo', 'on') else '#1c1c1c'
          }};
        }
        ha-card::before {
          content: "";
          position: absolute;
          top: -12px;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: url('https://cdn.jsdelivr.net/gh/Templarian/MaterialDesign@master/svg/faucet.svg');
          background-repeat: no-repeat;
          background-position: right top;
          background-size: 40%;
          filter: brightness(0) saturate(100%) invert(96%) sepia(4%) saturate(500%) hue-rotate(314deg) brightness(96%) contrast(92%);
          opacity: {{
            '0.3' if is_state('light.luz_lavabo', 'on') else '0.05'
          }};
          z-index: 0;
        }
grid_options:
  columns: 6
  rows: auto