Smart Home Toggle

      - type: "custom:button-card"
        view_layout:
          grid-area: "r6a"
        entity: input_boolean.dummy_toggle2
        name: Changes control<br>of the house.
        label: Home mode
        show_name: false
        show_icon: true
        show_label: true
        show_state: false
        tap_action:
          action: toggle
        state:
          - value: "off"
            icon: mdi:toggle-switch-off-outline
          - value: "on"
            icon: mdi:toggle-switch-outline
        styles:
          grid:
            - grid-template-areas: '"state ." "n ." "l i"'
            - grid-template-rows: 1fr min-content 2rem
            - grid-template-columns: 60% 40%
            - row-gap: 8px
          card:
            - height: 100%
            - background: "var(--card-background)"
            - border-radius: "var(--border-radius)"
            - box-shadow: "var(--box-shadow)"
            - padding: 1rem
            - background-size: 200%
            - overflow: hidden
            - animation:
              - card 1s ease
          name:
            - color: rgba(var(--contrast-100),1)
            - text-align: left
            - font-size: "var(--fs-400)"
            - font-family: Montserrat
            - font-weight: 600
            - justify-self: start
            - align-self: center
            - overflow: visible
          label:
            - color: rgba(var(--contrast-100),1)
            - text-align: left
            - font-size: "var(--fs-400)"
            - font-family: Montserrat
            - font-weight: 600
            - justify-self: start
            - align-self: center
          img_cell:
            - justify-content: end
            - overflow: hidden
          icon:
            - justify-self: end
            - align-self: center
            - color: rgba(var(--contrast-100),1)
            - width: "var(--button-small)"
            - padding: 0 0 0 0
            - overflow: hidden
          custom_fields:
            state:
              - color: rgba(var(--color-dark-blue),1)
              - text-align: left
              - font-size: "var(--fs-800-resp)"
              - font-family: Montserrat
              - line-height: "var(--fs-800-resp)"
              - font-weight: 800
              - justify-self: start
              - align-self: start
              - overflow: visible
            img:
              - display: none
              - position: absolute
              - width: 15em
              - right: -60%
              - top: -50%
              - color: rgba(var(--contrast-100),.03)
              - overflow: hidden
              - animation:
                  - rotating 36s linear infinite reverse
        extra_styles: |
          @keyframes gradient {
            0% {
              background-position: 0% 50%;
            }
            50% {
              background-position: 100% 0%;
            }
            100% {
              background-position: 0% 50%;
            }
          }
        custom_fields:
          state: >
            [[[
              if (states['input_boolean.dummy_toggle2'].state == "off")
                return '<span style="opacity:0.25">Smart</span><br><span>Dumb</span>';

              return '<span>Smart</span><br><span style="opacity:0.25">Dumb</span>';
            ]]]
          img: |
           <ha-icon icon="mdi:cog-outline"></ha-icon>