Can this be made simpler, still learning YAML and the interface!

Configuration Frontend
1

Hi,

The attached code basically shows a Bubble Slider for a light, to the right is a sub-button, shows motion icon when on and armed, background turns orange when motion detected, and double click it to turn off and show motion off icon.

So question is, 1) is there simpler logic code for this so that I can mirror it quickly for my other light switches?

  1. instead of the background turning orange, would rather just the icon did when it detects motion?

Thanks in advance…

type: custom:bubble-card
card_type: button
entity: light.dining_room
use_accent_color: false
show_state: true
show_last_changed: false
show_attribute: false
card_layout: normal
button_type: slider
slider_live_update: false
hold_action:
  action: more-info
double_tap_action:
  action: none
scrolling_effect: false
show_icon: true
icon: mdi:lightbulb
tap_action:
  action: toggle
grid_options:
  columns: 6
  rows: 1
styles: |-
  .bubble-icon { color: ${state === 'on' ?  '#FFFFFF' : '#4C4C4C'} !important;
  }
  .bubble-range-fill {
  background: rgb(84, 99, 115) !important;
  opacity: 1 !important;
  }
sub_button:
  - tap_action:
      action: none
    hold_action:
      action: none
    icon: mdi:motion-sensor
    entity: switch.hue_motion_sensor_9_motion_sensor_enabled
    double_tap_action:
      action: toggle
    show_background: false
    visibility:
      - condition: state
        entity: switch.hue_motion_sensor_9_light_sensor_enabled
        state: "on"
      - condition: state
        entity: binary_sensor.hue_motion_sensor_9_motion
        state: "off"
    state_background: false
  - entity: binary_sensor.hue_motion_sensor_9_motion
    state_background: true
    tap_action:
      action: none
    double_tap_action:
      action: none
    hold_action:
      action: none
    visibility:
      - condition: state
        entity: binary_sensor.hue_motion_sensor_9_motion
        state: "on"
  - entity: switch.hue_motion_sensor_9_motion_sensor_enabled
    show_background: false
    icon: mdi:motion-sensor-off
    visibility:
      - condition: state
        entity: switch.hue_motion_sensor_9_motion_sensor_enabled
        state_not: "on"
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: toggle
2 
  .bubble-sub-button-icon { color: ${states['binary_sensor.hue_motion_sensor_9_motion'].state === 'Detected' ?  'red' : 'pink'}
  !important;

  }

this seems to always show the icon as pink in the YAML editor, but as soon as save it the switch on the page is not even visible.