alarm

  - type: vertical-stack
    cards:
      - card:
          entity: alarm_control_panel.home_alarm
          states:
            # - arm_home
            - arm_away
          style:
            .: |
              ha-card > ha-label-badge{
                --alarm-state-color: var(--google-green-500) !important;
              }
              ha-card{
                padding-top: 16px;
                padding-bottom: 12px !important;
                border-radius: 21px;
              }
              ha-card > h1{
                padding-top: 0;
                color: transparent;
              }
              ha-card > h1::before{
                content: "Deactivated";
                color: var(--google-green-500);
                position: absolute;
                font-variant: small-caps;
              }
              #alarmCode{
                display: none;
              }
              #keypad{
                display: none !important;
              }
            '#armActions':
              mwc-button:
                $: |
                  #button > span.slot-container{
                    color: transparent;
                    position: absolute;

                  }
                  #button{
                    width: 150px;
                    border-radius: 21px;
                  }
                  #button > span.slot-container::before{
                    color: var(--mdc-theme-primary, #6200ee);
                    content: "Enable";
                    margin: 0 0 0 50%;
                  }
          title: Alarm
          type: alarm-panel
        conditions:
          - entity: alarm_control_panel.home_alarm
            state: disarmed
        type: conditional
      - card:
          entity: alarm_control_panel.home_alarm
          states:
            # - arm_home
            - arm_away
          title: Alarm
          type: alarm-panel
          style:
            .: |
              ha-card > ha-label-badge{
                --alarm-state-color: var(--google-red-500) !important;
              }
              ha-card{
                padding-top: 16px;
                padding-bottom: 12px !important;
                border-radius: 21px;
              }
              ha-card > h1{
                padding-top: 0;
                color: transparent;
              }
              ha-card > h1::before{
                content: "Activated";
                color: var(--google-red-500);
                position: absolute;
                font-variant: small-caps;
              }
            '#armActions':
              mwc-button:
                $: |
                  #button > span.slot-container{
                    color: transparent;
                    position: absolute;
                  }
                  #button{
                    width: 150px;
                    border-radius: 21px;
                  }
                  #button > span.slot-container::before{
                    color: var(--mdc-theme-primary, #6200ee);
                    content: "Disable";
                    margin: 0 0 0 50%;
                  }
            '#keypad':
              mwc-button:
                $: |
                  #button{
                    border-radius: 12px
                  }
        conditions:
          - entity: alarm_control_panel.home_alarm
            state_not: disarmed
        type: conditional