Merge branch 'develop' into css-variables

# Conflicts:
#	demo/dist/demo.css
#	demo/dist/demo.min.js.map
#	demo/index.html
#	dist/plyr.css
#	dist/plyr.min.js.map
#	dist/plyr.min.mjs.map
#	dist/plyr.polyfilled.min.js.map
#	dist/plyr.polyfilled.min.mjs.map
#	gulpfile.js
#	src/sass/base.scss
#	src/sass/components/control.scss
#	src/sass/settings/colors.scss
#	src/sass/settings/controls.scss

28 files changed, 334 insertions, 359 deletions

diff --git a/src/sass/base.scss b/src/sass/base.scss
index 84861e99..74dbb70f 100644
--- a/src/sass/base.scss
+++ b/src/sass/base.scss
@@ -5,24 +5,28 @@
 // Base
 .plyr {
     @include plyr-font-smoothing($plyr-font-smoothing);
-
+    align-items: center;
     direction: ltr;
+    display: flex;
+    flex-direction: column;
     font-family: var(--plyr-font-family);
     font-variant-numeric: tabular-nums; // Force monosace-esque number widths
     font-weight: var(--plyr-font-weight-regular);
+    height: 100%;
     line-height: var(--plyr-line-height);
     max-width: 100%;
     min-width: 200px;
     position: relative;
     text-shadow: none;
     transition: box-shadow 0.3s ease;
+    z-index: 0; // Force any border radius
 
     // Media elements
     video,
-    audio {
-        border-radius: inherit;
-        height: auto;
-        vertical-align: middle;
+    audio,
+    iframe {
+        display: block;
+        height: 100%;
         width: 100%;
     }
 
diff --git a/src/sass/components/badges.scss b/src/sass/components/badges.scss
index 46c87d03..b0d575bb 100644
--- a/src/sass/components/badges.scss
+++ b/src/sass/components/badges.scss
@@ -3,10 +3,10 @@
 // --------------------------------------------------------------
 
 .plyr__badge {
-    background: $plyr-badge-bg;
+    background: var(--plyr-badge-background, $plyr-badge-background);
     border-radius: 2px;
-    color: $plyr-badge-color;
-    font-size: var(--plyr-font-size-badge);
+    color: var(--plyr-badge-color, $plyr-badge-color);
+    font-size: var(--plyr-font-size-badge, $plyr-font-size-badge);
     line-height: 1;
     padding: 3px 4px;
 }
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
index d7951b96..85899ef3 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -10,7 +10,6 @@
 .plyr__captions {
     animation: plyr-fade-in 0.3s ease;
     bottom: 0;
-    color: var(--plyr-captions-text-color);
     display: none;
     font-size: $plyr-font-size-captions-small;
     left: 0;
@@ -21,9 +20,12 @@
     width: 100%;
 
     .plyr__caption {
-        background: var(--plyr-captions-background);
+        background: $plyr-captions-background;
+        background: var(--plyr-captions-background, $plyr-captions-background);
         border-radius: 2px;
         box-decoration-break: clone;
+        color: $plyr-captions-text-color;
+        color: var(--plyr-captions-text-color, $plyr-captions-text-color);
         line-height: 185%;
         padding: 0.2em 0.5em;
         white-space: pre-wrap;
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index ee24604e..2940897b 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -5,21 +5,22 @@
 .plyr__control {
     background: transparent;
     border: 0;
-    border-radius: var(--plyr-control-radius);
+    border-radius: $plyr-control-radius;
+    border-radius: var(--plyr-control-radius, $plyr-control-radius);
     color: inherit;
     cursor: pointer;
     flex-shrink: 0;
     overflow: visible; // IE11
-    padding: var(--plyr-control-padding);
+    padding: var(--plyr-control-padding, $plyr-control-padding);
     position: relative;
     transition: all 0.3s ease;
 
     svg {
         display: block;
         fill: currentColor;
-        height: var(--plyr-control-icon-size);
+        height: var(--plyr-control-icon-size, $plyr-control-icon-size);
         pointer-events: none;
-        width: var(--plyr-control-icon-size);
+        width: var(--plyr-control-icon-size, $plyr-control-icon-size);
     }
 
     // Default focus
@@ -50,64 +51,3 @@ a.plyr__control {
 .plyr__control.plyr__control--pressed .label--not-pressed {
     display: none;
 }
-
-// Audio control
-.plyr--audio .plyr__control {
-    &.plyr__tab-focus,
-    &:hover,
-    &[aria-expanded='true'] {
-        background: $plyr-audio-control-bg-hover;
-        color: $plyr-audio-control-color-hover;
-    }
-}
-
-// Video control
-.plyr--video .plyr__control {
-    svg {
-        filter: drop-shadow(0 1px 1px rgba(#000, 0.15));
-    }
-
-    // Hover and tab focus
-    &.plyr__tab-focus,
-    &:hover,
-    &[aria-expanded='true'] {
-        background: var(--plyr-video-control-bg-hover);
-        color: var(--plyr-video-control-color-hover);
-    }
-}
-
-// Large play button (video only)
-.plyr__control--overlaid {
-    background: var(--plyr-video-control-bg-hover);
-    border: 0;
-    border-radius: 100%;
-    box-shadow: 0 1px 1px rgba(#000, 0.15);
-    color: var(--plyr-video-control-color-hover);
-    display: none;
-    left: 50%;
-    padding: ceil($plyr-control-spacing * 1.5);
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 2;
-
-    // Offset icon to make the play button look right
-    svg {
-        left: 2px; // Offset to make the play button look right
-        position: relative;
-    }
-
-    &:hover,
-    &:focus {
-        background: var(--plyr-video-control-bg-hover);
-    }
-}
-
-.plyr--playing .plyr__control--overlaid {
-    opacity: 0;
-    visibility: hidden;
-}
-
-.plyr--full-ui.plyr--video .plyr__control--overlaid {
-    display: block;
-}
diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index f4559bba..50333701 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -12,11 +12,11 @@
     align-items: center;
     display: flex;
     justify-content: flex-end;
-    min-width: 0; // Fix for Edge issue where content would overflow
     text-align: center;
 
     .plyr__progress__container {
         flex: 1;
+        min-width: 0; // Fix for Edge issue where content would overflow
     }
 
     // Spacing
@@ -41,14 +41,6 @@
         &.plyr__time + .plyr__time {
             padding-left: 0;
         }
-
-        &.plyr__volume {
-            padding-right: ($plyr-control-spacing / 2);
-        }
-
-        &.plyr__volume:first-child {
-            padding-right: 0;
-        }
     }
 
     // Hide empty controls
@@ -57,40 +49,6 @@
     }
 }
 
-// Audio controls
-.plyr--audio .plyr__controls {
-    background: $plyr-audio-controls-bg;
-    border-radius: inherit;
-    color: $plyr-audio-control-color;
-    padding: $plyr-control-spacing;
-}
-
-// Video controls
-.plyr--video .plyr__controls {
-    background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-    bottom: 0;
-    color: $plyr-video-control-color;
-    left: 0;
-    padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
-    position: absolute;
-    right: 0;
-    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
-    z-index: 3;
-
-    @media (min-width: $plyr-bp-sm) {
-        padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
-    }
-}
-
-// Hide video controls
-.plyr--video.plyr--hide-controls .plyr__controls {
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(100%);
-}
-
 // Some options are hidden by default
 .plyr [data-plyr='captions'],
 .plyr [data-plyr='pip'],
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index b8c85284..50a47248 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -24,7 +24,7 @@
     // The actual menu container
     &__container {
         animation: plyr-popup 0.2s ease;
-        background: $plyr-menu-bg;
+        background: $plyr-menu-background;
         border-radius: 4px;
         bottom: 100%;
         box-shadow: $plyr-menu-shadow;
@@ -39,14 +39,13 @@
 
         > div {
             overflow: hidden;
-            transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
-                width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+            transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
         }
 
         // Arrow
         &::after {
             border: 4px solid transparent;
-            border-top-color: $plyr-menu-bg;
+            border-top-color: $plyr-menu-background;
             content: '';
             height: 0;
             position: absolute;
@@ -74,8 +73,7 @@
             color: $plyr-menu-color;
             display: flex;
             font-size: $plyr-font-size-menu;
-            padding: ceil($plyr-control-padding / 2)
-                ceil($plyr-control-padding * 1.5);
+            padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5);
             user-select: none;
             width: 100%;
 
@@ -174,7 +172,7 @@
 
             &[aria-checked='true'] {
                 &::before {
-                    background: $plyr-color-main;
+                    background: var(--plyr-color-main, $plyr-color-main);
                 }
                 &::after {
                     opacity: 1;
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss
index 04c83516..c15ee911 100644
--- a/src/sass/components/progress.scss
+++ b/src/sass/components/progress.scss
@@ -67,25 +67,16 @@ $plyr-progress-offset: $plyr-range-thumb-height;
     }
 }
 
-.plyr--video .plyr__progress__buffer {
-    box-shadow: 0 1px 1px rgba(#000, 0.15);
-    color: $plyr-video-progress-buffered-bg;
-}
-
-.plyr--audio .plyr__progress__buffer {
-    color: $plyr-audio-progress-buffered-bg;
-}
-
 // Loading state
 .plyr--loading .plyr__progress__buffer {
     animation: plyr-progress 1s linear infinite;
     background-image: linear-gradient(
         -45deg,
-        $plyr-progress-loading-bg 25%,
+        var(--plyr-progress-loading-background, $plyr-progress-loading-background) 25%,
         transparent 25%,
         transparent 50%,
-        $plyr-progress-loading-bg 50%,
-        $plyr-progress-loading-bg 75%,
+        var(--plyr-progress-loading-background, $plyr-progress-loading-background) 50%,
+        var(--plyr-progress-loading-background, $plyr-progress-loading-background) 75%,
         transparent 75%,
         transparent
     );
@@ -95,9 +86,9 @@ $plyr-progress-offset: $plyr-range-thumb-height;
 }
 
 .plyr--video.plyr--loading .plyr__progress__buffer {
-    background-color: $plyr-video-progress-buffered-bg;
+    background-color: $plyr-video-progress-buffered-background;
 }
 
 .plyr--audio.plyr--loading .plyr__progress__buffer {
-    background-color: $plyr-audio-progress-buffered-bg;
+    background-color: $plyr-audio-progress-buffered-background;
 }
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index ee64271b..7b13348e 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -9,7 +9,7 @@
     border: 0;
     border-radius: ($plyr-range-thumb-height * 2);
     // color is used in JS to populate lower fill for WebKit
-    color: $plyr-range-fill-bg;
+    color: $plyr-range-fill-background;
     display: block;
     height: $plyr-range-max-height;
     margin: 0;
@@ -19,11 +19,7 @@
 
     &::-webkit-slider-runnable-track {
         @include plyr-range-track();
-        background-image: linear-gradient(
-            to right,
-            currentColor var(--value, 0%),
-            transparent var(--value, 0%)
-        );
+        background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
     }
 
     &::-webkit-slider-thumb {
@@ -96,69 +92,3 @@
         }
     }
 }
-
-// Video range inputs
-.plyr--full-ui.plyr--video input[type='range'] {
-    &::-webkit-slider-runnable-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    &::-moz-range-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    &::-ms-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    // Pressed styles
-    &:active {
-        &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active();
-        }
-
-        &::-moz-range-thumb {
-            @include plyr-range-thumb-active();
-        }
-
-        &::-ms-thumb {
-            @include plyr-range-thumb-active();
-        }
-    }
-}
-
-// Audio range inputs
-.plyr--full-ui.plyr--audio input[type='range'] {
-    &::-webkit-slider-runnable-track {
-        background-color: $plyr-audio-range-track-bg;
-    }
-
-    &::-moz-range-track {
-        background-color: $plyr-audio-range-track-bg;
-    }
-
-    &::-ms-track {
-        background-color: $plyr-audio-range-track-bg;
-    }
-
-    // Pressed styles
-    &:active {
-        &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active(
-                $plyr-audio-range-thumb-shadow-color
-            );
-        }
-
-        &::-moz-range-thumb {
-            @include plyr-range-thumb-active(
-                $plyr-audio-range-thumb-shadow-color
-            );
-        }
-
-        &::-ms-thumb {
-            @include plyr-range-thumb-active(
-                $plyr-audio-range-thumb-shadow-color
-            );
-        }
-    }
-}
diff --git a/src/sass/components/times.scss b/src/sass/components/times.scss
index 240d3528..7d7a50f1 100644
--- a/src/sass/components/times.scss
+++ b/src/sass/components/times.scss
@@ -18,7 +18,3 @@
         display: none;
     }
 }
-
-.plyr--video .plyr__time {
-    text-shadow: 0 1px 1px rgba(#000, 0.15);
-}
diff --git a/src/sass/components/tooltips.scss b/src/sass/components/tooltips.scss
index 80603bb5..15f11f03 100644
--- a/src/sass/components/tooltips.scss
+++ b/src/sass/components/tooltips.scss
@@ -3,7 +3,7 @@
 // --------------------------------------------------------------
 
 .plyr__tooltip {
-    background: $plyr-tooltip-bg;
+    background: $plyr-tooltip-background;
     border-radius: $plyr-tooltip-radius;
     bottom: 100%;
     box-shadow: $plyr-tooltip-shadow;
@@ -27,7 +27,7 @@
     &::before {
         border-left: $plyr-tooltip-arrow-size solid transparent;
         border-right: $plyr-tooltip-arrow-size solid transparent;
-        border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
+        border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;
         bottom: -$plyr-tooltip-arrow-size;
         content: '';
         height: 0;
diff --git a/src/sass/components/video.scss b/src/sass/components/video.scss
deleted file mode 100644
index fdcf4f2d..00000000
--- a/src/sass/components/video.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-// --------------------------------------------------------------
-// Video styles
-// --------------------------------------------------------------
-
-.plyr--video {
-    background: #000;
-    overflow: hidden;
-
-    // Menu open
-    &.plyr--menu-open {
-        overflow: visible;
-    }
-}
-
-.plyr__video-wrapper {
-    background: #000;
-    border-radius: inherit;
-    overflow: hidden;
-    position: relative;
-    // Require z-index to force border-radius
-    z-index: 0;
-}
-
-// Default to 16:9 ratio but this is set by JavaScript based on config
-$embed-padding: ((100 / 16) * 9);
-
-.plyr__video-embed,
-.plyr__video-wrapper--fixed-ratio {
-    height: 0;
-    padding-bottom: to-percentage($embed-padding);
-}
-
-.plyr__video-embed iframe,
-.plyr__video-wrapper--fixed-ratio video {
-    border: 0;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    user-select: none;
-    width: 100%;
-}
-
-// If the full custom UI is supported
-.plyr--full-ui .plyr__video-embed {
-    $height: 240;
-    $offset: to-percentage(($height - $embed-padding) / ($height / 50));
-
-    // Only used for Vimeo
-    > .plyr__video-embed__container {
-        padding-bottom: to-percentage($height);
-        position: relative;
-        transform: translateY(-$offset);
-    }
-}
diff --git a/src/sass/components/volume.scss b/src/sass/components/volume.scss
index 82a6dd36..614b35f5 100644
--- a/src/sass/components/volume.scss
+++ b/src/sass/components/volume.scss
@@ -5,33 +5,21 @@
 .plyr__volume {
     align-items: center;
     display: flex;
-    flex: 1;
+    max-width: 110px;
+    min-width: 80px;
     position: relative;
+    width: 20%;
 
     input[type='range'] {
         margin-left: ($plyr-control-spacing / 2);
+        margin-right: ($plyr-control-spacing / 2);
         position: relative;
         z-index: 2;
     }
-
-    @media (min-width: $plyr-bp-sm) {
-        max-width: 90px;
-    }
-
-    @media (min-width: $plyr-bp-md) {
-        max-width: 110px;
-    }
 }
 
-// Hide sound controls on iOS
-// It's not supported to change volume using JavaScript:
-// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
+// Auto size on iOS as there's no slider
 .plyr--is-ios .plyr__volume {
-    display: none !important;
-}
-
-// Vimeo has no toggle mute method so hide mute button
-// https://github.com/vimeo/player.js/issues/236#issuecomment-384663183
-.plyr--is-ios.plyr--vimeo [data-plyr='mute'] {
-    display: none !important;
+    min-width: 0;
+    width: auto;
 }
diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss
index 074c27c1..493df3a8 100644
--- a/src/sass/lib/css-vars.scss
+++ b/src/sass/lib/css-vars.scss
@@ -27,7 +27,7 @@ $css-vars-use-native: false !default;
 //
 // E.G.:
 // color: var(--main-color);
-// background: var(--main-bg, green);
+// background: var(--main-background, green);
 ///
 @function var($args...) {
     // CHECK PARAMS
diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss
index acd8af1e..2426ef68 100644
--- a/src/sass/lib/mixins.scss
+++ b/src/sass/lib/mixins.scss
@@ -37,7 +37,7 @@
 }
 
 @mixin plyr-range-thumb() {
-    background: $plyr-range-thumb-bg;
+    background: $plyr-range-thumb-background;
     border: 0;
     border-radius: 100%;
     box-shadow: $plyr-range-thumb-shadow;
@@ -47,7 +47,7 @@
     width: $plyr-range-thumb-height;
 }
 
-@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) {
+@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-background, 0.5)) {
     box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
 }
 
@@ -66,12 +66,13 @@
 
     .plyr__video-wrapper {
         height: 100%;
-        width: 100%;
+        position: static;
     }
 
     // Vimeo requires some different styling
     &.plyr--vimeo .plyr__video-wrapper {
         height: 0;
+        position: relative;
         top: 50%;
         transform: translateY(-50%);
     }
diff --git a/src/sass/plugins/ads.scss b/src/sass/plugins/ads.scss
index c5acef75..a577e680 100644
--- a/src/sass/plugins/ads.scss
+++ b/src/sass/plugins/ads.scss
@@ -23,7 +23,7 @@
 
     // The countdown label
     &::after {
-        background: rgba($plyr-color-gunmetal, 0.8);
+        background: rgba($plyr-color-gray-900, 0.8);
         border-radius: 2px;
         bottom: $plyr-control-spacing;
         color: #fff;
diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/preview-thumbnails.scss
index 02a2f619..d20c9d18 100644
--- a/src/sass/plugins/previewThumbnails.scss
+++ b/src/sass/plugins/preview-thumbnails.scss
@@ -3,19 +3,19 @@
 // --------------------------------------------------------------
 
 $plyr-preview-padding: $plyr-tooltip-padding !default;
-$plyr-preview-bg: $plyr-tooltip-bg !default;
+$plyr-preview-background: $plyr-tooltip-background !default;
 $plyr-preview-radius: $plyr-tooltip-radius !default;
 $plyr-preview-shadow: $plyr-tooltip-shadow !default;
 $plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
-$plyr-preview-image-bg: $plyr-color-heather !default;
+$plyr-preview-image-background: $plyr-color-gray-200 !default;
 $plyr-preview-time-font-size: $plyr-font-size-time !default;
 $plyr-preview-time-padding: 3px 6px !default;
-$plyr-preview-time-bg: rgba(0, 0, 0, 0.55);
+$plyr-preview-time-background: rgba(0, 0, 0, 0.55);
 $plyr-preview-time-color: #fff;
 $plyr-preview-time-bottom-offset: 6px;
 
 .plyr__preview-thumb {
-    background-color: $plyr-preview-bg;
+    background-color: $plyr-preview-background;
     border-radius: 3px;
     bottom: 100%;
     box-shadow: $plyr-preview-shadow;
@@ -38,7 +38,7 @@ $plyr-preview-time-bottom-offset: 6px;
     &::before {
         border-left: $plyr-preview-arrow-size solid transparent;
         border-right: $plyr-preview-arrow-size solid transparent;
-        border-top: $plyr-preview-arrow-size solid $plyr-preview-bg;
+        border-top: $plyr-preview-arrow-size solid $plyr-preview-background;
         bottom: -$plyr-preview-arrow-size;
         content: '';
         height: 0;
@@ -50,7 +50,7 @@ $plyr-preview-time-bottom-offset: 6px;
     }
 
     &__image-container {
-        background: $plyr-preview-image-bg;
+        background: $plyr-preview-image-background;
         border-radius: ($plyr-preview-radius - 1px);
         overflow: hidden;
         position: relative;
@@ -77,7 +77,7 @@ $plyr-preview-time-bottom-offset: 6px;
         z-index: 3;
 
         span {
-            background-color: $plyr-preview-time-bg;
+            background-color: $plyr-preview-time-background;
             border-radius: ($plyr-preview-radius - 1px);
             color: $plyr-preview-time-color;
             font-size: $plyr-preview-time-font-size;
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index 1b40f7a9..3672b689 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -37,14 +37,16 @@ $css-vars-use-native: true;
 @import 'components/poster';
 @import 'components/times';
 @import 'components/tooltips';
-@import 'components/video';
 @import 'components/progress';
 @import 'components/volume';
 
+@import 'types/audio';
+@import 'types/video';
+
 @import 'states/fullscreen';
 
 @import 'plugins/ads';
-@import 'plugins/previewThumbnails';
+@import 'plugins/preview-thumbnails';
 
 @import 'utils/animation';
 @import 'utils/hidden';
diff --git a/src/sass/settings/badges.scss b/src/sass/settings/badges.scss
index 4f98c9a8..7915c048 100644
--- a/src/sass/settings/badges.scss
+++ b/src/sass/settings/badges.scss
@@ -2,5 +2,5 @@
 // Badges
 // ==========================================================================
 
-$plyr-badge-bg: $plyr-color-fiord !default;
+$plyr-badge-background: $plyr-color-gray-700 !default;
 $plyr-badge-color: #fff !default;
diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss
index 46c9cfc8..50f577dc 100644
--- a/src/sass/settings/captions.scss
+++ b/src/sass/settings/captions.scss
@@ -9,10 +9,3 @@ $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;
-
-@include css-vars(
-    (
-        --plyr-captions-background: $plyr-captions-background,
-        --plyr-captions-text-color: $plyr-captions-text-color
-    )
-);
diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss
index c0867b85..6c9b0a3f 100644
--- a/src/sass/settings/colors.scss
+++ b/src/sass/settings/colors.scss
@@ -2,18 +2,32 @@
 // Colors
 // ==========================================================================
 
-$plyr-color-main: #fff !default;
-$plyr-color-gunmetal: #2f343d !default;
-$plyr-color-fiord: #4f5b5f !default;
-$plyr-color-lynch: #6b7d85 !default;
-$plyr-color-heather: #b7c5cd !default;
+$plyr-color-main: hsl(198, 100%, 50%) !default;
+
+// Grayscale
+$plyr-color-gray-900: hsl(210, 15%, 16%);
+$plyr-color-gray-800: lighten($plyr-color-gray-900, 9%);
+$plyr-color-gray-700: lighten($plyr-color-gray-800, 9%);
+$plyr-color-gray-600: lighten($plyr-color-gray-700, 9%);
+$plyr-color-gray-500: lighten($plyr-color-gray-600, 9%);
+$plyr-color-gray-400: lighten($plyr-color-gray-500, 9%);
+$plyr-color-gray-300: lighten($plyr-color-gray-400, 9%);
+$plyr-color-gray-200: lighten($plyr-color-gray-300, 9%);
+$plyr-color-gray-100: lighten($plyr-color-gray-200, 9%);
+$plyr-color-gray-50: lighten($plyr-color-gray-100, 9%);
 
 @include css-vars(
     (
         --plyr-color-main: $plyr-color-main,
-        --plyr-color-gunmetal: $plyr-color-gunmetal,
-        --plyr-color-fiord: $plyr-color-fiord,
-        --plyr-color-lynch: $plyr-color-lynch,
-        --plyr-color-heather: $plyr-color-heather
+        --plyr-color-gray-900: $plyr-color-gray-900,
+        --plyr-color-gray-800: $plyr-color-gray-800,
+        --plyr-color-gray-700: $plyr-color-gray-700,
+        --plyr-color-gray-600: $plyr-color-gray-600,
+        --plyr-color-gray-500: $plyr-color-gray-500,
+        --plyr-color-gray-400: $plyr-color-gray-400,
+        --plyr-color-gray-300: $plyr-color-gray-300,
+        --plyr-color-gray-200: $plyr-color-gray-200,
+        --plyr-color-gray-100: $plyr-color-gray-100,
+        --plyr-color-gray-50: $plyr-color-gray-50
     )
 );
diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss
index 0c88163d..a4009758 100644
--- a/src/sass/settings/controls.scss
+++ b/src/sass/settings/controls.scss
@@ -7,29 +7,12 @@ $plyr-control-spacing: 10px !default;
 $plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
 $plyr-control-radius: 3px !default;
 
-$plyr-video-controls-bg: #000 !default;
+$plyr-video-controls-background: linear-gradient(rgba(#000, 0), rgba(#000, 0.75)) !default;
 $plyr-video-control-color: #fff !default;
-$plyr-video-control-color-hover: #000 !default;
-$plyr-video-control-bg-hover: var(--plyr-color-main) !default;
+$plyr-video-control-color-hover: #fff !default;
+$plyr-video-control-background-hover: $plyr-color-main !default;
 
-$plyr-audio-controls-bg: #fff !default;
-$plyr-audio-control-color: var(--plyr-color-fiord) !default;
+$plyr-audio-controls-background: #fff !default;
+$plyr-audio-control-color: $plyr-color-gray-700 !default;
 $plyr-audio-control-color-hover: #fff !default;
-$plyr-audio-control-bg-hover: var(--plyr-color-main) !default;
-
-@include css-vars(
-    (
-        --plyr-control-icon-size: $plyr-control-icon-size,
-        --plyr-control-spacing: $plyr-control-spacing,
-        --plyr-control-padding: $plyr-control-padding,
-        --plyr-control-radius: $plyr-control-radius,
-        --plyr-video-controls-bg: $plyr-video-controls-bg,
-        --plyr-video-control-color: $plyr-video-control-color,
-        --plyr-video-control-color-hover: $plyr-video-control-color-hover,
-        --plyr-video-control-bg-hover: $plyr-video-control-bg-hover,
-        --plyr-audio-controls-bg: $plyr-audio-controls-bg,
-        --plyr-audio-control-color: $plyr-audio-control-color,
-        --plyr-audio-control-color-hover: $plyr-audio-control-color-hover,
-        --plyr-audio-control-bg-hover: $plyr-audio-control-bg-hover
-    )
-);
+$plyr-audio-control-background-hover: $plyr-color-main !default;
diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss
index 64df9863..62c3dd04 100644
--- a/src/sass/settings/menus.scss
+++ b/src/sass/settings/menus.scss
@@ -2,9 +2,9 @@
 // Menus
 // ==========================================================================
 
-$plyr-menu-bg: rgba(#fff, 0.9) !default;
-$plyr-menu-color: $plyr-color-fiord !default;
+$plyr-menu-background: rgba(#fff, 0.9) !default;
+$plyr-menu-color: $plyr-color-gray-700 !default;
 $plyr-menu-arrow-size: 6px !default;
-$plyr-menu-border-color: $plyr-color-heather !default;
+$plyr-menu-border-color: rgba($plyr-color-gray-500, 0.2) !default;
 $plyr-menu-border-shadow-color: #fff !default;
 $plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
diff --git a/src/sass/settings/progress.scss b/src/sass/settings/progress.scss
index 074ee3c6..a0e7f755 100644
--- a/src/sass/settings/progress.scss
+++ b/src/sass/settings/progress.scss
@@ -4,8 +4,8 @@
 
 // Loading
 $plyr-progress-loading-size: 25px !default;
-$plyr-progress-loading-bg: rgba($plyr-color-gunmetal, 0.6) !default;
+$plyr-progress-loading-background: rgba($plyr-color-gray-900, 0.6) !default;
 
 // Buffered
-$plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
-$plyr-audio-progress-buffered-bg: rgba($plyr-color-heather, 0.66) !default;
+$plyr-video-progress-buffered-background: rgba(#fff, 0.25) !default;
+$plyr-audio-progress-buffered-background: rgba($plyr-color-gray-200, 0.66) !default;
diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss
index 3d77f485..17740623 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -7,18 +7,18 @@ $plyr-range-thumb-active-shadow-width: 3px !default;
 
 // Thumb
 $plyr-range-thumb-height: 13px !default;
-$plyr-range-thumb-bg: #fff !default;
+$plyr-range-thumb-background: #fff !default;
 $plyr-range-thumb-border: 2px solid transparent !default;
-$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
+$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-900, 0.2) !default;
 
 // Track
 $plyr-range-track-height: 5px !default;
 $plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
 
 // Fill
-$plyr-range-fill-bg: var(--plyr-color-main);
+$plyr-range-fill-background: var(--plyr-color-main);
 
 // Type specific
-$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
-$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
+$plyr-video-range-track-background: $plyr-video-progress-buffered-background !default;
+$plyr-audio-range-track-background: $plyr-audio-progress-buffered-background !default;
 $plyr-audio-range-thumb-shadow-color: rgba(#000, 0.1) !default;
diff --git a/src/sass/settings/tooltips.scss b/src/sass/settings/tooltips.scss
index fd304d60..0ea5c582 100644
--- a/src/sass/settings/tooltips.scss
+++ b/src/sass/settings/tooltips.scss
@@ -2,8 +2,8 @@
 // Tooltips
 // ==========================================================================
 
-$plyr-tooltip-bg: rgba(#fff, 0.9) !default;
-$plyr-tooltip-color: $plyr-color-fiord !default;
+$plyr-tooltip-background: rgba(#fff, 0.9) !default;
+$plyr-tooltip-color: $plyr-color-gray-700 !default;
 $plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
 $plyr-tooltip-arrow-size: 4px !default;
 $plyr-tooltip-radius: 3px !default;
diff --git a/src/sass/states/fullscreen.scss b/src/sass/states/fullscreen.scss
index 5632a60f..73dffd29 100644
--- a/src/sass/states/fullscreen.scss
+++ b/src/sass/states/fullscreen.scss
@@ -24,8 +24,8 @@
 // Fallback for unsupported browsers
 .plyr--fullscreen-fallback {
     @include plyr-fullscreen-active();
-
     bottom: 0;
+    display: block;
     left: 0;
     position: fixed;
     right: 0;
diff --git a/src/sass/types/audio.scss b/src/sass/types/audio.scss
new file mode 100644
index 00000000..d39f6f96
--- /dev/null
+++ b/src/sass/types/audio.scss
@@ -0,0 +1,64 @@
+// --------------------------------------------------------------
+// Audio styles
+// --------------------------------------------------------------
+
+// Container
+.plyr--audio {
+    display: block;
+}
+
+// Controls container
+.plyr--audio .plyr__controls {
+    background: var(--plyr-audio-controls-background, $plyr-audio-controls-background);
+    border-radius: inherit;
+    color: var(--plyr-audio-control-color, $plyr-audio-control-color);
+    padding: $plyr-control-spacing;
+}
+
+// Control elements
+.plyr--audio .plyr__control {
+    &.plyr__tab-focus,
+    &:hover,
+    &[aria-expanded='true'] {
+        background: var(
+            --plyr-audio-control-background-hover,
+            var(--plyr-color-main, $plyr-audio-control-background-hover)
+        );
+        color: var(--plyr-audio-control-color-hover, $plyr-audio-control-color-hover);
+    }
+}
+
+// Range inputs
+.plyr--full-ui.plyr--audio input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background);
+    }
+
+    &::-moz-range-track {
+        background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background);
+    }
+
+    &::-ms-track {
+        background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background);
+    }
+
+    // Pressed styles
+    &:active {
+        &::-webkit-slider-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+
+        &::-moz-range-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+
+        &::-ms-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+    }
+}
+
+// Progress
+.plyr--audio .plyr__progress__buffer {
+    color: var(--plyr-audio-progress-buffered-background, $plyr-audio-progress-buffered-background);
+}
diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss
new file mode 100644
index 00000000..6a17a51a
--- /dev/null
+++ b/src/sass/types/video.scss
@@ -0,0 +1,166 @@
+// --------------------------------------------------------------
+// Video styles
+// --------------------------------------------------------------
+
+// Container
+.plyr--video {
+    background: #000;
+    overflow: hidden;
+
+    &.plyr--menu-open {
+        overflow: visible;
+    }
+}
+
+.plyr__video-wrapper {
+    background: #000;
+    height: 100%;
+    margin: auto;
+    overflow: hidden;
+    width: 100%;
+}
+
+// Default to 16:9 ratio but this is set by JavaScript based on config
+$embed-padding: ((100 / 16) * 9);
+
+.plyr__video-embed,
+.plyr__video-wrapper--fixed-ratio {
+    height: 0;
+    padding-bottom: to-percentage($embed-padding);
+}
+
+.plyr__video-embed iframe,
+.plyr__video-wrapper--fixed-ratio video {
+    border: 0;
+    left: 0;
+    position: absolute;
+    top: 0;
+}
+
+// If the full custom UI is supported
+.plyr--full-ui .plyr__video-embed {
+    $height: 240;
+    $offset: to-percentage(($height - $embed-padding) / ($height / 50));
+
+    // Only used for Vimeo
+    > .plyr__video-embed__container {
+        padding-bottom: to-percentage($height);
+        position: relative;
+        transform: translateY(-$offset);
+    }
+}
+
+// Controls container
+.plyr--video .plyr__controls {
+    background: $plyr-video-controls-background;
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    bottom: 0;
+    color: var(--plyr-video-control-color, $plyr-video-control-color);
+    left: 0;
+    padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
+    position: absolute;
+    right: 0;
+    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
+    z-index: 3;
+
+    @media (min-width: $plyr-bp-sm) {
+        padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
+    }
+}
+
+// Hide controls
+.plyr--video.plyr--hide-controls .plyr__controls {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(100%);
+}
+
+// Control elements
+.plyr--video .plyr__control {
+    // Hover and tab focus
+    &.plyr__tab-focus,
+    &:hover,
+    &[aria-expanded='true'] {
+        background: var(
+            --plyr-video-control-background-hover,
+            var(--plyr-color-main, $plyr-video-control-background-hover)
+        );
+        color: var(--plyr-video-control-color-hover, $plyr-video-control-color-hover);
+    }
+}
+
+// Large play button (video only)
+.plyr__control--overlaid {
+    background: var(
+        --plyr-video-control-background-hover,
+        var(--plyr-color-main, $plyr-video-control-background-hover)
+    );
+    border: 0;
+    border-radius: 100%;
+    color: $plyr-video-control-color;
+    display: none;
+    left: 50%;
+    opacity: 0.9;
+    padding: ceil($plyr-control-spacing * 1.5);
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: 0.3s;
+    z-index: 2;
+
+    // Offset icon to make the play button look right
+    svg {
+        left: 2px;
+        position: relative;
+    }
+
+    &:hover,
+    &:focus {
+        opacity: 1;
+    }
+}
+
+.plyr--playing .plyr__control--overlaid {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.plyr--full-ui.plyr--video .plyr__control--overlaid {
+    display: block;
+}
+
+// Video range inputs
+.plyr--full-ui.plyr--video input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background);
+    }
+
+    &::-moz-range-track {
+        background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background);
+    }
+
+    &::-ms-track {
+        background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background);
+    }
+
+    // Pressed styles
+    &:active {
+        &::-webkit-slider-thumb {
+            @include plyr-range-thumb-active();
+        }
+
+        &::-moz-range-thumb {
+            @include plyr-range-thumb-active();
+        }
+
+        &::-ms-thumb {
+            @include plyr-range-thumb-active();
+        }
+    }
+}
+
+// Progress
+.plyr--video .plyr__progress__buffer {
+    color: var(--plyr-video-progress-buffered-background, $plyr-video-progress-buffered-background);
+}