button_card_templates_vacuum_card

button_card_templates:
  sensor_vacuum:
    show_label: true
    show_state: false
    styles:
      grid:
        - grid-template-columns: 24px 1fr
        - grid-template-rows: min-content min-content
        - grid-template-areas: '"l l" "i n"'
      img_cell:
        - justify-self: null
        - width: 22px
        - height: 22px
        - margin-left: '-3px'
      name:
        - justify-self: start
        - font-size: 15px
        - font-weight: 500
        - padding: 0 3px
      label:
        - justify-self: start
        - font-size: 12px
        - opacity: '0.7'
        - padding: 4px
      card:
        - padding: 13px
      icon:
        - width: 22px
        - color: var(--contrast15)
  vacuum_button:
    variables:
      background_on: '#FFC700'
      background_off: '#F7EEDD'
      name: Cucina
      label: label
    label: '[[[ return variables.label ]]]'
    name: '[[[ return variables.name ]]]'
    show_icon: true
    show_label: true
    color_type: card
    tap_action:
      action: toggle
    state:
      - value: 'off'
        color: '[[[ return variables.background_off ]]]'
        styles:
          icon:
            - color: black
          name:
            - color: black
          label:
            - color: black
          card:
            - background: '[[[ return variables.background_off ]]]'
      - value: 'on'
        color: '[[[ return variables.background_on ]]]'
        styles:
          icon:
            - color: black
          name:
            - color: black
          label:
            - color: black
          card:
            - background: '[[[ return variables.background_on ]]]'
    styles:
      grid:
        - grid-template-columns: 1fr 34px
        - grid-template-rows: min-content min-content
        - grid-template-areas: '"i i" "n n" "l l"'
      icon:
        - width: 20px
      img_cell:
        - justify-self: end
        - width: 20px
        - height: 20px
        - margin-right: 7px
      name:
        - justify-self: start
        - font-size: 15px
        - line-height: 20px
        - font-weight: 500
        - padding: 5px
        - margin-top: '-26px'
      label:
        - justify-self: start
        - font-size: 12px
        - font-weight: 400
        - padding: 5px
        - margin-top: '-5px'
      card:
        - height: 50px
        - padding: 13px
        - border-radius: 20px
        - '--mdc-ripple-color': yellow
        - '--mdc-ripple-press-opacity': 0.5