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

1 files changed, 5 insertions, 65 deletions

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;
-}