type: custom:button-card
custom_fields:
  card_type:
    card:
      type: tile
      entity: light.study_ceiling_light
      features_position: bottom
      vertical: false
      features:
        - type: light-brightness
      card_mod:
        style: |
          ha-card {
            background: transparent;
            width: 100%;}
      grid_options:
        columns: full
styles:
  grid:
    - grid-template-areas: '"card_type"'
      text-align: left
  card:
    - background: transparent
      border-radius: 30px
      padding: 0px
      border: solid 2px rgba(255,255,255,0.0)
      box-shadow: 10 10 10 2px transparent
      backdrop-filter: blur(2px);
      "-webkit-backdrop-filter": blur(2px);
  custom_fields:
    card_type:
      - justify-self: start
      - align-self: start
      - width: 100%
card_mod:
  style: |
    :host {
      display: block;
      position: relative;
    }

    :host::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 25px;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      z-index: -1;
      padding: 2px;
      background: linear-gradient(60deg,
          rgba(50,50,50,0.0)   0%,
          rgba(255,255,255,1) 40%,
          rgba(255,255,255,1) 60%,
          rgba(50,50,50,0.0) 100%);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      z-index: 0;
    }

    :host::after {
      content: "";
      background-color: rgba(255,255,255,0.2);
      position: absolute;

      inset: 0;
      border-radius: 30px;
      box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1);
      z-index: -1;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: solid 2px rgba(255,255,255,0.1);

    }

    ha-card {
      position: relative;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }


grid_options:
  columns: full