Unexpected behavior with Bubble Card Player

Configuration Frontend
1

The card looks and behaves on when it’s first presented:

image

Then I go to adjust volume and the color is different than I want. I can’t find the element to control.

image

But the real perplexing thing is, when I go to close the volume slider, the text field does populate and the ‘X’ remains (instead of the audio icon):

image

So this leads me to 3 questions:

  1. How do I control the styling of the audio icon on the right?
  2. How do I control the styling of the audio slider?
  3. How do I get the elements of the media player card back?

YAML below:

type: custom:bubble-card
card_type: media-player
entity: media_player.office_frame
name: Screen
icon: mdi:television
scrolling_effect: false
show_state: true
hide:
  play_pause_button: true
  next_button: true
  previous_button: true
  volume_button: false
  power_button: true
  mute_button: true
tap_action:
  action: toggle
double_tap_action:
  action: none
hold_action:
  action: none
styles: |
  .bubble-icon {
    color: ${
      hass.states['media_player.office_frame'].state === 'on' 
      ? 'rgba(0, 198, 194,1)' : 'rgba(201, 201, 205, 1)'
      } !important;
    }
  .bubble-name {
    font-size: 14px !important;
    color: rgba(201, 201, 205, 1);
  }
  .bubble-media-player {
    background-color: rgba(16, 16, 20, 1) !important
  }
  .bubble-icon-container {
    background: rgba(16, 16, 20, 1);
    opacity: 100 !important;
  }