type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:pool
    icon_color: ""
    primary: Pool
    secondary: "{{ states('sensor.water_sensor_1')  }}°F"
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /lovelace-user2/pool-1
    badge_color: |
      {% if is_state('light.pool_lights_all', 'on') %}
        green
      {% endif %}
    badge_icon: |-
      {% if is_state('light.pool_lights_all', 'on') %}
        hue:aura-group
      {% endif %}
      {% if is_state('light.pool_lights_all', 'off') %}
      {% endif %}
    entity: switch.pool
    hold_action:
      action: call-service
      service: light.toggle
      target:
        entity_id: light.pool_lights_all
      data: {}
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            font-size: 15px !important;
            position: relative;
            top: -55px;
            left: -155px;
            overflow: visible !important;
            white-space: normal !important;
          }
          .secondary {
            position: relative;
            overflow: visible !important;
            top: -55px;
            left: -155px;
          }
        mushroom-shape-icon$: |
          .shape {
            position: relative;
            left: -40px;
            top: 35px;
          {% set state = states('switch.pool') %}
           {% if state == ('on') %}
             --shape-color: rgba(149,59,227, .2) !important;
           {% else %}
             --shape-color: rgba(149,59,227, 0) !important; 
           {% endif %}  
          }
        .: ":host {\n  --mush-icon-size: 140px;\nha-state-icon {\n {% set state = states('switch.pool') %}\n  {% if state == ('on') %}\n    color: rgba(149,59,227, 1) ;\n  {% else %}\n    color: var(--grey-color) ;\n {% endif %}  \n}\t\t\t  \n}\n"
        style: |
          mushroom-badge-icon {
            left: 80px;
            top: 4px;
          }
  - type: custom:mushroom-template-card
    primary: ""
    secondary: ""
    icon: mdi:slide
    entity: switch.waterslide
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
          {% set state = states('switch.waterslide') %}
           {% if state == ('on') %}
             --shape-color: rgba(149,59,227, .2) !important;
           {% else %}
             --shape-color: rgba(90,90,90, .3) !important; 
           {% endif %}  
          }
        .: |
          ha-state-icon {
           {% set state = states('switch.waterslide') %}
           {% if state == ('on') %}
             color: rgba(149,59,227, 1) ;
           {% else %}
             color: var(--grey-color) ;
           {% endif %}  
          }
          ha-card {
            width: 66px;
            margin-left: 68%;
            top: -160px;
            background: none;
          }
          :host {
            --mush-icon-size: 38px;
          }
  - type: custom:mushroom-template-card
    primary: ""
    secondary: ""
    icon: mdi:waterfall
    entity: switch.waterfall
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
          {% set state = states('switch.waterfall') %}
           {% if state == ('on') %}
             --shape-color: rgba(149,59,227, .2) !important;
           {% else %}
             --shape-color: rgba(90,90,90, .3) !important; 
           {% endif %}  
          }
        .: |
          ha-state-icon {
           {% set state = states('switch.waterfall') %}
           {% if state == ('on') %}
             color: rgba(149,59,227, 1) ;
           {% else %}
             color: var(--grey-color) ;
           {% endif %}  
          }
          ha-card {
            width: 66px;
            margin-left: 68%;
            top: -175px;
            background: none;
          }
          :host {
            --mush-icon-size: 38px;
          }
  - type: custom:mushroom-light-card
    icon: hue:aura-group
    use_light_color: false
    collapsible_controls: true
    grid_options:
      columns: 4
      rows: 2
    entity: light.pool_lights_all
    layout: vertical
    name: ""
    primary_info: none
    secondary_info: none
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            white-space: normal !important;
          }
        mushroom-shape-icon$: |
          .shape {
          {% set state = states('light.pool_lights_all') %}
           {% if state == ('on') %}
             --shape-color: rgba(149,59,227, .2) !important;
           {% else %}
             --shape-color: rgba(149,59,227, 0) !important; 
           {% endif %}  
          }
        .: |
          ha-state-icon {
           {% set state = states('light.pool_lights_all') %}
           {% if state == ('on') %}
             color: rgba(149,59,227, 1) ;
           {% else %}
             color: var(--grey-color) ;
           {% endif %}  
          }
          ha-card {
            width: 66px;
            margin-left: 68%;
            top: -190px;
            background: none;
          }
          :host {
            --mush-icon-size: 38px;
          }
card_mod:
  style: |
    ha-card {
      height: 155px !important;

    }
grid_options:
  columns: 6
  rows: auto