type: 'custom:button-card'
entity: light.office_2
show_label: true
show_state: true
label: |
  [[[
    var bri = Math.round((states['light.office_2'].attributes.brightness) / 255 * 100);
    return '' + (bri) + '%';
  ]]]
aspect_ratio: 9/10
hold_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: '[[[ return entity.attributes.friendly_name ]]]'
    deviceID: this
    hide_header: true
    style:
      $: |
        .mdc-dialog .mdc-dialog__container {
          width: 100%;
        }
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          width: 100%;
        }
      .: |
        :host {
          --mdc-theme-surface: rgba(0,0,0,0);
          --secondary-background-color: rgba(0,0,0,0);
          --ha-card-background: rgba(0,0,0,0);
          --mdc-dialog-scrim-color: rgba(0,0,0,0.5);
          --mdc-dialog-min-height: 100%;
          --mdc-dialog-min-width: 100%;
          --mdc-dialog-max-width: 100%;

        }
        mwc-icon-button {
          color: #FFF;
        }
    card:
      type: entities
      entities:
        - type: 'custom:light-popup-card'
          entity: '[[[ return entity.entity_id ]]]'
          icon: none
          fullscreen: false
          brightnessWidth: 130px
          brightnessHeight: 360px
          borderRadius: 1.7em
          sliderColor: '#c7c7c7'
          sliderTrackColor: 'rgba(25, 25, 25, 0.9)'
        - type: 'custom:button-card'
          color_type: card
          tap_action:
            action: call-service
            service: browser_mod.close_popup
          styles:
            card:
              - height: 230px
              - width: 400px
              - background: 'rgba(0,0,0,0)'
color: auto
color_type: icon
icon: 'mdi:ceiling-light'
styles:
  card:
    - font-size: 14px
    - font-weight: bold
  label:
    - font-size: 10px
    - justify-self: start
    - padding-left: 10px
    - null
  grid:
    - grid-template-areas: '"i" "n" "s l"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  name:
    - justify-self: start
    - padding-left: 10px
    - padding-bottom: px
  state:
    - justify-self: start
    - padding-left: 10px
    - font-size: 10px
state:
  - value: 'off'
    styles:
      card:
        - filter: opacity(30%)
      icon:
        - filter: greyscale(100%)
      label:
        - filter: opacity(0%)
  - value: 'on'
    styles:
      state:
        - color: yellow
      icon:
        - color: gold
        - filter: opacity(80%)