`${(() => { const hot = hass?.states[this.config?.popup_temperature_button?.hot_entity]?.state || ''; const cold = hass?.states[this.config?.popup_temperature_button?.cold_entity]?.state || ''; let bg_color = 'var(--background-color-2)'; let hot_color = 'var(--error-color)'; let cold_color = 'var(--cyan-color)'; // Main button background const mainButton = card?.querySelector('.bubble-button-background'); if (mainButton) { mainButton.style.opacity = '1'; if (hot === 'on') { mainButton.style.backgroundColor = hot_color; } else if (cold === 'on') { mainButton.style.backgroundColor = cold_color; } else { mainButton.style.backgroundColor = 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 ''; })()}`