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

# 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:
      card:
        - border-style: solid
        - border-width: 2px
        - border-color: var(--paper-item-icon-active-color)
        - box-shadow: var(--soft-ui-pressed)
      icon:
        - color: var(--paper-item-icon-active-color)
show_state: true
card_mod:
  class: soft-ui
type: "custom:button-card"