Main button state red now applies styles directly to DOM elements

bubble/main_button_state_red.yaml

@@ -1,17 +1,33 @@
 main_button_state_red:
   name: Main Button State Red
-  version: '1.0'
+  version: '1.1'
   creator: Tony Stork
   supported:
     - button
   description: Will turn the button red if the entity state is on, otherwise default style applies
   code: |-
-    .is-unavailable {
+    ${(() => {
-      opacity: 0.5 !important;
+        const state = hass?.states[this.config?.entity]?.state || '';
-    }
+
-    .bubble-button-background {
+        let bg_color = 'var(--bubble-main-background-color)';
-      opacity: 1 !important;
+        let red_color = 'var(--error-color)';
-      background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--bubble-main-background-color)'} !important;
+
-      transition: background-color 1s !important;
+        // Main button background
-    }
+        const mainButton = card?.querySelector('.bubble-button-background');
+        if (mainButton) {
+            mainButton.style.opacity = '1';
+            mainButton.style.backgroundColor = state === 'on' ? red_color : bg_color;
+            mainButton.style.transition = 'background-color 1s';
+        }
+
+        // Unavailable state
+        if (mainButton && state === 'unavailable') {
+            mainButton.classList.add('is-unavailable');
+        } else if (mainButton) {
+            mainButton.classList.remove('is-unavailable');
+        }
+
+        // No CSS string needed
+        return '';
+    })()}
   editor: ''