From a871bd5e3c2692194f72c18611558e2d88aa9c67 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Tue, 5 Nov 2024 10:48:49 -0600
Subject: [PATCH] fix: remove default styles for slotted thumb

---
 .../src/pages/docs/en/components/media-time-range.mdx |  4 ++--
 src/js/media-chrome-range.ts                          | 11 +++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/docs/en/components/media-time-range.mdx b/docs/src/pages/docs/en/components/media-time-range.mdx
index cd81437fb..83b7b5961 100644
--- a/docs/src/pages/docs/en/components/media-time-range.mdx
+++ b/docs/src/pages/docs/en/components/media-time-range.mdx
@@ -143,8 +143,8 @@ Set the `preview` slot to an empty element to remove the default preview element
   ></video>
   <media-control-bar>
     <media-time-range>
-      <svg slot="thumb" style="width: 20px; height: 20px; background: none;">
-        <circle fill="#df2c2c" cx="10" cy="10" r="10"/>
+      <svg slot="thumb">
+        <circle fill="#df2c2c" cx="5" cy="5" r="5"/>
       </svg>
     </media-time-range>
   </media-control-bar>
diff --git a/src/js/media-chrome-range.ts b/src/js/media-chrome-range.ts
index 6e052c305..d64ef2c33 100644
--- a/src/js/media-chrome-range.ts
+++ b/src/js/media-chrome-range.ts
@@ -177,10 +177,6 @@ template.innerHTML = /*html*/ `
       width: var(--media-range-thumb-width, 10px);
       height: var(--media-range-thumb-height, 10px);
       margin-left: calc(var(--media-range-thumb-width, 10px) / -2);
-      border: var(--media-range-thumb-border, none);
-      border-radius: var(--media-range-thumb-border-radius, 10px);
-      background: var(--media-range-thumb-background, var(--media-primary-color, rgb(238 238 238)));
-      box-shadow: var(--media-range-thumb-box-shadow, 1px 1px 1px transparent);
       transition: var(--media-range-thumb-transition);
       transform: var(--media-range-thumb-transform, none);
       opacity: var(--media-range-thumb-opacity, 1);
@@ -189,6 +185,13 @@ template.innerHTML = /*html*/ `
       cursor: pointer;
     }
 
+    #thumb {
+      border-radius: var(--media-range-thumb-border-radius, 10px);
+      background: var(--media-range-thumb-background, var(--media-primary-color, rgb(238 238 238)));
+      box-shadow: var(--media-range-thumb-box-shadow, 1px 1px 1px transparent);
+      border: var(--media-range-thumb-border, none);
+    }
+
     :host([disabled]) #thumb {
       background-color: #777;
     }