Merge branch 'develop' into css-variables

# Conflicts:
#	demo/dist/demo.css
#	demo/dist/demo.js
#	demo/dist/demo.js.map
#	demo/dist/demo.min.js
#	demo/dist/demo.min.js.map
#	dist/plyr.css
#	dist/plyr.js
#	dist/plyr.js.map
#	dist/plyr.min.js
#	dist/plyr.min.js.map
#	dist/plyr.polyfilled.js
#	dist/plyr.polyfilled.js.map
#	dist/plyr.polyfilled.min.js
#	dist/plyr.polyfilled.min.js.map
#	gulpfile.js
#	src/sass/components/captions.scss
#	src/sass/components/control.scss

1 files changed, 31 insertions, 7 deletions

diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index d93a6f34..d5a9847e 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -33,19 +33,44 @@
     }
 }
 
+// Remove any link styling
+a.plyr__control {
+    text-decoration: none;
+
+    &::after,
+    &::before {
+        display: none;
+    }
+}
+
 // Change icons on state change
-.plyr__control[aria-pressed='false'] .icon--pressed,
-.plyr__control[aria-pressed='true'] .icon--not-pressed,
-.plyr__control[aria-pressed='false'] .label--pressed,
-.plyr__control[aria-pressed='true'] .label--not-pressed {
+.plyr__control:not(.plyr__control--pressed) .icon--pressed,
+.plyr__control.plyr__control--pressed .icon--not-pressed,
+.plyr__control:not(.plyr__control--pressed) .label--pressed,
+.plyr__control.plyr__control--pressed .label--not-pressed {
     display: none;
 }
 
-// Audio styles
+// 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-audio-control-bg-hover);
         color: var(--plyr-audio-control-color-hover);
     }
@@ -66,11 +91,10 @@
     transform: translate(-50%, -50%);
     z-index: 2;
 
+    // Offset icon to make the play button look right
     svg {
-        height: var(--plyr-control-icon-size-large);
         left: 2px; // Offset to make the play button look right
         position: relative;
-        width: var(--plyr-control-icon-size-large);
     }
 
     &:hover,