Sensor Status

      - type: "custom:button-card"
        view_layout:
          grid-area: "fire"
        entity: input_boolean.sensors_dropdown
        name: Smoke detectors
        label: All Online
        show_name: true
        show_icon: true
        show_label: true
        show_state: false
        variables:
          display: >
            [[[
              if (entity.state == "on"){
                return "block";
              }else {
                return "none";
              }
            ]]]
        styles:
          grid:
            - grid-template-areas: '"l" "n"'
            - grid-template-rows: 1fr 2rem
            - row-gap: 2px
          card:
            - height: 100%
            - background: "var(--card-background)"
            - border-radius: "var(--border-radius)"
            - box-shadow: "var(--box-shadow)"
            - padding: 1rem
            - overflow: visible
          label:
            - text-align: left
            - font-size: "var(--fs-500)"
            - font-family: 'Montserrat'
            - font-weight: 600
            - justify-self: start
            - align-self: end
            - color: rgba(var(--contrast-100),1)
            - text-transform: capitalize
            - text-wrap: wrap
          name:
            - text-align: left
            - font-size: "var(--fs-400)"
            - font-family: 'Montserrat'
            - font-weight: 500
            - justify-self: start
            - align-self: center
            - color: rgba(var(--contrast-100),1)
          img_cell:
            - border-radius: 50px
            - background: rgba(var(--color-red),1)
            - height: 12px
            - width: 12px
            - right: 24px
            - top: -4px
            - position: absolute
            - display: "[[[ return variables.display ]]]"
            - animation: scale 2s ease-in-out infinite
          icon:
            - opacity: 0
        state:
          - value: "on" #windows are open
            label: Check Status
            styles:
              label:
                - color: rgba(var(--color-red),1)
        extra_styles: |
          @keyframes scale {
            0% {transform: scale(.9)}
            50% {transform: scale(1.2)}
            100% {transform: scale(.9)}
          }