From 167fedee8de27a1d8ce40f05f6b36f78a735fd93 Mon Sep 17 00:00:00 2001
From: Christian Pillsbury <cpillsbury@mux.com>
Date: Wed, 6 Dec 2023 15:46:41 -0800
Subject: [PATCH 1/2] fix(mux-player): gerwig theme misapplying opt in controls
 selector.

---
 packages/mux-player/src/themes/gerwig/gerwig.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mux-player/src/themes/gerwig/gerwig.html b/packages/mux-player/src/themes/gerwig/gerwig.html
index b73432c1b..b2433dab5 100644
--- a/packages/mux-player/src/themes/gerwig/gerwig.html
+++ b/packages/mux-player/src/themes/gerwig/gerwig.html
@@ -486,7 +486,7 @@
      * Our defaults for these buttons are to hide them at small sizes
      * users can override this with CSS
      */
-    :not([breakpointsm]) {
+    media-controller:not([breakpointsm]):not([audio]) {
       --bottom-play-button: none;
       --bottom-seek-backward-button: none;
       --bottom-seek-forward-button: none;

From 5266d9f0520e1f221afb54f8e5880554a319788d Mon Sep 17 00:00:00 2001
From: Christian Pillsbury <cpillsbury@mux.com>
Date: Wed, 6 Dec 2023 16:34:57 -0800
Subject: [PATCH 2/2] fix(mux-player, mux-player-react): Fix audio only
 styling.

---
 .../mux-player/src/themes/gerwig/gerwig.html  | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/mux-player/src/themes/gerwig/gerwig.html b/packages/mux-player/src/themes/gerwig/gerwig.html
index b2433dab5..d2485cb24 100644
--- a/packages/mux-player/src/themes/gerwig/gerwig.html
+++ b/packages/mux-player/src/themes/gerwig/gerwig.html
@@ -1,4 +1,23 @@
 <template id="media-theme-gerwig">
+  <!--
+    NOTE: Using conditional templates here so initial value is as expected due to state update cycling.
+    For more, see: MuxPlayer::secondaryColor getter and its application in template.ts (CJP).
+  -->
+  <template if="!audio">
+    <style>
+      :host {
+        --_secondary-color: var(--media-secondary-color, transparent);
+      }
+    </style>
+  </template>
+  <template if="audio">
+    <style>
+      :host([audio]) media-control-bar {
+        --_secondary-color: var(--media-secondary-color, black);
+        background-color: var(--_secondary-color);
+      }
+    </style>
+  </template>
   <style>
     @keyframes pre-play-hide {
       0% {
@@ -18,10 +37,8 @@
 
     :host {
       --_primary-color: var(--media-primary-color, #fff);
-      --_secondary-color: var(--media-secondary-color, transparent);
       --_accent-color: var(--media-accent-color, #fa50b5);
       --_text-color: var(--media-text-color, #000);
-
       --media-icon-color: var(--_primary-color);
       --media-control-background: var(--_secondary-color);
       --media-control-hover-background: var(--_accent-color);