type: custom:button-card
icon: none
name: Vol
show_state: false
layout: vertical
styles:
  card:
    - width: 90px
    - height: 188px
    - margin-left: 5px
    - background-color: none
    - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2)
    - font-family: Tilt Neon
    - border-radius: 16px
  grid:
    - grid-template-areas: '"volume_up" "n" "volume_down"'
    - grid-template-columns: 1fr
    - grid-template-rows: null
  name:
    - height: 40px
    - margin-top: '-10px'
custom_fields:
  volume_up:
    card:
      type: custom:button-card
      entity: script.lr_volume_up
      icon: mdi:volume-high
      show_icon: true
      show_name: false
      tap_action:
        action: call-service
        service: script.lr_volume_up
      styles:
        card:
          - width: 90px
          - height: 89px
          - background-color: none
          - box-shadow: none
          - position: relative
          - top: '-15px'
  volume_down:
    card:
      type: custom:button-card
      entity: script.lr_volume_down
      icon: mdi:volume-medium
      show_icon: true
      show_name: false
      tap_action:
        action: call-service
        service: script.lr_volume_down
      styles:
        card:
          - width: 90px
          - height: 89px
          - background-color: none
          - box-shadow: none
          - position: relative
          - bottom: 15px