Move more button card button theming to modules

mobile_dashboard.yaml

@@ -214,15 +214,9 @@ streamline_templates:
           action: none
         hold_action:
           action: none
-      styles: |-
+      modules:
-        .is-unavailable {
+        - default
-          opacity: 0.5 !important;
+        - popup_security_button
-        }
-        .bubble-button-background {
-          opacity: 1 !important;
-          background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--background-color-2)'} !important;
-          transition: background-color 1s !important;
-        }
   popup_accent_color_button:
     defaults:
       - name: ''
@@ -244,14 +238,14 @@ streamline_templates:
           action: none
         hold_action:
           action: none
-      styles: |-
+      modules:
-        .bubble-button-background {
+        - default
-          opacity: 1 !important;
+        - popup_accent_color_button
-          background-color: ${state === 'on' ? 'var(--accent-color)' : 'var(--background-color-2)'} !important;
-        }
   popup_temperature_button:
     defaults:
       - name: ''
+      - hot_entity: ''
+      - cold_entity: ''
     card:
       type: custom:bubble-card
       card_type: button
@@ -259,15 +253,12 @@ streamline_templates:
       entity: '[[entity]]'
       name: '[[name]]'
       show_attribute: false
-      styles: |
+      modules:
-        .is-unavailable {
+        - default
-          opacity: 0.5 !important;
+        - popup_temperature_button
-        }
+      popup_temperature_button:
-        .bubble-button-background {
+        hot_entity: '[[hot_entity]]'
-          opacity: 1 !important;
+        cold_entity: '[[cold_entity]]'
-          background-color: ${hass.states['[[hot_entity]]'].state === 'on' ? 'var(--error-color)' : 'var(--background-color-2)'} !important;
-          transition: background-color 1s !important;
-        }
   popup_timer_card:
     defaults:
       name: ''