8 files changed, 25 insertions, 27 deletions
diff --git a/src/sass/settings/badges.scss b/src/sass/settings/badges.scss
index 0148f570..e56da1f8 100644
--- a/src/sass/settings/badges.scss
+++ b/src/sass/settings/badges.scss
@@ -3,5 +3,5 @@
 // ==========================================================================
 
 $plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default;
-$plyr-badge-color: var(--plyr-badge-color, #fff) !default;
+$plyr-badge-text-color: var(--plyr-badge-text-color, #fff) !default;
 $plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default;
diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss
index 85735faf..23d944cb 100644
--- a/src/sass/settings/captions.scss
+++ b/src/sass/settings/captions.scss
@@ -5,7 +5,7 @@
 $plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
 $plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;
 
-$plyr-font-size-captions-base: var(--plyr-font-size-captions-base, $plyr-font-size-base) !default;
-$plyr-font-size-captions-small: var(--plyr-font-size-captions-small, $plyr-font-size-small) !default;
-$plyr-font-size-captions-medium: var(--plyr-font-size-captions-medium, $plyr-font-size-large) !default;
-$plyr-font-size-captions-large: var(--plyr-font-size-captions-large, $plyr-font-size-xlarge) !default;
+$plyr-font-size-captions-base: $plyr-font-size-base !default;
+$plyr-font-size-captions-small: $plyr-font-size-small !default;
+$plyr-font-size-captions-medium: $plyr-font-size-large !default;
+$plyr-font-size-captions-large: $plyr-font-size-xlarge !default;
diff --git a/src/sass/settings/cosmetics.scss b/src/sass/settings/cosmetics.scss
index 3320ae7f..4fc10de5 100644
--- a/src/sass/settings/cosmetics.scss
+++ b/src/sass/settings/cosmetics.scss
@@ -2,4 +2,4 @@
 // Cosmetic
 // ==========================================================================
 
-$plyr-tab-focus-default-color: var(--plyr-tab-focus-default-color, var(--plyr-color-main, $plyr-color-main)) !default;
+$plyr-tab-focus-color: var(--plyr-tab-focus-color, var(--plyr-color-main, $plyr-color-main)) !default;
diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss
index bdd1eb36..283a0c59 100644
--- a/src/sass/settings/menus.scss
+++ b/src/sass/settings/menus.scss
@@ -3,13 +3,13 @@
 // ==========================================================================
 
 $plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
+$plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;
 $plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
+$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
+$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;
 
-$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default;
+$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;
+$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
 
-$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 6px) !default;
-$plyr-menu-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
-
-// Border seperators
-$plyr-menu-border-color: var(--plyr-menu-border-color, $plyr-color-gray-100) !default;
-$plyr-menu-border-shadow-color: var(--plyr-menu-border-shadow-color, #fff) !default;
+$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;
+$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;
diff --git a/src/sass/settings/progress.scss b/src/sass/settings/progress.scss
index 7e76da19..4e5105f0 100644
--- a/src/sass/settings/progress.scss
+++ b/src/sass/settings/progress.scss
@@ -10,5 +10,5 @@ $plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba(
 $plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
 $plyr-audio-progress-buffered-background: var(
   --plyr-audio-progress-buffered-background,
-  rgba($plyr-color-gray-200, 0.66)
+  rgba($plyr-color-gray-200, 0.6)
 ) !default;
diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss
index 928a46b3..444b43da 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -5,7 +5,6 @@
 // Thumb
 $plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default;
 $plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default;
-$plyr-range-thumb-border: var(--plyr-range-thumb-border, 2px solid transparent) !default;
 $plyr-range-thumb-shadow: var(
   --plyr-range-thumb-shadow,
   0 1px 1px rgba($plyr-color-gray-900, 0.15),
@@ -13,15 +12,10 @@ $plyr-range-thumb-shadow: var(
 ) !default;
 
 // Active state
-$plyr-range-thumb-active-shadow-color: var(--plyr-range-thumb-active-shadow-color, rgba(#fff, 0.5));
 $plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;
 
 // Track
 $plyr-range-track-height: var(--plyr-range-track-height, 5px) !default;
-$plyr-range-max-height: var(
-  --plyr-range-max-height,
-  calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height})
-) !default;
 
 // Fill
 $plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;
@@ -31,11 +25,16 @@ $plyr-video-range-track-background: var(
   --plyr-video-range-track-background,
   $plyr-video-progress-buffered-background
 ) !default;
+$plyr-video-range-thumb-active-shadow-color: var(
+  --plyr-audio-range-thumb-active-shadow-color,
+  rgba(#fff, 0.5)
+) !default;
+
 $plyr-audio-range-track-background: var(
   --plyr-audio-range-track-background,
   $plyr-audio-progress-buffered-background
 ) !default;
-$plyr-audio-range-thumb-shadow-color: var(
-  --plyr-audio-range-thumb-shadow-color,
+$plyr-audio-range-thumb-active-shadow-color: var(
+  --plyr-audio-range-thumb-active-shadow-color,
   rgba($plyr-color-gray-900, 0.1)
 ) !default;
diff --git a/src/sass/settings/tooltips.scss b/src/sass/settings/tooltips.scss
index 76a9855a..629e9358 100644
--- a/src/sass/settings/tooltips.scss
+++ b/src/sass/settings/tooltips.scss
@@ -7,4 +7,4 @@ $plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
 $plyr-tooltip-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default;
 $plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
 $plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default;
-$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default;
+$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;
diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss
index f424ecef..17db54f2 100644
--- a/src/sass/settings/type.scss
+++ b/src/sass/settings/type.scss
@@ -2,20 +2,19 @@
 // Typography
 // ==========================================================================
 
-$plyr-font-family: var(--plyr-font-family) !default;
+$plyr-font-family: var(--plyr-font-family, inherit) !default;
 $plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;
 $plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;
 $plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;
 $plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;
 
 $plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;
-$plyr-font-size-menu: var(--plyr-font-size-time, $plyr-font-size-small) !default;
-$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
 $plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;
+$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
 
 $plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;
 $plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
 
 $plyr-line-height: var(--plyr-line-height, 1.7) !default;
 
-$plyr-font-smoothing: false !default;
+$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default;