Radar

    type: custom:button-card
    styles:
      grid:
        - grid-template-areas: '"forecast radar"'
        - grid-template-columns: min-content 1fr
        - grid-template-rows: 1fr
      card:
        - background-color: transparent
          border: solid 2px transparent
          height: 375px
          width: 630px
          padding: 0px 0px 0px 0px
          margin: 0px 0px 0px 0px
          align-content: start
          justify-content: start
          align-self: start
          overflow-y: auto
          align-items: start
          justify-items: start
      custom_fields:
        radar:
          - justify-self: start
          - align-self: start
          - width: 635px
          - padding: 0px 0px 0px 0px
          - margin: '-83px 0px 0px -15px'
    show_state: false
    show_name: false
    show_icon: false
    name: Radar
    custom_fields:
      radar:
        card:
          type: custom:bom-radar-card
          data_source: RainViewer-DarkSky
          map_style: Dark
          zoom_level: 10
          center_latitude:
          center_longitude:
          show_playback: true
          show_zoom: true
          show_range: false
          extra_labels: true
          show_radar_coverage: false
          show_radar_location: false
          show_scale: true
          show_marker: true
          square_map: false
          show_recenter: true
      forecast:
        card:
          type: custom:button-card
          entity: sensor.town_rain_chance_0
          icon: mdi:umbrella
          show_icon: false
          show_state: true
          show_label: true
          name: Radar
          state_display: |
            [[[
              let chance = states['sensor.town_rain_chance_0'].state;
              let amount = states['sensor.town_rain_amount_range_0'].state;
              return `${chance}% chance of rain, ${amount}mm expected`;
            ]]]
          label: |
            [[[
              return states['sensor.town_extended_text_0'].state;
            ]]]
          styles:
            grid:
              - grid-template-areas: '"n" "i s" "l"'
            card:
              - width: 165px
                height: 375px
                border-radius: 0px
                background-color: rgba(0,0,0,0.4)
                padding: 15px
                margin: '-83px -150px 0px 0px'
                justify-self: start
                align-self: start
                justify-content: start
                align-content: start
                justify-items: start
                align-items: start
                backdrop-filter: blur(1px);
                '-webkit-backdrop-filter': blur(1px);
            name:
              - font-weight: 600
                justify-self: start
                align-self: start
                color: white
            label:
              - text-align: left
                font-size: 12px
                font-weight: 400
                white-space: normal
                width: 100%
                justify-self: start
                align-self: start
                color: white
                margin-top: '-90px'
            state:
              - text-align: left
                font-size: 12px
                font-weight: 550
                white-space: normal
                width: 100%
                justify-self: start
                align-self: start
                margin-top: '-130px'
                color: var(--label-badge-blue)
    card_mod:
      style: |
        :host {
          display: block;
          position: relative; margin: 0px 6px 0px 0px
        }

        :host::before {

          content: "";
          position: absolute;
          inset: 0;
          border-radius: 30px;
          -webkit-backdrop-filter: blur(50px);
          z-index: -1;
          padding: .1rem;
          background: linear-gradient(60deg,
              rgba(255,255,255,0.0) 0%,
              rgba(255,255,255,0.2) 49%,
              rgba(255,255,255,0.2) 51%,
              rgba(255,255,255,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; filter: saturate(140%);
        }

        :host::after {
          content: "";
          background: linear-gradient(180deg, rgba(255,255,255, 0.1) 20%, rgba(255,255,255, 0.0) 100%);
          position: absolute;
          inset: 0;
          border-radius: 30px;
          box-shadow: inset -8px 10px 15px rgba(0, 0, 0, 0.1);
          z-index: -1;

          -webkit-backdrop-filter:blur(30px) saturate(110%) brightness(90%);
          filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.2)); }