Vacuum Card

type: custom:button-card
entity: group.dummy_scene_group
name: RoboRock
label: First floor
icon: mdi:robot-vacuum-variant
show_name: true
show_icon: true
show_label: true
show_state: false
state:
  - value: 'on'
    styles:
      icon:
        - color: '#39bb4f'
  - value: charging
    styles:
      icon:
        - color: '#e51261'
  - value: 'off'
    styles:
      icon:
        - color: '#55555550'
styles:
  grid:
    - grid-template-areas: |
        "i . img"
        "n n ."
        "l l ."
        "item1 item2 item3"
    - grid-template-rows: 1fr .5fr .5fr 1fr
    - grid-template-columns: 1fr 1fr 1fr
    - column-gap: 8px
    - row-gap: 8px
  card:
    - aspect-ratio: 1
    - border-radius: 20px
    - box-shadow: none
    - padding: 1.5rem
    - background: white
  name:
    - font-size: 48px
    - font-weight: bold
    - justify-self: start
    - align-self: end
    - color: black
    - z-index: 2
  label:
    - font-size: 36px
    - justify-self: start
    - align-self: start
    - color: grey
    - z-index: 2
  img_cell:
    - justify-self: start
    - justify-content: start
    - border-radius: 500px
    - background-color: none
    - z-index: 2
  icon:
    - color: '#e51261'
    - width: 50%
    - height: 50%
  custom_fields:
    img:
      - border: none
      - box-shadow: none
      - position: absolute
      - width: 60%
      - right: 1rem
      - top: 1rem
custom_fields:
  item1:
    card:
      type: custom:button-card
      entity: group.dummy_scene_group
      icon: mdi:motion-play-outline
      show_name: false
      show_icon: true
      show_label: true
      show_state: false
      state: &ref_0
        - value: 'on'
          styles:
            icon:
              - color: '#39bb4f'
        - value: 'off'
          styles:
            icon:
              - color: '#55555550'
      styles: &ref_1
        card:
          - border-radius: 100px
          - aspect-ratio: 1
          - background: white
          - box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2)
        icon:
          - color: '#39bb4f'
  item2:
    card:
      type: custom:button-card
      entity: group.dummy_scene_group
      icon: mdi:motion-pause-outline
      show_name: false
      show_icon: true
      show_label: true
      show_state: false
      state: *ref_0
      styles: *ref_1
  item3:
    card:
      type: custom:button-card
      entity: group.dummy_scene_group
      icon: mdi:gas-station-outline
      show_name: false
      show_icon: true
      show_label: true
      show_state: false
      state: *ref_0
      styles: *ref_1
  img:
    card:
      type: picture
      card_mod:
        style: |
          ha-card {
            box-shadow: none;
          }
      image: >-
        https://www.tradeinn.com/f/13758/137584654/roborock-dammsugare-robot-s6-pure.jpg
      tap_action:
        action: none
      hold_action:
        action: none