Bubble Card / Mushroom Card - CSS Styling card help

[vapid patrol]

Short Version: I cannot figure out what icon background color the mushroom card is using for the icon. I want to use that same background color on the bubble card icon.

Long Version:
I am trying to use Bubble cards to help condense some functionality on my dashboards. To be specific, I am currently trying to produce a bubble card that shows a door's status (open/closed) on the left (with dynamic color/icon) and has a sub-button on the right side to lock/unlock (with dynamic color/icon). The functionality is mostly easy to achieve following documentation. There are two issues with the result:

1. the Bubble card styling does not match my other mushroom cards (edges, colors, etc.)
2. the icons are not dynamic (and I need to figure out how to achieve that)

Any advice is welcomed.

current bubble card configuration:

type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.garage_exterior_door_opening
sub_button:
  - entity: lock.garage_door_lock
    name: ""
    show_last_changed: false
    show_state: false
    show_icon: true
    show_background: true
    tap_action:
      action: toggle
layout_options:
  grid_columns: 2
  grid_rows: 1
scrolling_effect: false
show_last_changed: false
show_state: false
card_layout: large
styles: |-
  .large .bubble-button-card-container {
   border-radius: var(--ha-card-border-radius, 12px);
   background-color: var(--card-background-color, #fff);
   border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
   border-style: solid;
   border-width: var(--ha-card-border-width, 1px);
   border-radius: var(--ha-card-border-radius, 12px);
  }

  .bubble-sub-button-1 {
   background-color: #224422;
  }

  .bubble-icon-container {
   background-color: #2a2a2a;
  }
name: Garage Exterior

the background-color settings on .bubble-icon-container and .bubble-sub-button-1 are working for the left and right icons, respectively. I do not know what dynamic value to set them to for them to match the mushroom card in a themed manner.

it seems like there are some occasions where the styling uses an rgba() function in the CSS, but it seems like bubble card's styling override is not accepting that as a valid entry for colors

this, for example. when I try to set my icon's background color to rgba(var(--rgb-disabled), 0.2) it seems to treat it as a null color, essentially

[vapid patrol]

I have at least figured out how to code all the colors manually....

now I need to know how to change the colors and icons dynamically

does jinja work in CSS?

[vapid patrol]

resolved. if anyone stumbles upon this in the future:

type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.front_entryway_door_opening
sub_button:
  - entity: lock.front_door_lock
    name: ""
    show_last_changed: false
    show_state: false
    show_icon: true
    show_background: true
    tap_action:
      action: toggle
layout_options:
  grid_columns: 2
  grid_rows: 1
scrolling_effect: false
show_last_changed: false
show_state: false
card_layout: large
styles: >
  .large .bubble-button-card-container {
   border-radius: var(--ha-card-border-radius, 12px);
   background-color: var(--card-background-color, #fff);
   border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
   border-style: solid;
   border-width: var(--ha-card-border-width, 1px);
   border-radius: var(--ha-card-border-radius, 12px);
  }


  .large .bubble-icon-container {
   background-color: ${hass.states['binary_sensor.front_entryway_door_opening'].state === 'on' ? 'rgba(33, 150, 243, 0.2)' : '#2C2C2C'};
   min-width: 36px !important;
   min-height: 36px !important;
   --mdc-icon-size: 21.59px;
  }


  .bubble-icon {
   opacity: 1;
   color: ${hass.states['binary_sensor.front_entryway_door_opening'].state === 'on' ? 'rgb(33, 150, 243) !important' : '#6F6F6F !important'} ;
  }


  .bubble-sub-button-1 {
   background-color: ${hass.states['lock.front_door_lock'].state === 'locked' ? 'rgba(76, 175, 80, 0.2)' : 'rgba(33, 150, 243, 0.2)'};
   color: ${hass.states['lock.front_door_lock'].state === 'locked' ? 'rgb(76, 175, 80)' : 'rgb(33, 150, 243)'};
  }


  ${subButtonIcon[0].setAttribute("icon",
  hass.states['lock.front_door_lock'].state === 'locked' ? 'mdi:lock' :
  'mdi:lock-open-variant')}
name: Front