---
#  _____         _
# |_   _|       | |
#   | | _____  _| |_
#   | |/ _ \ \/ / __|
#   | |  __/>  <| |_
#   \_/\___/_/\_\\__|

# Entity to control
entity: light.example
# Icon to display
icon: "mdi:vanity-light"
# Name to display
name: Island
# Size of the icon
size: 30%
# Button actions
tap_action:
  action: toggle
  haptic: light
hold_action:
  action: more-info
  haptic: medium
styles:
  img_cell:
    # Padding of the icon
    - padding-left: 25px
    - justify-content: start
  card:
    # Size of the card
    - width: min(25vw, 100px)
    - height: min(25vw, 100px)
  grid:
    - grid-template-areas: '"i" "n" "s"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  icon:
    - color: var(--primary-text-color)
  name:
    - justify-self: start
    - font-weight: bold
    - font-size: 15px
    - padding-left: 15px
  state:
    - justify-self: start
    - font-weight: bold
    - font-size: 15px
    - opacity: 0.6
    - padding: 0 15px 5px
state:
  - value: "on"
    styles:
      icon:
        - color: var(--paper-item-icon-active-color)
      card:
        - box-shadow: var(--soft-ui-pressed)
show_state: true
card_mod:
  class: soft-ui
type: "custom:button-card"