`${(() => {
    let state;
    if (this.config?.state_color_button?.alt_entity) {
        state = hass?.states[this.config?.state_color_button?.alt_entity]?.state || '';
    } else {
        state = hass?.states[this.config?.entity]?.state || '';
    }

    let bg_color = 'var(--bubble-main-background-color)';
    
    // Use the configured color or default to accent color
    let on_color = this.config?.state_color_button?.color
        ? `var(--${this.config.state_color_button.color})`
        : 'var(--accent-color)';

    // Main button background
    const mainButton = card?.querySelector('.bubble-button-background');
    if (mainButton) {
        mainButton.style.opacity = '1';
        mainButton.style.backgroundColor = state === 'on' ? on_color : bg_color;
        mainButton.style.transition = 'background-color 1s';
    }

    // Unavailable state
    if (mainButton && state === 'unavailable') {
        mainButton.style.opacity = '0.5';
        mainButton.classList.add('is-unavailable');
    } else if (mainButton) {
        mainButton.classList.remove('is-unavailable');
    }

    // No CSS string needed
    return '';
})()}`