From 6864149989c6a5b1bb6e9199e1f8af062c64dcc4 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Wed, 20 Dec 2017 15:14:05 +0000
Subject: Converted to SASS/SCSS

---
 src/js/captions.js                |   5 +-
 src/js/controls.js                |  33 +-
 src/js/defaults.js                |  43 ++-
 src/js/fullscreen.js              |   8 +-
 src/js/listeners.js               |  34 +-
 src/js/plyr.js                    |  14 +-
 src/js/ui.js                      |   5 +-
 src/less/base.less                |  55 ---
 src/less/bundle.less              |  31 --
 src/less/components/badges.less   |  12 -
 src/less/components/captions.less |  58 ---
 src/less/components/control.less  |  89 -----
 src/less/components/controls.less | 105 ------
 src/less/components/embed.less    |  35 --
 src/less/components/menus.less    | 190 ----------
 src/less/components/progress.less |  96 -----
 src/less/components/sliders.less  | 142 -------
 src/less/components/times.less    |  24 --
 src/less/components/tooltips.less |  87 -----
 src/less/components/video.less    |  21 --
 src/less/components/volume.less   |  29 --
 src/less/lib/animation.less       |  31 --
 src/less/lib/mixins.less          |  98 -----
 src/less/settings.less            | 112 ------
 src/less/states/fullscreen.less   |  31 --
 src/less/utils/animation.less     |   7 -
 src/less/utils/hidden.less        |  33 --
 src/sass/base.scss                |  58 +++
 src/sass/bundle.scss              |  31 ++
 src/sass/components/badges.scss   |  12 +
 src/sass/components/captions.scss |  58 +++
 src/sass/components/control.scss  |  89 +++++
 src/sass/components/controls.scss | 105 ++++++
 src/sass/components/embed.scss    |  35 ++
 src/sass/components/menus.scss    | 190 ++++++++++
 src/sass/components/progress.scss |  94 +++++
 src/sass/components/sliders.scss  | 139 +++++++
 src/sass/components/times.scss    |  24 ++
 src/sass/components/tooltips.scss |  85 +++++
 src/sass/components/video.scss    |  21 ++
 src/sass/components/volume.scss   |  29 ++
 src/sass/lib/animation.scss       |  31 ++
 src/sass/lib/mixins.scss          |  99 +++++
 src/sass/settings.scss            | 102 +++++
 src/sass/states/fullscreen.scss   |  31 ++
 src/sass/utils/animation.scss     |   7 +
 src/sass/utils/hidden.scss        |  35 ++
 src/scss/mixins.scss              |  29 --
 src/scss/plyr.scss                | 764 --------------------------------------
 src/scss/variables.scss           |  73 ----
 50 files changed, 1400 insertions(+), 2169 deletions(-)
 delete mode 100644 src/less/base.less
 delete mode 100644 src/less/bundle.less
 delete mode 100644 src/less/components/badges.less
 delete mode 100644 src/less/components/captions.less
 delete mode 100644 src/less/components/control.less
 delete mode 100644 src/less/components/controls.less
 delete mode 100644 src/less/components/embed.less
 delete mode 100644 src/less/components/menus.less
 delete mode 100644 src/less/components/progress.less
 delete mode 100644 src/less/components/sliders.less
 delete mode 100644 src/less/components/times.less
 delete mode 100644 src/less/components/tooltips.less
 delete mode 100644 src/less/components/video.less
 delete mode 100644 src/less/components/volume.less
 delete mode 100644 src/less/lib/animation.less
 delete mode 100644 src/less/lib/mixins.less
 delete mode 100644 src/less/settings.less
 delete mode 100644 src/less/states/fullscreen.less
 delete mode 100644 src/less/utils/animation.less
 delete mode 100644 src/less/utils/hidden.less
 create mode 100644 src/sass/base.scss
 create mode 100644 src/sass/bundle.scss
 create mode 100644 src/sass/components/badges.scss
 create mode 100644 src/sass/components/captions.scss
 create mode 100644 src/sass/components/control.scss
 create mode 100644 src/sass/components/controls.scss
 create mode 100644 src/sass/components/embed.scss
 create mode 100644 src/sass/components/menus.scss
 create mode 100644 src/sass/components/progress.scss
 create mode 100644 src/sass/components/sliders.scss
 create mode 100644 src/sass/components/times.scss
 create mode 100644 src/sass/components/tooltips.scss
 create mode 100644 src/sass/components/video.scss
 create mode 100644 src/sass/components/volume.scss
 create mode 100644 src/sass/lib/animation.scss
 create mode 100644 src/sass/lib/mixins.scss
 create mode 100644 src/sass/settings.scss
 create mode 100644 src/sass/states/fullscreen.scss
 create mode 100644 src/sass/utils/animation.scss
 create mode 100644 src/sass/utils/hidden.scss
 delete mode 100644 src/scss/mixins.scss
 delete mode 100644 src/scss/plyr.scss
 delete mode 100644 src/scss/variables.scss

(limited to 'src')

diff --git a/src/js/captions.js b/src/js/captions.js
index 037de128..847ef7ff 100644
--- a/src/js/captions.js
+++ b/src/js/captions.js
@@ -109,7 +109,10 @@ const captions = {
         }
 
         // Only get accepted kinds
-        return Array.from(this.media.textTracks || []).filter(track => ['captions', 'subtitles'].includes(track.kind));
+        return Array.from(this.media.textTracks || []).filter(track => [
+            'captions',
+            'subtitles',
+        ].includes(track.kind));
     },
 
     // Get the current track for the current language
diff --git a/src/js/controls.js b/src/js/controls.js
index 1bbe10d3..8138367e 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -46,7 +46,10 @@ const controls = {
         }
 
         // Insert new one
-        styleSheet.insertRule([selector, styles].join(' '));
+        styleSheet.insertRule([
+            selector,
+            styles,
+        ].join(' '));
     },
 
     // Get icon URL
@@ -417,7 +420,10 @@ const controls = {
 
         // Show/hide the tooltip
         // If the event is a moues in/out and percentage is inside bounds
-        if (utils.is.event(event) && ['mouseenter', 'mouseleave'].includes(event.type)) {
+        if (utils.is.event(event) && [
+            'mouseenter',
+            'mouseleave',
+        ].includes(event.type)) {
             utils.toggleClass(this.elements.display.seekTooltip, visible, event.type === 'mouseenter');
         }
     },
@@ -701,7 +707,15 @@ const controls = {
 
         // Set the default speeds
         if (!utils.is.object(this.options.speed) || !Object.keys(this.options.speed).length) {
-            this.options.speed = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+            this.options.speed = [
+                0.5,
+                0.75,
+                1,
+                1.25,
+                1.5,
+                1.75,
+                2,
+            ];
         }
 
         // Set options if passed and filter based on config
@@ -841,7 +855,10 @@ const controls = {
             // Restore auto height/width
             const restore = e => {
                 // We're only bothered about height and width on the container
-                if (e.target !== container || !['width', 'height'].includes(e.propertyName)) {
+                if (e.target !== container || ![
+                    'width',
+                    'height',
+                ].includes(e.propertyName)) {
                     return;
                 }
 
@@ -1211,7 +1228,13 @@ const controls = {
         if (this.config.tooltips.controls) {
             const labels = utils.getElements.call(
                 this,
-                [this.config.selectors.controls.wrapper, ' ', this.config.selectors.labels, ' .', this.config.classNames.hidden].join('')
+                [
+                    this.config.selectors.controls.wrapper,
+                    ' ',
+                    this.config.selectors.labels,
+                    ' .',
+                    this.config.classNames.hidden,
+                ].join('')
             );
 
             Array.from(labels).forEach(label => {
diff --git a/src/js/defaults.js b/src/js/defaults.js
index 75b31a6d..c6271a2a 100644
--- a/src/js/defaults.js
+++ b/src/js/defaults.js
@@ -61,7 +61,17 @@ const defaults = {
     // Quality default
     quality: {
         default: 'default',
-        options: ['hd2160', 'hd1440', 'hd1080', 'hd720', 'large', 'medium', 'small', 'tiny', 'default'],
+        options: [
+            'hd2160',
+            'hd1440',
+            'hd1080',
+            'hd720',
+            'large',
+            'medium',
+            'small',
+            'tiny',
+            'default',
+        ],
     },
 
     // Set loops
@@ -74,7 +84,15 @@ const defaults = {
     // Speed default and options to display
     speed: {
         selected: 1,
-        options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
+        options: [
+            0.5,
+            0.75,
+            1,
+            1.25,
+            1.5,
+            1.75,
+            2,
+        ],
     },
 
     // Keyboard shortcut settings
@@ -108,8 +126,25 @@ const defaults = {
     },
 
     // Default controls
-    controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
-    settings: ['captions', 'quality', 'speed', 'loop'],
+    controls: [
+        'play-large',
+        'play',
+        'progress',
+        'current-time',
+        'mute',
+        'volume',
+        'captions',
+        'settings',
+        'pip',
+        'airplay',
+        'fullscreen',
+    ],
+    settings: [
+        'captions',
+        'quality',
+        'speed',
+        'loop',
+    ],
 
     // Localisation
     i18n: {
diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js
index ac7d5fac..366ea729 100644
--- a/src/js/fullscreen.js
+++ b/src/js/fullscreen.js
@@ -12,7 +12,13 @@ const prefix = (() => {
         value = '';
     } else {
         // Check for fullscreen support by vendor prefix
-        ['webkit', 'o', 'moz', 'ms', 'khtml'].some(pre => {
+        [
+            'webkit',
+            'o',
+            'moz',
+            'ms',
+            'khtml',
+        ].some(pre => {
             if (utils.is.function(document[`${pre}CancelFullScreen`])) {
                 value = pre;
                 return true;
diff --git a/src/js/listeners.js b/src/js/listeners.js
index 32557e72..0d57f5e1 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -46,7 +46,29 @@ const listeners = {
             // Reset on keyup
             if (pressed) {
                 // Which keycodes should we prevent default
-                const preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67, 73, 76, 79];
+                const preventDefault = [
+                    48,
+                    49,
+                    50,
+                    51,
+                    52,
+                    53,
+                    54,
+                    56,
+                    57,
+                    32,
+                    75,
+                    38,
+                    40,
+                    77,
+                    39,
+                    37,
+                    70,
+                    67,
+                    73,
+                    76,
+                    79,
+                ];
 
                 // Check focused element
                 // and if the focused element is not editable (e.g. text input)
@@ -325,7 +347,10 @@ const listeners = {
 
         // Proxy events to container
         // Bubble up key events for Edge
-        utils.on(this.media, this.config.events.concat(['keyup', 'keydown']).join(' '), event => {
+        utils.on(this.media, this.config.events.concat([
+            'keyup',
+            'keydown',
+        ]).join(' '), event => {
             let detail = {};
 
             // Get error details from media
@@ -499,7 +524,10 @@ const listeners = {
 
             // Watch for cursor over controls so they don't hide when trying to interact
             utils.on(this.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
-                this.elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
+                this.elements.controls.pressed = [
+                    'mousedown',
+                    'touchstart',
+                ].includes(event.type);
             });
 
             // Focus in/out on controls
diff --git a/src/js/plyr.js b/src/js/plyr.js
index a482f41f..9b06ed65 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -939,10 +939,20 @@ class Plyr {
                 isEnterFullscreen = toggle.type === 'enterfullscreen';
 
                 // Whether to show controls
-                show = ['mouseenter', 'mousemove', 'touchstart', 'touchmove', 'focusin'].includes(toggle.type);
+                show = [
+                    'mouseenter',
+                    'mousemove',
+                    'touchstart',
+                    'touchmove',
+                    'focusin',
+                ].includes(toggle.type);
 
                 // Delay hiding on move events
-                if (['mousemove', 'touchmove', 'touchend'].includes(toggle.type)) {
+                if ([
+                    'mousemove',
+                    'touchmove',
+                    'touchend',
+                ].includes(toggle.type)) {
                     delay = 2000;
                 }
 
diff --git a/src/js/ui.js b/src/js/ui.js
index 80ec587e..44f1a367 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -153,7 +153,10 @@ const ui = {
 
     // Check if media is loading
     checkLoading(event) {
-        this.loading = ['stalled', 'waiting'].includes(event.type);
+        this.loading = [
+            'stalled',
+            'waiting',
+        ].includes(event.type);
 
         // Clear timer
         clearTimeout(this.timers.loading);
diff --git a/src/less/base.less b/src/less/base.less
deleted file mode 100644
index c17b3897..00000000
--- a/src/less/base.less
+++ /dev/null
@@ -1,55 +0,0 @@
-// --------------------------------------------------------------
-// Base styling
-// --------------------------------------------------------------
-
-// Base
-.plyr {
-    position: relative;
-    max-width: 100%;
-    min-width: 200px;
-    font-family: @plyr-font-family;
-    font-weight: @plyr-font-weight-regular;
-    line-height: @plyr-line-height;
-    direction: ltr;
-    text-shadow: none;
-    transition: box-shadow 0.3s ease;
-    .plyr-font-smoothing(@plyr-font-smoothing);
-
-    // Media elements
-    video,
-    audio {
-        width: 100%;
-        height: auto;
-        vertical-align: middle;
-        border-radius: inherit;
-    }
-
-    // Ignore focus
-    &:focus {
-        outline: 0;
-    }
-}
-
-// Full UI only
-.plyr--full-ui {
-    & when(@plyr-border-box = true) {
-        // border-box everything
-        // http://paulirish.com/2012/box-sizing-border-box-ftw/
-        &,
-        *,
-        *::after,
-        *::before {
-            box-sizing: border-box;
-        }
-    }
-
-    & when(@plyr-touch-action = true) {
-        // Fix 300ms delay
-        a,
-        button,
-        input,
-        label {
-            touch-action: manipulation;
-        }
-    }
-}
diff --git a/src/less/bundle.less b/src/less/bundle.less
deleted file mode 100644
index 2ee66ebc..00000000
--- a/src/less/bundle.less
+++ /dev/null
@@ -1,31 +0,0 @@
-// ==========================================================================
-// Plyr styles
-// https://github.com/sampotts/plyr
-// TODO: Review use of BEM classnames
-// ==========================================================================
-@charset 'UTF-8';
-
-@import 'settings';
-
-@import 'lib/animation';
-@import 'lib/mixins';
-
-@import 'base';
-
-@import 'components/badges';
-@import 'components/captions';
-@import 'components/control';
-@import 'components/controls';
-@import 'components/embed';
-@import 'components/menus';
-@import 'components/progress';
-@import 'components/sliders';
-@import 'components/times';
-@import 'components/tooltips';
-@import 'components/video';
-@import 'components/volume';
-
-@import 'states/fullscreen';
-
-@import 'utils/animation';
-@import 'utils/hidden';
diff --git a/src/less/components/badges.less b/src/less/components/badges.less
deleted file mode 100644
index 230f6c2a..00000000
--- a/src/less/components/badges.less
+++ /dev/null
@@ -1,12 +0,0 @@
-// --------------------------------------------------------------
-// Badges
-// --------------------------------------------------------------
-
-.plyr__badge {
-    padding: 3px 4px;
-    border-radius: 2px;
-    background: @plyr-menu-color;
-    color: @plyr-menu-bg;
-    font-size: @plyr-font-size-badge;
-    line-height: 1;
-}
diff --git a/src/less/components/captions.less b/src/less/components/captions.less
deleted file mode 100644
index b111cbce..00000000
--- a/src/less/components/captions.less
+++ /dev/null
@@ -1,58 +0,0 @@
-// --------------------------------------------------------------
-// Captions
-// --------------------------------------------------------------
-
-// Hide default captions
-.plyr--full-ui ::-webkit-media-text-track-container {
-    display: none;
-}
-
-.plyr__captions {
-    display: none;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    padding: @plyr-control-spacing;
-    transform: translateY(-(@plyr-control-spacing * 4));
-    transition: transform 0.4s ease-in-out;
-    animation: plyr-fade-in 0.3s ease;
-    color: @plyr-captions-color;
-    font-size: @plyr-font-size-captions-small;
-    text-align: center;
-
-    span {
-        border-radius: 2px;
-        padding: 0.2em 0.5em;
-        background: @plyr-captions-bg;
-        box-decoration-break: clone;
-        line-height: 185%;
-        white-space: pre-wrap;
-
-        // Firefox adds a <div> when using getCueAsHTML()
-        div {
-            display: inline;
-        }
-    }
-
-    span:empty {
-        display: none;
-    }
-
-    @media @plyr-mq-sm {
-        padding: (@plyr-control-spacing * 2);
-        font-size: @plyr-font-size-captions-base;
-    }
-
-    @media @plyr-mq-md {
-        font-size: @plyr-font-size-captions-medium;
-    }
-}
-
-.plyr--captions-active .plyr__captions {
-    display: block;
-}
-
-.plyr--hide-controls .plyr__captions {
-    transform: translateY(-(@plyr-control-spacing * 1.5));
-}
diff --git a/src/less/components/control.less b/src/less/components/control.less
deleted file mode 100644
index 0cf07b91..00000000
--- a/src/less/components/control.less
+++ /dev/null
@@ -1,89 +0,0 @@
-// --------------------------------------------------------------
-// Control buttons
-// --------------------------------------------------------------
-
-.plyr__control {
-    position: relative;
-    flex-shrink: 0;
-    overflow: visible; // IE11
-    padding: @plyr-control-padding;
-    border: 0;
-    background: transparent;
-    border-radius: @plyr-control-radius;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    color: inherit;
-
-    svg {
-        width: @plyr-control-icon-size;
-        height: @plyr-control-icon-size;
-        display: block;
-        fill: currentColor;
-        pointer-events: none;
-    }
-
-    // Default focus
-    &:focus {
-        outline: 0;
-    }
-
-    // Tab focus
-    &.plyr__tab-focus {
-        .plyr-tab-focus();
-    }
-}
-
-// 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 {
-    display: none;
-}
-
-// Audio styles
-.plyr--audio .plyr__control {
-    &.plyr__tab-focus,
-    &:hover,
-    &[aria-expanded='true'] {
-        background: @plyr-audio-control-bg-hover;
-        color: @plyr-audio-control-color-hover;
-    }
-}
-
-// Large play button (video only)
-.plyr__control--overlaid {
-    display: none;
-    position: absolute;
-    z-index: 2;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    padding: ceil(@plyr-control-spacing * 1.5);
-    background: fade(@plyr-video-control-bg-hover, 80%);
-    border: 0;
-    border-radius: 100%;
-    box-shadow: 0 1px 1px fade(#000, 15%);
-    color: @plyr-video-control-color;
-
-    svg {
-        position: relative;
-        left: 2px; // Offset to make the play button look right
-        width: @plyr-control-icon-size-large;
-        height: @plyr-control-icon-size-large;
-    }
-
-    &:hover,
-    &:focus {
-        background: @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/less/components/controls.less b/src/less/components/controls.less
deleted file mode 100644
index 65a42509..00000000
--- a/src/less/components/controls.less
+++ /dev/null
@@ -1,105 +0,0 @@
-// --------------------------------------------------------------
-// Controls
-// --------------------------------------------------------------
-
-// Hide native controls
-.plyr--full-ui ::-webkit-media-controls {
-    display: none;
-}
-
-// Playback controls
-.plyr__controls {
-    display: flex;
-    align-items: center;
-    text-align: center;
-
-    // Spacing
-    > .plyr__control,
-    .plyr__progress,
-    .plyr__time,
-    .plyr__menu {
-        margin-left: (@plyr-control-spacing / 2);
-
-        &:first-child,
-        &:first-child + [data-plyr='pause'] {
-            margin-left: 0;
-        }
-    }
-
-    .plyr__volume {
-        margin-left: (@plyr-control-spacing / 2);
-    }
-
-    @media @plyr-mq-sm {
-        > .plyr__control,
-        .plyr__progress,
-        .plyr__time,
-        .plyr__menu {
-            margin-left: @plyr-control-spacing;
-        }
-
-        > .plyr__control + .plyr__control,
-        .plyr__menu + .plyr__control,
-        > .plyr__control + .plyr__menu {
-            margin-left: (@plyr-control-spacing / 2);
-        }
-    }
-}
-
-// Video controls
-.plyr--video .plyr__controls {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 2;
-    padding: (@plyr-control-spacing * 3.5) @plyr-control-spacing @plyr-control-spacing;
-    background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-    color: @plyr-video-control-color;
-    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
-
-    .plyr__control {
-        svg {
-            filter: drop-shadow(0 1px 1px fade(#000, 15%));
-        }
-
-        // Hover and tab focus
-        &.plyr__tab-focus,
-        &:hover,
-        &[aria-expanded='true'] {
-            background: @plyr-video-control-bg-hover;
-            color: @plyr-video-control-color-hover;
-        }
-    }
-}
-
-// Audio controls
-.plyr--audio .plyr__controls {
-    padding: @plyr-control-spacing;
-    border-radius: inherit;
-    background: @plyr-audio-controls-bg;
-    color: @plyr-audio-control-color;
-}
-
-// Hide controls
-.plyr--video.plyr--hide-controls .plyr__controls {
-    opacity: 0;
-    transform: translateY(100%);
-    pointer-events: none;
-}
-
-// Some options are hidden by default
-.plyr [data-plyr='captions'],
-    .plyr [data-plyr='pip'],
-    .plyr [data-plyr='airplay'],
-    .plyr [data-plyr='fullscreen'] {
-    display: none;
-}
-.plyr--captions-enabled [data-plyr='captions'],
-    .plyr--pip-supported [data-plyr='pip'],
-    .plyr--airplay-supported [data-plyr='airplay'],
-    .plyr--fullscreen-enabled [data-plyr='fullscreen'] {
-    display: inline-block;
-}
diff --git a/src/less/components/embed.less b/src/less/components/embed.less
deleted file mode 100644
index a50a432b..00000000
--- a/src/less/components/embed.less
+++ /dev/null
@@ -1,35 +0,0 @@
-// --------------------------------------------------------------
-// Embedded players
-// YouTube, Vimeo, etc
-// --------------------------------------------------------------
-
-.plyr__video-embed {
-    // Default to 16:9 ratio but this is set by JavaScript based on config
-    @padding: ((100 / 16) * 9);
-    @height: 200;
-    @offset: unit((@height - @padding) / (@height / 50), ~'%');
-
-    padding-bottom: unit(@padding, ~'%');
-    height: 0;
-
-    iframe {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border: 0;
-        user-select: none;
-    }
-
-    // Vimeo hack
-    > div {
-        position: relative;
-        padding-bottom: unit(@height, ~'%');
-        transform: translateY(-@offset);
-    }
-}
-// To allow mouse events to be captured if full support
-.plyr--full-ui .plyr__video-embed iframe {
-    pointer-events: none;
-}
diff --git a/src/less/components/menus.less b/src/less/components/menus.less
deleted file mode 100644
index f0a92d06..00000000
--- a/src/less/components/menus.less
+++ /dev/null
@@ -1,190 +0,0 @@
-// --------------------------------------------------------------
-// Menus
-// --------------------------------------------------------------
-
-.plyr__menu {
-    display: flex; // Edge fix
-    position: relative;
-
-    // Animate the icon
-    .plyr__control svg {
-        transition: transform 0.3s ease;
-    }
-    .plyr__control[aria-expanded='true'] {
-        svg {
-            transform: rotate(90deg);
-        }
-
-        // Hide tooltip
-        .plyr__tooltip {
-            display: none;
-        }
-    }
-
-    // The actual menu container
-    &__container {
-        position: absolute;
-        z-index: 1;
-        bottom: 100%;
-        right: -3px;
-        margin-bottom: 10px;
-        animation: plyr-popup 0.2s ease;
-        background: @plyr-menu-bg;
-        border-radius: 4px;
-        box-shadow: @plyr-menu-shadow;
-        white-space: nowrap;
-        text-align: left;
-        color: @plyr-menu-color;
-        font-size: @plyr-font-size-base;
-
-        > 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);
-        }
-
-        // Arrow
-        &::after {
-            content: '';
-            position: absolute;
-            top: 100%;
-            right: 15px;
-            height: 0;
-            width: 0;
-            border: 4px solid transparent;
-            border-top-color: @plyr-menu-bg;
-        }
-
-        ul {
-            margin: 0;
-            padding: @plyr-control-padding;
-            list-style: none;
-            overflow: hidden;
-        }
-
-        // Options
-        .plyr__control {
-            display: flex;
-            align-items: center;
-            width: 100%;
-            padding: ceil(@plyr-control-padding / 2) (@plyr-control-padding * 2);
-            color: @plyr-menu-color;
-            user-select: none;
-
-            &::after {
-                content: '';
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                border: 4px solid transparent;
-                transition: border-color 0.2s ease;
-            }
-
-            &--forward {
-                padding-right: ceil(@plyr-control-padding * 4);
-
-                &::after {
-                    right: 5px;
-                    border-left-color: fade(@plyr-menu-color, 80%);
-                }
-
-                &.plyr__tab-focus::after,
-                &:hover::after {
-                    border-left-color: currentColor;
-                }
-            }
-
-            &--back {
-                position: relative;
-                @horizontal-padding: (@plyr-control-padding * 2);
-
-                width: ~'calc(100% - @{horizontal-padding})';
-                margin: @plyr-control-padding;
-                margin-bottom: floor(@plyr-control-padding / 2);
-                padding-left: ceil(@plyr-control-padding * 4);
-                font-weight: @plyr-font-weight-regular;
-
-                &::after {
-                    left: @plyr-control-padding;
-                    border-right-color: fade(@plyr-menu-color, 80%);
-                }
-
-                &::before {
-                    content: '';
-                    position: absolute;
-                    top: 100%;
-                    left: 0;
-                    right: 0;
-                    height: 1px;
-                    overflow: hidden;
-                    margin-top: ceil(@plyr-control-padding / 2);
-                    background: @plyr-menu-border-color;
-                    box-shadow: 0 1px 0 @plyr-menu-border-shadow-color;
-                }
-
-                &.plyr__tab-focus::after,
-                &:hover::after {
-                    border-right-color: currentColor;
-                }
-            }
-        }
-
-        label.plyr__control {
-            padding-left: @plyr-control-padding;
-
-            input[type='radio'] + span {
-                position: relative;
-                display: block;
-                flex-shrink: 0;
-                height: 16px;
-                width: 16px;
-                border-radius: 100%;
-                background: fade(#000, 10%);
-                margin-right: @plyr-control-spacing;
-                transition: all 0.3s ease;
-
-                &::after {
-                    content: '';
-                    position: absolute;
-                    height: 6px;
-                    width: 6px;
-                    top: 5px;
-                    left: 5px;
-                    transform: scale(0);
-                    opacity: 0;
-                    background: #fff;
-                    border-radius: 100%;
-                    transition: transform 0.3s ease, opacity 0.3s ease;
-                }
-            }
-
-            input[type='radio']:checked + span {
-                background: @plyr-color-main;
-
-                &::after {
-                    transform: scale(1);
-                    opacity: 1;
-                }
-            }
-
-            input[type='radio']:focus + span {
-                .plyr-tab-focus();
-            }
-
-            &.plyr__tab-focus input[type='radio'] + span,
-            &:hover input[type='radio'] + span {
-                background: fade(#000, 10%);
-            }
-        }
-
-        // Option value
-        .plyr__menu__value {
-            display: flex;
-            align-items: center;
-            margin-left: auto;
-            margin-right: -@plyr-control-padding;
-            padding-left: ceil(@plyr-control-padding * 3.5);
-            pointer-events: none;
-            overflow: hidden;
-        }
-    }
-}
diff --git a/src/less/components/progress.less b/src/less/components/progress.less
deleted file mode 100644
index 1a252937..00000000
--- a/src/less/components/progress.less
+++ /dev/null
@@ -1,96 +0,0 @@
-// --------------------------------------------------------------
-// Playback progress
-// --------------------------------------------------------------
-
-.plyr__progress {
-    position: relative;
-    display: flex;
-    flex: 1;
-
-    input[type='range'] {
-        position: relative;
-        z-index: 2;
-    }
-
-    // Seek tooltip to show time
-    .plyr__tooltip {
-        left: 0;
-        font-size: @plyr-font-size-time;
-    }
-}
-
-.plyr__progress--buffer {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    width: 100%;
-    height: @plyr-range-track-height;
-    margin: -(@plyr-range-track-height / 2) 0 0;
-    padding: 0;
-    background: transparent;
-    border: none;
-    border-radius: 100px;
-
-    // WebKit
-    -webkit-appearance: none;
-
-    &::-webkit-progress-bar {
-        background: transparent;
-        transition: width 0.2s ease;
-    }
-
-    &::-webkit-progress-value {
-        background: currentColor;
-        border-radius: 100px;
-        min-width: @plyr-range-track-height;
-    }
-
-    // Mozilla
-    &::-moz-progress-bar {
-        background: currentColor;
-        border-radius: 100px;
-        min-width: @plyr-range-track-height;
-        transition: width 0.2s ease;
-    }
-
-    // Microsoft
-    &::-ms-fill {
-        border-radius: 100px;
-        transition: width 0.2s ease;
-    }
-}
-
-.plyr--video .plyr__progress--buffer {
-    box-shadow: 0 1px 1px fade(#000, 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-size: @plyr-progress-loading-size @plyr-progress-loading-size;
-    background-repeat: repeat-x;
-    background-image: linear-gradient(
-        -45deg,
-        @plyr-progress-loading-bg 25%,
-        transparent 25%,
-        transparent 50%,
-        @plyr-progress-loading-bg 50%,
-        @plyr-progress-loading-bg 75%,
-        transparent 75%,
-        transparent
-    );
-    color: transparent;
-}
-
-.plyr--video.plyr--loading .plyr__progress--buffer {
-    background-color: @plyr-video-progress-buffered-bg;
-}
-
-.plyr--audio.plyr--loading .plyr__progress--buffer {
-    background-color: @plyr-audio-progress-buffered-bg;
-}
diff --git a/src/less/components/sliders.less b/src/less/components/sliders.less
deleted file mode 100644
index 41954a97..00000000
--- a/src/less/components/sliders.less
+++ /dev/null
@@ -1,142 +0,0 @@
-// --------------------------------------------------------------
-// Slider inputs - <input type="range">
-// --------------------------------------------------------------
-
-// Specificity is for bootstrap compatibility
-.plyr--full-ui input[type='range'] {
-    display: block;
-    height: @plyr-range-thumb-active-height;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    border: none;
-    background: transparent;
-    transition: box-shadow 0.3s ease;
-    border-radius: (@plyr-range-thumb-height * 2);
-
-    // Used in JS to populate lower fill for WebKit
-    color: @plyr-range-fill-bg;
-
-    // WebKit
-    -webkit-appearance: none;
-
-    &::-webkit-slider-runnable-track {
-        .plyr-range-track();
-    }
-
-    &::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        margin-top: -((@plyr-range-thumb-height - @plyr-range-track-height) / 2);
-        .plyr-range-thumb();
-    }
-
-    // Mozilla
-    &::-moz-range-track {
-        .plyr-range-track();
-    }
-
-    &::-moz-range-thumb {
-        .plyr-range-thumb();
-    }
-
-    &::-moz-range-progress {
-        height: @plyr-range-track-height;
-        background: currentColor;
-        border-radius: (@plyr-range-track-height / 2);
-    }
-
-    // Microsoft
-    &::-ms-track {
-        color: transparent;
-        .plyr-range-track();
-    }
-
-    &::-ms-fill-upper {
-        .plyr-range-track();
-    }
-
-    &::-ms-fill-lower {
-        .plyr-range-track();
-
-        background: currentColor;
-    }
-
-    &::-ms-thumb {
-        .plyr-range-thumb();
-        // For some reason, Edge uses the -webkit margin above
-        margin-top: 0;
-    }
-
-    &::-ms-tooltip {
-        display: none;
-    }
-
-    // Focus styles
-    &:focus {
-        outline: 0;
-    }
-
-    &::-moz-focus-outer {
-        border: 0;
-    }
-
-    &.plyr__tab-focus {
-        &::-webkit-slider-runnable-track {
-            .plyr-tab-focus();
-        }
-
-        &::-moz-range-track {
-            .plyr-tab-focus();
-        }
-
-        &::-ms-track {
-            .plyr-tab-focus();
-        }
-    }
-
-    // Pressed styles
-    &:active {
-        &::-webkit-slider-thumb {
-            .plyr-range-thumb-active();
-        }
-
-        &::-moz-range-thumb {
-            .plyr-range-thumb-active();
-        }
-
-        &::-ms-thumb {
-            .plyr-range-thumb-active();
-        }
-    }
-}
-
-// Video range inputs
-.plyr--full-ui.plyr--video input[type='range'] {
-    &::-webkit-slider-runnable-track {
-        background: @plyr-video-range-track-bg;
-    }
-
-    &::-moz-range-track {
-        background: @plyr-video-range-track-bg;
-    }
-
-    &::-ms-track {
-        background: @plyr-video-range-track-bg;
-    }
-}
-
-// Audio range inputs
-.plyr--full-ui.plyr--audio input[type='range'] {
-    &::-webkit-slider-runnable-track {
-        background: @plyr-audio-range-track-bg;
-    }
-
-    &::-moz-range-track {
-        background: @plyr-audio-range-track-bg;
-    }
-
-    &::-ms-track {
-        background: @plyr-audio-range-track-bg;
-    }
-}
diff --git a/src/less/components/times.less b/src/less/components/times.less
deleted file mode 100644
index 09a55702..00000000
--- a/src/less/components/times.less
+++ /dev/null
@@ -1,24 +0,0 @@
-// --------------------------------------------------------------
-// Time
-// --------------------------------------------------------------
-
-.plyr__time {
-    font-size: @plyr-font-size-time;
-}
-
-// Media duration hidden on small screens
-.plyr__time + .plyr__time {
-    // Add a slash in before
-    &::before {
-        content: '\2044';
-        margin-right: @plyr-control-spacing;
-    }
-
-    @media @plyr-mq-sm-max {
-        display: none;
-    }
-}
-
-.plyr--video .plyr__time {
-    text-shadow: 0 1px 1px fade(#000, 15%);
-}
diff --git a/src/less/components/tooltips.less b/src/less/components/tooltips.less
deleted file mode 100644
index 79b8e404..00000000
--- a/src/less/components/tooltips.less
+++ /dev/null
@@ -1,87 +0,0 @@
-// --------------------------------------------------------------
-// Tooltips
-// --------------------------------------------------------------
-
-.plyr__tooltip {
-    position: absolute;
-    z-index: 2;
-    bottom: 100%;
-    margin-bottom: (@plyr-tooltip-padding * 2);
-    padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5);
-    pointer-events: none;
-    opacity: 0;
-    background: @plyr-tooltip-bg;
-    border-radius: @plyr-tooltip-radius;
-    box-shadow: @plyr-tooltip-shadow;
-    color: @plyr-tooltip-color;
-    font-size: @plyr-font-size-small;
-    font-weight: @plyr-font-weight-regular;
-    line-height: 1.3;
-    transform: translate(-50%, 10px) scale(0.8);
-    transform-origin: 50% 100%;
-    transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
-
-    &::before {
-        // Arrows
-        content: '';
-        position: absolute;
-        width: 0;
-        height: 0;
-        left: 50%;
-        transform: translateX(-50%);
-
-        // The background triangle
-        bottom: -@plyr-tooltip-arrow-size;
-        border-right: @plyr-tooltip-arrow-size solid transparent;
-        border-top: @plyr-tooltip-arrow-size solid @plyr-tooltip-bg;
-        border-left: @plyr-tooltip-arrow-size solid transparent;
-        z-index: 2;
-    }
-}
-
-// Displaying
-.plyr .plyr__control:hover .plyr__tooltip,
-.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,
-.plyr__tooltip--visible {
-    opacity: 1;
-    transform: translate(-50%, 0) scale(1);
-}
-
-.plyr .plyr__control:hover .plyr__tooltip {
-    z-index: 3;
-}
-
-// First tooltip
-.plyr__controls > .plyr__control:first-child .plyr__tooltip,
-.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
-    left: 0;
-    transform: translate(0, 10px) scale(0.8);
-    transform-origin: 0 100%;
-
-    &::before {
-        left: (@plyr-control-icon-size / 2) + @plyr-control-padding;
-    }
-}
-
-// Last tooltip
-.plyr__controls > .plyr__control:last-child .plyr__tooltip {
-    right: 0;
-    transform: translate(0, 10px) scale(0.8);
-    transform-origin: 100% 100%;
-
-    &::before {
-        left: auto;
-        right: (@plyr-control-icon-size / 2) + @plyr-control-padding;
-        transform: translateX(50%);
-    }
-}
-
-.plyr__controls > .plyr__control:first-child,
-.plyr__controls > .plyr__control:first-child + .plyr__control,
-.plyr__controls > .plyr__control:last-child {
-    &:hover .plyr__tooltip,
-    &.plyr__tab-focus .plyr__tooltip,
-    .plyr__tooltip--visible {
-        transform: translate(0, 0) scale(1);
-    }
-}
diff --git a/src/less/components/video.less b/src/less/components/video.less
deleted file mode 100644
index 8bf43840..00000000
--- a/src/less/components/video.less
+++ /dev/null
@@ -1,21 +0,0 @@
-// --------------------------------------------------------------
-// Video styles
-// --------------------------------------------------------------
-
-.plyr--video {
-    overflow: hidden;
-
-    // Menu open
-    &.plyr--menu-open {
-        overflow: visible;
-    }
-}
-
-.plyr__video-wrapper {
-    position: relative;
-    background: #000;
-    border-radius: inherit;
-    // Require z-index to force border-radius
-    z-index: 0;
-    overflow: hidden;
-}
diff --git a/src/less/components/volume.less b/src/less/components/volume.less
deleted file mode 100644
index bb5a49ba..00000000
--- a/src/less/components/volume.less
+++ /dev/null
@@ -1,29 +0,0 @@
-// --------------------------------------------------------------
-// Volume
-// --------------------------------------------------------------
-
-.plyr__volume {
-    flex: 1;
-    position: relative;
-
-    input[type='range'] {
-        position: relative;
-        z-index: 2;
-    }
-
-    @media @plyr-mq-sm {
-        max-width: 50px;
-    }
-
-    @media @plyr-mq-md {
-        max-width: 80px;
-    }
-}
-
-// 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
-.plyr--is-ios .plyr__volume,
-.plyr--is-ios [data-plyr='mute'] {
-    display: none !important;
-}
diff --git a/src/less/lib/animation.less b/src/less/lib/animation.less
deleted file mode 100644
index 4c8628e0..00000000
--- a/src/less/lib/animation.less
+++ /dev/null
@@ -1,31 +0,0 @@
-// --------------------------------------------------------------
-// Animations
-// --------------------------------------------------------------
-
-@keyframes plyr-progress {
-    to {
-        background-position: @plyr-progress-loading-size 0;
-    }
-}
-
-@keyframes plyr-popup {
-    from {
-        transform: translateY(10px);
-        opacity: 0.5;
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-@keyframes plyr-fade-in {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
diff --git a/src/less/lib/mixins.less b/src/less/lib/mixins.less
deleted file mode 100644
index da63443b..00000000
--- a/src/less/lib/mixins.less
+++ /dev/null
@@ -1,98 +0,0 @@
-// ==========================================================================
-// Plyr mixins
-// https://github.com/sampotts/plyr
-// ==========================================================================
-
-// Nicer focus styles
-// ---------------------------------------
-.plyr-tab-focus(@color: @plyr-tab-focus-default-color) {
-    outline: 0;
-    box-shadow: 0 0 0 3px fade(@color, 35%);
-}
-
-// Font smoothing
-// ---------------------------------------
-.plyr-font-smoothing(@mode: on) when(@mode = on) {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-}
-.plyr-font-smoothing(@mode: on) when(@mode = off) {
-    -moz-osx-font-smoothing: auto;
-    -webkit-font-smoothing: subpixel-antialiased;
-}
-
-// <input type="range"> styling
-// ---------------------------------------
-.plyr-range-track() {
-    height: @plyr-range-track-height;
-    background: transparent;
-    border: 0;
-    border-radius: (@plyr-range-track-height / 2);
-    user-select: none;
-    transition: all 0.3s ease;
-}
-
-.plyr-range-thumb() {
-    position: relative;
-    height: @plyr-range-thumb-height;
-    width: @plyr-range-thumb-height;
-    background: @plyr-range-thumb-bg;
-    border: @plyr-range-thumb-border;
-    border-radius: 100%;
-    transition: background 0.2s ease, border 0.2s ease, transform 0.2s ease;
-    box-shadow: @plyr-range-thumb-shadow;
-    box-sizing: border-box;
-}
-
-.plyr-range-thumb-active() {
-    background: @plyr-range-thumb-active-bg;
-    border-color: @plyr-range-thumb-active-border-color;
-    transform: scale(unit(@plyr-range-thumb-active-height / @plyr-range-thumb-height));
-}
-
-// Fullscreen styles
-// ---------------------------------------
-.plyr-fullscreen-active() {
-    height: 100%;
-    width: 100%;
-    margin: 0;
-    background: #000;
-    border-radius: 0 !important;
-
-    video {
-        height: 100%;
-    }
-
-    .plyr__video-wrapper {
-        height: 100%;
-        width: 100%;
-    }
-
-    .plyr__video-embed {
-        // Revert overflow change
-        overflow: visible;
-    }
-
-    // Vimeo requires some different styling
-    &.plyr--vimeo .plyr__video-wrapper {
-        height: 0;
-        top: 50%;
-        transform: translateY(-50%);
-    }
-
-    // Display correct icon
-    .plyr__control .icon--exit-fullscreen {
-        display: block;
-
-        + svg {
-            display: none;
-        }
-    }
-
-    // Large captions in full screen on larger screens
-    @media @plyr-mq-lg {
-        .plyr__captions {
-            font-size: @plyr-font-size-captions-large;
-        }
-    }
-}
diff --git a/src/less/settings.less b/src/less/settings.less
deleted file mode 100644
index 0bcdafdb..00000000
--- a/src/less/settings.less
+++ /dev/null
@@ -1,112 +0,0 @@
-// ==========================================================================
-// Plyr variables
-// https://github.com/sampotts/plyr
-// ==========================================================================
-
-// Settings
-@plyr-border-box: true;
-@plyr-touch-action: true;
-@plyr-sr-only-important: true;
-
-// Colors
-@plyr-color-main: #1aafff;
-@plyr-color-gunmetal: #2f343d;
-@plyr-color-fiord: #4f5b5f;
-@plyr-color-lynch: #6b7d85;
-@plyr-color-heather: #b7c5cd;
-
-// Type
-@plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
-@plyr-font-size-base: 16px;
-@plyr-font-size-small: 14px;
-@plyr-font-size-time: 14px;
-@plyr-font-size-badge: 10px;
-@plyr-font-weight-regular: 500;
-@plyr-font-weight-bold: 600;
-@plyr-line-height: 1.7;
-@plyr-font-smoothing: on;
-
-// Focus
-@plyr-tab-focus-default-color: @plyr-color-main;
-
-// Captions
-@plyr-captions-bg: fade(#000, 80%);
-@plyr-captions-color: #fff;
-@plyr-font-size-captions-base: @plyr-font-size-base;
-@plyr-font-size-captions-small: @plyr-font-size-small;
-@plyr-font-size-captions-medium: 18px;
-@plyr-font-size-captions-large: 21px;
-
-// Controls
-@plyr-control-icon-size: 18px;
-@plyr-control-icon-size-large: 20px;
-@plyr-control-spacing: 10px;
-@plyr-control-padding: (@plyr-control-spacing * 0.7);
-@plyr-control-radius: 3px;
-
-@plyr-video-controls-bg: #000;
-@plyr-video-control-color: #fff;
-@plyr-video-control-color-hover: #fff;
-@plyr-video-control-bg-hover: @plyr-color-main;
-
-@plyr-audio-controls-bg: #fff;
-@plyr-audio-control-color: @plyr-color-fiord;
-@plyr-audio-control-color-hover: #fff;
-@plyr-audio-control-bg-hover: @plyr-color-main;
-
-// Tooltips
-@plyr-tooltip-bg: fade(#fff, 90%);
-@plyr-tooltip-color: @plyr-color-fiord;
-@plyr-tooltip-padding: (@plyr-control-spacing / 2);
-@plyr-tooltip-arrow-size: 4px;
-@plyr-tooltip-radius: 3px;
-@plyr-tooltip-shadow: 0 1px 2px fade(#000, 15%);
-
-// Menus
-@plyr-menu-bg: @plyr-tooltip-bg;
-@plyr-menu-color: @plyr-tooltip-color;
-@plyr-menu-arrow-size: 6px;
-@plyr-menu-border-color: @plyr-color-heather;
-@plyr-menu-border-shadow-color: #fff;
-@plyr-menu-shadow: 0 1px 2px fade(#000, 15%);
-
-// Progress
-@plyr-progress-loading-size: 25px;
-@plyr-progress-loading-bg: fade(@plyr-color-gunmetal, 20%);
-@plyr-video-progress-buffered-bg: fade(#fff, 25%);
-@plyr-audio-progress-buffered-bg: fade(@plyr-color-heather, 66%);
-
-// Range sliders
-@plyr-range-track-height: 6px;
-@plyr-range-thumb-height: 14px;
-@plyr-range-thumb-bg: #fff;
-@plyr-range-thumb-border: 2px solid transparent;
-@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(@plyr-color-gunmetal, 20%);
-@plyr-range-fill-bg: @plyr-color-main;
-
-@plyr-range-thumb-active-border-color: #fff;
-@plyr-range-thumb-active-bg: @plyr-video-control-bg-hover;
-@plyr-range-thumb-active-height: 20px;
-
-@plyr-video-range-track-bg: @plyr-video-progress-buffered-bg;
-@plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg;
-
-// Breakpoints
-@plyr-bp-sm: 480px;
-@plyr-bp-md: 768px;
-@plyr-bp-lg: 1024px;
-
-// Max-width media queries
-@plyr-bp-xs-max: (@plyr-bp-sm - 1);
-@plyr-bp-sm-max: (@plyr-bp-md - 1);
-@plyr-bp-md-max: (@plyr-bp-lg - 1);
-
-// Mobile first
-@plyr-mq-sm: ~'only screen and (min-width: @{plyr-bp-sm}) ';
-@plyr-mq-md: ~'only screen and (min-width: @{plyr-bp-md}) ';
-@plyr-mq-lg: ~'only screen and (min-width: @{plyr-bp-lg}) ';
-
-// Mobile last
-@plyr-mq-xs-max: ~'only screen and (max-width: @{plyr-bp-xs-max}) ';
-@plyr-mq-sm-max: ~'only screen and (max-width: @{plyr-bp-sm-max}) ';
-@plyr-mq-md-max: ~'only screen and (max-width: @{plyr-bp-md-max}) ';
diff --git a/src/less/states/fullscreen.less b/src/less/states/fullscreen.less
deleted file mode 100644
index 9f7478d8..00000000
--- a/src/less/states/fullscreen.less
+++ /dev/null
@@ -1,31 +0,0 @@
-// --------------------------------------------------------------
-// Fullscreen
-// --------------------------------------------------------------
-
-.plyr:fullscreen {
-    .plyr-fullscreen-active();
-}
-
-.plyr:-webkit-full-screen {
-    .plyr-fullscreen-active();
-}
-
-.plyr:-moz-full-screen {
-    .plyr-fullscreen-active();
-}
-
-.plyr:-ms-fullscreen {
-    .plyr-fullscreen-active();
-}
-
-// Fallback for unsupported browsers
-.plyr--fullscreen-fallback {
-    .plyr-fullscreen-active();
-
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 10000000;
-}
diff --git a/src/less/utils/animation.less b/src/less/utils/animation.less
deleted file mode 100644
index 4a5b6b90..00000000
--- a/src/less/utils/animation.less
+++ /dev/null
@@ -1,7 +0,0 @@
-// --------------------------------------------------------------
-// Animation utils
-// --------------------------------------------------------------
-
-.plyr--no-transition {
-    transition: none !important;
-}
diff --git a/src/less/utils/hidden.less b/src/less/utils/hidden.less
deleted file mode 100644
index 20947c59..00000000
--- a/src/less/utils/hidden.less
+++ /dev/null
@@ -1,33 +0,0 @@
-// --------------------------------------------------------------
-// Hiding content nicely
-// --------------------------------------------------------------
-
-// Attributes
-.plyr--full-ui [hidden] {
-    display: none;
-}
-.plyr--full-ui [aria-hidden='true'] {
-    display: none;
-}
-
-// Screen reader only elements
-.plyr__sr-only {
-    clip: rect(1px, 1px, 1px, 1px);
-    overflow: hidden;
-
-    // !important is not always needed
-    & when(@plyr-sr-only-important = true) {
-        position: absolute !important;
-        padding: 0 !important;
-        border: 0 !important;
-        height: 1px !important;
-        width: 1px !important;
-    }
-    & when(@plyr-sr-only-important = false) {
-        position: absolute;
-        padding: 0;
-        border: 0;
-        height: 1px;
-        width: 1px;
-    }
-}
diff --git a/src/sass/base.scss b/src/sass/base.scss
new file mode 100644
index 00000000..1b454151
--- /dev/null
+++ b/src/sass/base.scss
@@ -0,0 +1,58 @@
+// --------------------------------------------------------------
+// Base styling
+// --------------------------------------------------------------
+
+// Base
+.plyr {
+    @include plyr-font-smoothing($plyr-font-smoothing);
+
+    direction: ltr;
+    font-family: $plyr-font-family;
+    font-weight: $plyr-font-weight-regular;
+    line-height: $plyr-line-height;
+    max-width: 100%;
+    min-width: 200px;
+    position: relative;
+    text-shadow: none;
+    transition: box-shadow 0.3s ease;
+
+    // Media elements
+    video,
+    audio {
+        border-radius: inherit;
+        height: auto;
+        vertical-align: middle;
+        width: 100%;
+    }
+
+    // Ignore focus
+    &:focus {
+        outline: 0;
+    }
+}
+
+// border-box everything
+// http://paulirish.com/2012/box-sizing-border-box-ftw/
+@if $plyr-border-box == true {
+    .plyr--full-ui {
+        box-sizing: border-box;
+
+        *,
+        *::after,
+        *::before {
+            box-sizing: inherit;
+        }
+    }
+}
+
+// Fix 300ms delay
+@if $plyr-touch-action == true {
+    .plyr--full-ui {
+        a,
+        button,
+        input,
+        label {
+            touch-action: manipulation;
+        }
+    }
+}
diff --git a/src/sass/bundle.scss b/src/sass/bundle.scss
new file mode 100644
index 00000000..2ee66ebc
--- /dev/null
+++ b/src/sass/bundle.scss
@@ -0,0 +1,31 @@
+// ==========================================================================
+// Plyr styles
+// https://github.com/sampotts/plyr
+// TODO: Review use of BEM classnames
+// ==========================================================================
+@charset 'UTF-8';
+
+@import 'settings';
+
+@import 'lib/animation';
+@import 'lib/mixins';
+
+@import 'base';
+
+@import 'components/badges';
+@import 'components/captions';
+@import 'components/control';
+@import 'components/controls';
+@import 'components/embed';
+@import 'components/menus';
+@import 'components/progress';
+@import 'components/sliders';
+@import 'components/times';
+@import 'components/tooltips';
+@import 'components/video';
+@import 'components/volume';
+
+@import 'states/fullscreen';
+
+@import 'utils/animation';
+@import 'utils/hidden';
diff --git a/src/sass/components/badges.scss b/src/sass/components/badges.scss
new file mode 100644
index 00000000..7d28ffaf
--- /dev/null
+++ b/src/sass/components/badges.scss
@@ -0,0 +1,12 @@
+// --------------------------------------------------------------
+// Badges
+// --------------------------------------------------------------
+
+.plyr__badge {
+    background: $plyr-menu-color;
+    border-radius: 2px;
+    color: $plyr-menu-bg;
+    font-size: $plyr-font-size-badge;
+    line-height: 1;
+    padding: 3px 4px;
+}
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
new file mode 100644
index 00000000..9dfc2be8
--- /dev/null
+++ b/src/sass/components/captions.scss
@@ -0,0 +1,58 @@
+// --------------------------------------------------------------
+// Captions
+// --------------------------------------------------------------
+
+// Hide default captions
+.plyr--full-ui ::-webkit-media-text-track-container {
+    display: none;
+}
+
+.plyr__captions {
+    animation: plyr-fade-in 0.3s ease;
+    bottom: 0;
+    color: $plyr-captions-color;
+    display: none;
+    font-size: $plyr-font-size-captions-small;
+    left: 0;
+    padding: $plyr-control-spacing;
+    position: absolute;
+    text-align: center;
+    transform: translateY(-($plyr-control-spacing * 4));
+    transition: transform 0.4s ease-in-out;
+    width: 100%;
+
+    span {
+        background: $plyr-captions-bg;
+        border-radius: 2px;
+        box-decoration-break: clone;
+        line-height: 185%;
+        padding: 0.2em 0.5em;
+        white-space: pre-wrap;
+
+        // Firefox adds a <div> when using getCueAsHTML()
+        div {
+            display: inline;
+        }
+    }
+
+    span:empty {
+        display: none;
+    }
+
+    @media (min-width: $plyr-bp-sm) {
+        font-size: $plyr-font-size-captions-base;
+        padding: ($plyr-control-spacing * 2);
+    }
+
+    @media (min-width: $plyr-bp-md) {
+        font-size: $plyr-font-size-captions-medium;
+    }
+}
+
+.plyr--captions-active .plyr__captions {
+    display: block;
+}
+
+.plyr--hide-controls .plyr__captions {
+    transform: translateY(-($plyr-control-spacing * 1.5));
+}
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
new file mode 100644
index 00000000..52716805
--- /dev/null
+++ b/src/sass/components/control.scss
@@ -0,0 +1,89 @@
+// --------------------------------------------------------------
+// Control buttons
+// --------------------------------------------------------------
+
+.plyr__control {
+    background: transparent;
+    border: 0;
+    border-radius: $plyr-control-radius;
+    color: inherit;
+    cursor: pointer;
+    flex-shrink: 0;
+    overflow: visible; // IE11
+    padding: $plyr-control-padding;
+    position: relative;
+    transition: all 0.3s ease;
+
+    svg {
+        display: block;
+        fill: currentColor;
+        height: $plyr-control-icon-size;
+        pointer-events: none;
+        width: $plyr-control-icon-size;
+    }
+
+    // Default focus
+    &:focus {
+        outline: 0;
+    }
+
+    // Tab focus
+    &.plyr__tab-focus {
+        @include plyr-tab-focus();
+    }
+}
+
+// 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 {
+    display: none;
+}
+
+// Audio styles
+.plyr--audio .plyr__control {
+    &.plyr__tab-focus,
+    &:hover,
+    &[aria-expanded='true'] {
+        background: $plyr-audio-control-bg-hover;
+        color: $plyr-audio-control-color-hover;
+    }
+}
+
+// Large play button (video only)
+.plyr__control--overlaid {
+    background: rgba($plyr-video-control-bg-hover, 0.8);
+    border: 0;
+    border-radius: 100%;
+    box-shadow: 0 1px 1px rgba(#000, 0.15);
+    color: $plyr-video-control-color;
+    display: none;
+    left: 50%;
+    padding: ceil($plyr-control-spacing * 1.5);
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+
+    svg {
+        height: $plyr-control-icon-size-large;
+        left: 2px; // Offset to make the play button look right
+        position: relative;
+        width: $plyr-control-icon-size-large;
+    }
+
+    &:hover,
+    &:focus {
+        background: $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
new file mode 100644
index 00000000..91db1b20
--- /dev/null
+++ b/src/sass/components/controls.scss
@@ -0,0 +1,105 @@
+// --------------------------------------------------------------
+// Controls
+// --------------------------------------------------------------
+
+// Hide native controls
+.plyr--full-ui ::-webkit-media-controls {
+    display: none;
+}
+
+// Playback controls
+.plyr__controls {
+    align-items: center;
+    display: flex;
+    text-align: center;
+
+    // Spacing
+    > .plyr__control,
+    .plyr__progress,
+    .plyr__time,
+    .plyr__menu {
+        margin-left: ($plyr-control-spacing / 2);
+
+        &:first-child,
+        &:first-child + [data-plyr='pause'] {
+            margin-left: 0;
+        }
+    }
+
+    .plyr__volume {
+        margin-left: ($plyr-control-spacing / 2);
+    }
+
+    @media (min-width: $plyr-bp-sm) {
+        > .plyr__control,
+        .plyr__progress,
+        .plyr__time,
+        .plyr__menu {
+            margin-left: $plyr-control-spacing;
+        }
+
+        > .plyr__control + .plyr__control,
+        .plyr__menu + .plyr__control,
+        > .plyr__control + .plyr__menu {
+            margin-left: ($plyr-control-spacing / 2);
+        }
+    }
+}
+
+// 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 * 3.5) $plyr-control-spacing $plyr-control-spacing;
+    position: absolute;
+    right: 0;
+    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
+    z-index: 2;
+
+    .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: $plyr-video-control-bg-hover;
+            color: $plyr-video-control-color-hover;
+        }
+    }
+}
+
+// Audio controls
+.plyr--audio .plyr__controls {
+    background: $plyr-audio-controls-bg;
+    border-radius: inherit;
+    color: $plyr-audio-control-color;
+    padding: $plyr-control-spacing;
+}
+
+// Hide 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'],
+.plyr [data-plyr='airplay'],
+.plyr [data-plyr='fullscreen'] {
+    display: none;
+}
+.plyr--captions-enabled [data-plyr='captions'],
+.plyr--pip-supported [data-plyr='pip'],
+.plyr--airplay-supported [data-plyr='airplay'],
+.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
+    display: inline-block;
+}
diff --git a/src/sass/components/embed.scss b/src/sass/components/embed.scss
new file mode 100644
index 00000000..b5d464f6
--- /dev/null
+++ b/src/sass/components/embed.scss
@@ -0,0 +1,35 @@
+// --------------------------------------------------------------
+// Embedded players
+// YouTube, Vimeo, etc
+// --------------------------------------------------------------
+
+.plyr__video-embed {
+    // Default to 16:9 ratio but this is set by JavaScript based on config
+    $padding: ((100 / 16) * 9);
+    $height: 200;
+    $offset: percentage(($height - $padding) / ($height / 50));
+
+    height: 0;
+    padding-bottom: percentage($padding);
+
+    iframe {
+        border: 0;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        user-select: none;
+        width: 100%;
+    }
+
+    // Vimeo hack
+    > div {
+        padding-bottom: percentage($height);
+        position: relative;
+        transform: translateY(-$offset);
+    }
+}
+// To allow mouse events to be captured if full support
+.plyr--full-ui .plyr__video-embed iframe {
+    pointer-events: none;
+}
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
new file mode 100644
index 00000000..35fc580d
--- /dev/null
+++ b/src/sass/components/menus.scss
@@ -0,0 +1,190 @@
+// --------------------------------------------------------------
+// Menus
+// --------------------------------------------------------------
+
+.plyr__menu {
+    display: flex; // Edge fix
+    position: relative;
+
+    // Animate the icon
+    .plyr__control svg {
+        transition: transform 0.3s ease;
+    }
+    .plyr__control[aria-expanded='true'] {
+        svg {
+            transform: rotate(90deg);
+        }
+
+        // Hide tooltip
+        .plyr__tooltip {
+            display: none;
+        }
+    }
+
+    // The actual menu container
+    &__container {
+        animation: plyr-popup 0.2s ease;
+        background: $plyr-menu-bg;
+        border-radius: 4px;
+        bottom: 100%;
+        box-shadow: $plyr-menu-shadow;
+        color: $plyr-menu-color;
+        font-size: $plyr-font-size-base;
+        margin-bottom: 10px;
+        position: absolute;
+        right: -3px;
+        text-align: left;
+        white-space: nowrap;
+        z-index: 1;
+
+        > 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);
+        }
+
+        // Arrow
+        &::after {
+            border: 4px solid transparent;
+            border-top-color: $plyr-menu-bg;
+            content: '';
+            height: 0;
+            position: absolute;
+            right: 15px;
+            top: 100%;
+            width: 0;
+        }
+
+        ul {
+            list-style: none;
+            margin: 0;
+            overflow: hidden;
+            padding: $plyr-control-padding;
+        }
+
+        // Options
+        .plyr__control {
+            align-items: center;
+            color: $plyr-menu-color;
+            display: flex;
+            padding: ceil($plyr-control-padding / 2) ($plyr-control-padding * 2);
+            user-select: none;
+            width: 100%;
+
+            &::after {
+                border: 4px solid transparent;
+                content: '';
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                transition: border-color 0.2s ease;
+            }
+
+            &--forward {
+                padding-right: ceil($plyr-control-padding * 4);
+
+                &::after {
+                    border-left-color: rgba($plyr-menu-color, 0.8);
+                    right: 5px;
+                }
+
+                &.plyr__tab-focus::after,
+                &:hover::after {
+                    border-left-color: currentColor;
+                }
+            }
+
+            &--back {
+                $horizontal-padding: ($plyr-control-padding * 2);
+                font-weight: $plyr-font-weight-regular;
+                margin: $plyr-control-padding;
+                margin-bottom: floor($plyr-control-padding / 2);
+                padding-left: ceil($plyr-control-padding * 4);
+                position: relative;
+
+                width: calc(100% - #{$horizontal-padding});
+
+                &::after {
+                    border-right-color: rgba($plyr-menu-color, 0.8);
+                    left: $plyr-control-padding;
+                }
+
+                &::before {
+                    background: $plyr-menu-border-color;
+                    box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
+                    content: '';
+                    height: 1px;
+                    left: 0;
+                    margin-top: ceil($plyr-control-padding / 2);
+                    overflow: hidden;
+                    position: absolute;
+                    right: 0;
+                    top: 100%;
+                }
+
+                &.plyr__tab-focus::after,
+                &:hover::after {
+                    border-right-color: currentColor;
+                }
+            }
+        }
+
+        label.plyr__control {
+            padding-left: $plyr-control-padding;
+
+            input[type='radio'] + span {
+                background: rgba(#000, 0.1);
+                border-radius: 100%;
+                display: block;
+                flex-shrink: 0;
+                height: 16px;
+                margin-right: $plyr-control-spacing;
+                position: relative;
+                transition: all 0.3s ease;
+                width: 16px;
+
+                &::after {
+                    background: #fff;
+                    border-radius: 100%;
+                    content: '';
+                    height: 6px;
+                    left: 5px;
+                    opacity: 0;
+                    position: absolute;
+                    top: 5px;
+                    transform: scale(0);
+                    transition: transform 0.3s ease, opacity 0.3s ease;
+                    width: 6px;
+                }
+            }
+
+            input[type='radio']:checked + span {
+                background: $plyr-color-main;
+
+                &::after {
+                    opacity: 1;
+                    transform: scale(1);
+                }
+            }
+
+            input[type='radio']:focus + span {
+                @include plyr-tab-focus();
+            }
+
+            &.plyr__tab-focus input[type='radio'] + span,
+            &:hover input[type='radio'] + span {
+                background: rgba(#000, 0.1);
+            }
+        }
+
+        // Option value
+        .plyr__menu__value {
+            align-items: center;
+            display: flex;
+            margin-left: auto;
+            margin-right: -$plyr-control-padding;
+            overflow: hidden;
+            padding-left: ceil($plyr-control-padding * 3.5);
+            pointer-events: none;
+        }
+    }
+}
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss
new file mode 100644
index 00000000..7490ee17
--- /dev/null
+++ b/src/sass/components/progress.scss
@@ -0,0 +1,94 @@
+// --------------------------------------------------------------
+// Playback progress
+// --------------------------------------------------------------
+
+.plyr__progress {
+    display: flex;
+    flex: 1;
+    position: relative;
+
+    input[type='range'] {
+        position: relative;
+        z-index: 2;
+    }
+
+    // Seek tooltip to show time
+    .plyr__tooltip {
+        font-size: $plyr-font-size-time;
+        left: 0;
+    }
+}
+
+.plyr__progress--buffer {
+    -webkit-appearance: none; /* stylelint-disable-line */
+    background: transparent;
+    border: 0;
+    border-radius: 100px;
+    height: $plyr-range-track-height;
+    left: 0;
+    margin: -($plyr-range-track-height / 2) 0 0;
+    padding: 0;
+    position: absolute;
+    top: 50%;
+    width: 100%;
+
+    &::-webkit-progress-bar {
+        background: transparent;
+        transition: width 0.2s ease;
+    }
+
+    &::-webkit-progress-value {
+        background: currentColor;
+        border-radius: 100px;
+        min-width: $plyr-range-track-height;
+    }
+
+    // Mozilla
+    &::-moz-progress-bar {
+        background: currentColor;
+        border-radius: 100px;
+        min-width: $plyr-range-track-height;
+        transition: width 0.2s ease;
+    }
+
+    // Microsoft
+    &::-ms-fill {
+        border-radius: 100px;
+        transition: width 0.2s ease;
+    }
+}
+
+.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%,
+        transparent 25%,
+        transparent 50%,
+        $plyr-progress-loading-bg 50%,
+        $plyr-progress-loading-bg 75%,
+        transparent 75%,
+        transparent
+    );
+    background-repeat: repeat-x;
+    background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
+    color: transparent;
+}
+
+.plyr--video.plyr--loading .plyr__progress--buffer {
+    background-color: $plyr-video-progress-buffered-bg;
+}
+
+.plyr--audio.plyr--loading .plyr__progress--buffer {
+    background-color: $plyr-audio-progress-buffered-bg;
+}
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
new file mode 100644
index 00000000..73a7c25c
--- /dev/null
+++ b/src/sass/components/sliders.scss
@@ -0,0 +1,139 @@
+// --------------------------------------------------------------
+// Slider inputs - <input type="range">
+// --------------------------------------------------------------
+
+.plyr--full-ui input[type='range'] {
+    // WebKit
+    -webkit-appearance: none; /* stylelint-disable-line */
+    background: transparent;
+    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;
+    cursor: pointer;
+    display: block;
+    height: $plyr-range-thumb-active-height;
+    margin: 0;
+    padding: 0;
+    transition: box-shadow 0.3s ease;
+    width: 100%;
+
+    &::-webkit-slider-runnable-track {
+        @include plyr-range-track();
+    }
+
+    &::-webkit-slider-thumb {
+        @include plyr-range-thumb();
+        -webkit-appearance: none; /* stylelint-disable-line */
+        margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2);
+    }
+
+    // Mozilla
+    &::-moz-range-track {
+        @include plyr-range-track();
+    }
+
+    &::-moz-range-thumb {
+        @include plyr-range-thumb();
+    }
+
+    &::-moz-range-progress {
+        background: currentColor;
+        border-radius: ($plyr-range-track-height / 2);
+        height: $plyr-range-track-height;
+    }
+
+    // Microsoft
+    &::-ms-track {
+        @include plyr-range-track();
+        color: transparent;
+    }
+
+    &::-ms-fill-upper {
+        @include plyr-range-track();
+    }
+
+    &::-ms-fill-lower {
+        @include plyr-range-track();
+
+        background: currentColor;
+    }
+
+    &::-ms-thumb {
+        @include plyr-range-thumb();
+        // For some reason, Edge uses the -webkit margin above
+        margin-top: 0;
+    }
+
+    &::-ms-tooltip {
+        display: none;
+    }
+
+    // Focus styles
+    &:focus {
+        outline: 0;
+    }
+
+    &::-moz-focus-outer {
+        border: 0;
+    }
+
+    &.plyr__tab-focus {
+        &::-webkit-slider-runnable-track {
+            @include plyr-tab-focus();
+        }
+
+        &::-moz-range-track {
+            @include plyr-tab-focus();
+        }
+
+        &::-ms-track {
+            @include plyr-tab-focus();
+        }
+    }
+
+    // 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();
+        }
+    }
+}
+
+// Video range inputs
+.plyr--full-ui.plyr--video input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background: $plyr-video-range-track-bg;
+    }
+
+    &::-moz-range-track {
+        background: $plyr-video-range-track-bg;
+    }
+
+    &::-ms-track {
+        background: $plyr-video-range-track-bg;
+    }
+}
+
+// Audio range inputs
+.plyr--full-ui.plyr--audio input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background: $plyr-audio-range-track-bg;
+    }
+
+    &::-moz-range-track {
+        background: $plyr-audio-range-track-bg;
+    }
+
+    &::-ms-track {
+        background: $plyr-audio-range-track-bg;
+    }
+}
diff --git a/src/sass/components/times.scss b/src/sass/components/times.scss
new file mode 100644
index 00000000..240d3528
--- /dev/null
+++ b/src/sass/components/times.scss
@@ -0,0 +1,24 @@
+// --------------------------------------------------------------
+// Time
+// --------------------------------------------------------------
+
+.plyr__time {
+    font-size: $plyr-font-size-time;
+}
+
+// Media duration hidden on small screens
+.plyr__time + .plyr__time {
+    // Add a slash in before
+    &::before {
+        content: '\2044';
+        margin-right: $plyr-control-spacing;
+    }
+
+    @media (max-width: $plyr-bp-sm-max) {
+        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
new file mode 100644
index 00000000..19a9ce56
--- /dev/null
+++ b/src/sass/components/tooltips.scss
@@ -0,0 +1,85 @@
+// --------------------------------------------------------------
+// Tooltips
+// --------------------------------------------------------------
+
+.plyr__tooltip {
+    background: $plyr-tooltip-bg;
+    border-radius: $plyr-tooltip-radius;
+    bottom: 100%;
+    box-shadow: $plyr-tooltip-shadow;
+    color: $plyr-tooltip-color;
+    font-size: $plyr-font-size-small;
+    font-weight: $plyr-font-weight-regular;
+    line-height: 1.3;
+    margin-bottom: ($plyr-tooltip-padding * 2);
+    opacity: 0;
+    padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);
+    pointer-events: none;
+    position: absolute;
+    transform: translate(-50%, 10px) scale(0.8);
+    transform-origin: 50% 100%;
+    transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
+    z-index: 2;
+
+    // The background triangle
+    &::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;
+        bottom: -$plyr-tooltip-arrow-size;
+        content: '';
+        height: 0;
+        left: 50%;
+        position: absolute;
+        transform: translateX(-50%);
+        width: 0;
+        z-index: 2;
+    }
+}
+
+// Displaying
+.plyr .plyr__control:hover .plyr__tooltip,
+.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,
+.plyr__tooltip--visible {
+    opacity: 1;
+    transform: translate(-50%, 0) scale(1);
+}
+
+.plyr .plyr__control:hover .plyr__tooltip {
+    z-index: 3;
+}
+
+// First tooltip
+.plyr__controls > .plyr__control:first-child .plyr__tooltip,
+.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
+    left: 0;
+    transform: translate(0, 10px) scale(0.8);
+    transform-origin: 0 100%;
+
+    &::before {
+        left: ($plyr-control-icon-size / 2) + $plyr-control-padding;
+    }
+}
+
+// Last tooltip
+.plyr__controls > .plyr__control:last-child .plyr__tooltip {
+    right: 0;
+    transform: translate(0, 10px) scale(0.8);
+    transform-origin: 100% 100%;
+
+    &::before {
+        left: auto;
+        right: ($plyr-control-icon-size / 2) + $plyr-control-padding;
+        transform: translateX(50%);
+    }
+}
+
+.plyr__controls > .plyr__control:first-child,
+.plyr__controls > .plyr__control:first-child + .plyr__control,
+.plyr__controls > .plyr__control:last-child {
+    &:hover .plyr__tooltip,
+    &.plyr__tab-focus .plyr__tooltip,
+    .plyr__tooltip--visible {
+        transform: translate(0, 0) scale(1);
+    }
+}
diff --git a/src/sass/components/video.scss b/src/sass/components/video.scss
new file mode 100644
index 00000000..3caf866d
--- /dev/null
+++ b/src/sass/components/video.scss
@@ -0,0 +1,21 @@
+// --------------------------------------------------------------
+// Video styles
+// --------------------------------------------------------------
+
+.plyr--video {
+    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;
+}
diff --git a/src/sass/components/volume.scss b/src/sass/components/volume.scss
new file mode 100644
index 00000000..e12dc675
--- /dev/null
+++ b/src/sass/components/volume.scss
@@ -0,0 +1,29 @@
+// --------------------------------------------------------------
+// Volume
+// --------------------------------------------------------------
+
+.plyr__volume {
+    flex: 1;
+    position: relative;
+
+    input[type='range'] {
+        position: relative;
+        z-index: 2;
+    }
+
+    @media (min-width: $plyr-bp-sm) {
+        max-width: 50px;
+    }
+
+    @media (min-width: $plyr-bp-md) {
+        max-width: 80px;
+    }
+}
+
+// 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
+.plyr--is-ios .plyr__volume,
+.plyr--is-ios [data-plyr='mute'] {
+    display: none !important;
+}
diff --git a/src/sass/lib/animation.scss b/src/sass/lib/animation.scss
new file mode 100644
index 00000000..b6c22d42
--- /dev/null
+++ b/src/sass/lib/animation.scss
@@ -0,0 +1,31 @@
+// --------------------------------------------------------------
+// Animations
+// --------------------------------------------------------------
+
+@keyframes plyr-progress {
+    to {
+        background-position: $plyr-progress-loading-size 0;
+    }
+}
+
+@keyframes plyr-popup {
+    0% {
+        opacity: 0.5;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes plyr-fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss
new file mode 100644
index 00000000..73e0f6dd
--- /dev/null
+++ b/src/sass/lib/mixins.scss
@@ -0,0 +1,99 @@
+// ==========================================================================
+// Plyr mixins
+// https://github.com/sampotts/plyr
+// ==========================================================================
+
+// Nicer focus styles
+// ---------------------------------------
+@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
+    box-shadow: 0 0 0 3px rgba($color, 0.35);
+    outline: 0;
+}
+
+// Font smoothing
+// ---------------------------------------
+@mixin plyr-font-smoothing($mode: true) {
+    @if $mode {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+    } @else {
+        -moz-osx-font-smoothing: auto;
+        -webkit-font-smoothing: subpixel-antialiased;
+    }
+}
+
+// <input type="range"> styling
+// ---------------------------------------
+@mixin plyr-range-track() {
+    background: transparent;
+    border: 0;
+    border-radius: ($plyr-range-track-height / 2);
+    height: $plyr-range-track-height;
+    transition: all 0.3s ease;
+    user-select: none;
+}
+
+@mixin plyr-range-thumb() {
+    background: $plyr-range-thumb-bg;
+    border: $plyr-range-thumb-border;
+    border-radius: 100%;
+    box-shadow: $plyr-range-thumb-shadow;
+    box-sizing: border-box;
+    height: $plyr-range-thumb-height;
+    position: relative;
+    transition: background 0.2s ease, border 0.2s ease, transform 0.2s ease;
+    width: $plyr-range-thumb-height;
+}
+
+@mixin plyr-range-thumb-active() {
+    background: $plyr-range-thumb-active-bg;
+    border-color: $plyr-range-thumb-active-border-color;
+    transform: scale(unit($plyr-range-thumb-active-height / $plyr-range-thumb-height));
+}
+
+// Fullscreen styles
+// ---------------------------------------
+@mixin plyr-fullscreen-active() {
+    background: #000;
+    border-radius: 0 !important;
+    height: 100%;
+    margin: 0;
+    width: 100%;
+
+    video {
+        height: 100%;
+    }
+
+    .plyr__video-wrapper {
+        height: 100%;
+        width: 100%;
+    }
+
+    .plyr__video-embed {
+        // Revert overflow change
+        overflow: visible;
+    }
+
+    // Vimeo requires some different styling
+    &.plyr--vimeo .plyr__video-wrapper {
+        height: 0;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    // Display correct icon
+    .plyr__control .icon--exit-fullscreen {
+        display: block;
+
+        + svg {
+            display: none;
+        }
+    }
+
+    // Large captions in full screen on larger screens
+    @media (min-width: $plyr-bp-lg) {
+        .plyr__captions {
+            font-size: $plyr-font-size-captions-large;
+        }
+    }
+}
diff --git a/src/sass/settings.scss b/src/sass/settings.scss
new file mode 100644
index 00000000..a01308f9
--- /dev/null
+++ b/src/sass/settings.scss
@@ -0,0 +1,102 @@
+// ==========================================================================
+// Plyr variables
+// https://github.com/sampotts/plyr
+// ==========================================================================
+
+// Settings
+$plyr-border-box: true !default;
+$plyr-touch-action: true !default;
+$plyr-sr-only-important: true !default;
+
+// Colors
+$plyr-color-main: #1aafff !default;
+$plyr-color-gunmetal: #2f343d !default;
+$plyr-color-fiord: #4f5b5f !default;
+$plyr-color-lynch: #6b7d85 !default;
+$plyr-color-heather: #b7c5cd !default;
+
+// Type
+$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
+$plyr-font-size-base: 16px !default;
+$plyr-font-size-small: 14px !default;
+$plyr-font-size-time: 14px !default;
+$plyr-font-size-badge: 10px !default;
+$plyr-font-weight-regular: 500 !default;
+$plyr-font-weight-bold: 600 !default;
+$plyr-line-height: 1.7 !default;
+$plyr-font-smoothing: true !default;
+
+// Focus
+$plyr-tab-focus-default-color: $plyr-color-main !default;
+
+// Captions
+$plyr-captions-bg: rgba(#000, 0.8) !default;
+$plyr-captions-color: #fff !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: 18px !default;
+$plyr-font-size-captions-large: 21px !default;
+
+// Controls
+$plyr-control-icon-size: 18px !default;
+$plyr-control-icon-size-large: 20px !default;
+$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-control-color: #fff !default;
+$plyr-video-control-color-hover: #fff !default;
+$plyr-video-control-bg-hover: $plyr-color-main !default;
+
+$plyr-audio-controls-bg: #fff !default;
+$plyr-audio-control-color: $plyr-color-fiord !default;
+$plyr-audio-control-color-hover: #fff !default;
+$plyr-audio-control-bg-hover: $plyr-color-main !default;
+
+// Tooltips
+$plyr-tooltip-bg: rgba(#fff, 0.9) !default;
+$plyr-tooltip-color: $plyr-color-fiord !default;
+$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
+$plyr-tooltip-arrow-size: 4px !default;
+$plyr-tooltip-radius: 3px !default;
+$plyr-tooltip-shadow: 0 1px 2px rgba(#000, 0.15) !default;
+
+// Menus
+$plyr-menu-bg: $plyr-tooltip-bg !default;
+$plyr-menu-color: $plyr-tooltip-color !default;
+$plyr-menu-arrow-size: 6px !default;
+$plyr-menu-border-color: $plyr-color-heather !default;
+$plyr-menu-border-shadow-color: #fff !default;
+$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
+
+// Progress
+$plyr-progress-loading-size: 25px !default;
+$plyr-progress-loading-bg: rgba($plyr-color-gunmetal, 0.2) !default;
+$plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
+$plyr-audio-progress-buffered-bg: rgba($plyr-color-heather, 0.66) !default;
+
+// Range sliders
+$plyr-range-track-height: 6px !default;
+$plyr-range-thumb-height: 14px !default;
+$plyr-range-thumb-bg: #fff !default;
+$plyr-range-thumb-border: 2px solid transparent !default;
+$plyr-range-thumb-shadow: 0 1px 1px rgba($plyr-video-controls-bg, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
+$plyr-range-fill-bg: $plyr-color-main !default;
+
+$plyr-range-thumb-active-border-color: #fff !default;
+$plyr-range-thumb-active-bg: $plyr-video-control-bg-hover !default;
+$plyr-range-thumb-active-height: 20px !default;
+
+$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
+$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
+
+// Breakpoints
+$plyr-bp-sm: 480px !default;
+$plyr-bp-md: 768px !default;
+$plyr-bp-lg: 1024px !default;
+
+// Max-width media queries
+$plyr-bp-xs-max: ($plyr-bp-sm - 1) !default;
+$plyr-bp-sm-max: ($plyr-bp-md - 1) !default;
+$plyr-bp-md-max: ($plyr-bp-lg - 1) !default;
diff --git a/src/sass/states/fullscreen.scss b/src/sass/states/fullscreen.scss
new file mode 100644
index 00000000..855e670f
--- /dev/null
+++ b/src/sass/states/fullscreen.scss
@@ -0,0 +1,31 @@
+// --------------------------------------------------------------
+// Fullscreen
+// --------------------------------------------------------------
+
+.plyr:fullscreen {
+    @include plyr-fullscreen-active();
+}
+
+.plyr:-webkit-full-screen {
+    @include plyr-fullscreen-active();
+}
+
+.plyr:-moz-full-screen {
+    @include plyr-fullscreen-active();
+}
+
+.plyr:-ms-fullscreen {
+    @include plyr-fullscreen-active();
+}
+
+// Fallback for unsupported browsers
+.plyr--fullscreen-fallback {
+    @include plyr-fullscreen-active();
+
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10000000;
+}
diff --git a/src/sass/utils/animation.scss b/src/sass/utils/animation.scss
new file mode 100644
index 00000000..4a5b6b90
--- /dev/null
+++ b/src/sass/utils/animation.scss
@@ -0,0 +1,7 @@
+// --------------------------------------------------------------
+// Animation utils
+// --------------------------------------------------------------
+
+.plyr--no-transition {
+    transition: none !important;
+}
diff --git a/src/sass/utils/hidden.scss b/src/sass/utils/hidden.scss
new file mode 100644
index 00000000..4deecf52
--- /dev/null
+++ b/src/sass/utils/hidden.scss
@@ -0,0 +1,35 @@
+// --------------------------------------------------------------
+// Hiding content nicely
+// --------------------------------------------------------------
+
+// Attributes
+.plyr--full-ui [hidden] {
+    display: none;
+}
+
+.plyr--full-ui [aria-hidden='true'] {
+    display: none;
+}
+
+// Screen reader only elements
+.plyr__sr-only {
+    clip: rect(1px, 1px, 1px, 1px);
+    overflow: hidden;
+
+    // !important is not always needed
+    @if $plyr-sr-only-important == true {
+        border: 0 !important;
+        height: 1px !important;
+        padding: 0 !important;
+        position: absolute !important;
+        width: 1px !important;
+    }
+
+    @if $plyr-sr-only-important == false {
+        border: 0;
+        height: 1px;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+    }
+}
diff --git a/src/scss/mixins.scss b/src/scss/mixins.scss
deleted file mode 100644
index 93cdbd8e..00000000
--- a/src/scss/mixins.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-// ==========================================================================
-// Plyr mixins
-// https://github.com/sampotts/plyr
-// ==========================================================================
-
-// <input type="range"> styling
-@mixin plyr-range-track() {
-    height: $plyr-range-track-height;
-    background: transparent;
-    border: 0;
-    border-radius: ($plyr-range-track-height / 2);
-    user-select: none;
-}
-@mixin plyr-range-thumb() {
-    position: relative;
-    height: $plyr-range-thumb-height;
-    width: $plyr-range-thumb-width;
-    background: $plyr-range-thumb-bg;
-    border: $plyr-range-thumb-border;
-    border-radius: 100%;
-    transition: background .2s ease, border .2s ease, transform .2s ease;
-    box-shadow: $plyr-range-thumb-shadow;
-    box-sizing: border-box;
-}
-@mixin plyr-range-thumb-active() {
-    background: $plyr-range-thumb-active-bg;
-    border-color: $plyr-range-thumb-active-border-color;
-    transform: scale($plyr-range-thumb-active-scale);
-}
\ No newline at end of file
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss
deleted file mode 100644
index d58666e7..00000000
--- a/src/scss/plyr.scss
+++ /dev/null
@@ -1,764 +0,0 @@
-// ==========================================================================
-// Plyr styles
-// https://github.com/sampotts/plyr
-// ==========================================================================
-
-@import "variables";
-@import "mixins";
-
-// Animation
-// ---------------------------------------
-@keyframes plyr-progress {
-    to { background-position: $plyr-progress-loading-size 0; }
-}
-
-// Styles
-// -------------------------------
-// Base
-.plyr {
-    position: relative;
-    max-width: 100%;
-    min-width: 200px;
-    font-family: $plyr-font-family;
-    direction: ltr;
-
-    @if $plyr-border-box == true {
-        // border-box everything
-        // http://paulirish.com/2012/box-sizing-border-box-ftw/
-        &,
-        *,
-        *::after,
-        *::before {
-            box-sizing: border-box;
-        }
-    }
-
-    @if $plyr-touch-action == true {
-      // Fix 300ms delay
-      a, button, input, label {
-        touch-action: manipulation;
-      }
-    }
-
-    // Focus
-    &:focus {
-        outline: 0;
-    }
-
-    // Media elements
-    video,
-    audio {
-        width: 100%;
-        height: auto;
-        vertical-align: middle;
-        border-radius: inherit;
-    }
-
-    // Range inputs
-    // Specificity is for bootstrap compatibility
-    input[type='range'] {
-        display: block;
-        height: ($plyr-range-thumb-height * $plyr-range-thumb-active-scale);
-        width: 100%;
-        margin: 0;
-        padding: 0;
-        vertical-align: middle;
-
-        appearance: none;
-        cursor: pointer;
-        border: none;
-        background: transparent;
-
-        // WebKit
-        &::-webkit-slider-runnable-track {
-            @include plyr-range-track();
-        }
-        &::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2);
-            @include plyr-range-thumb();
-        }
-
-        // Mozilla
-        &::-moz-range-track {
-            @include plyr-range-track();
-        }
-        &::-moz-range-thumb {
-            @include plyr-range-thumb();
-        }
-
-        // Microsoft
-        &::-ms-track {
-            height: $plyr-range-track-height;
-            background: transparent;
-            border: 0;
-            color: transparent;
-        }
-        &::-ms-fill-upper {
-            @include plyr-range-track();
-        }
-        &::-ms-fill-lower {
-            @include plyr-range-track();
-            background: $plyr-range-selected-bg;
-        }
-        &::-ms-thumb {
-            @include plyr-range-thumb();
-            // For some reason, Edge uses the -webkit margin above
-            margin-top: 0;
-        }
-        &::-ms-tooltip {
-            display: none;
-        }
-
-        // Focus styles
-        &:focus {
-            outline: 0;
-        }
-        &::-moz-focus-outer {
-            border: 0;
-        }
-        &.tab-focus:focus {
-            outline-offset: 3px;
-        }
-
-        // 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();
-            }
-        }
-    }
-}
-
-// Video range inputs
-.plyr--video input[type='range'].tab-focus:focus {
-    outline: 1px dotted transparentize($plyr-video-control-color, .5);
-}
-
-// Audio range inputs
-.plyr--audio input[type='range'].tab-focus:focus {
-    outline: 1px dotted transparentize($plyr-audio-control-color, .5);
-}
-
-// Screen reader only elements
-.plyr__sr-only {
-    clip: rect(1px, 1px, 1px, 1px);
-    overflow: hidden;
-
-    // !important is not always needed
-    @if $plyr-sr-only-important == true {
-        position: absolute !important;
-        padding: 0 !important;
-        border: 0 !important;
-        height: 1px !important;
-        width: 1px !important;
-    } @else {
-        position: absolute;
-        padding: 0;
-        border: 0;
-        height: 1px;
-        width: 1px;
-    }
-}
-
-// Video
-.plyr__video-wrapper {
-    position: relative;
-    background: #000;
-    border-radius: inherit;
-    // Require z-index to force border-radius
-    z-index: 0;
-    overflow: hidden;
-}
-
-// Container for embeds
-.plyr__video-embed {
-    padding-bottom: 56.25%; /* 16:9 */
-    height: 0;
-    border-radius: inherit;
-
-    // Require overflow and z-index to force border-radius
-    overflow: hidden;
-    z-index: 0;
-
-    iframe {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border: 0;
-        user-select: none;
-    }
-
-    // Vimeo hack
-    > div {
-        position: relative;
-        padding-bottom: 200%;
-        transform: translateY(-35.95%);
-    }
-}
-// To allow mouse events to be captured if full support
-.plyr .plyr__video-embed iframe {
-    pointer-events: none;
-}
-
-// Captions
-// --------------------------------------------------------------
-// Hide default captions
-.plyr video::-webkit-media-text-track-container {
-    display: none;
-}
-.plyr__captions {
-    display: none;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    padding: ($plyr-control-spacing * 2);
-    transform: translateY(-($plyr-control-spacing * 6));
-    transition: transform .3s ease;
-    color: $plyr-captions-color;
-    font-size: $plyr-font-size-captions-base;
-    text-align: center;
-    font-weight: 400;
-
-    span {
-        border-radius: 2px;
-        padding: floor($plyr-control-spacing / 3) $plyr-control-spacing;
-        background: $plyr-captions-bg;
-        box-decoration-break: clone;
-        line-height: 150%;
-    }
-    span:empty {
-        display: none;
-    }
-
-    @media (min-width: $plyr-bp-screen-md) {
-        font-size: $plyr-font-size-captions-medium;
-    }
-}
-.plyr--captions-active .plyr__captions {
-    display: block;
-}
-.plyr--hide-controls .plyr__captions {
-    transform: translateY(-($plyr-control-spacing * 2));
-}
-// Large captions in full screen on larger screens
-@media (min-width: $plyr-bp-screen-lg) {
-    .plyr--fullscreen-active .plyr__captions {
-        font-size: $plyr-font-size-captions-large;
-    }
-}
-
-// Controls
-// --------------------------------------------------------------
-// Hide native controls
-.plyr ::-webkit-media-controls {
-    display: none;
-}
-
-// Playback controls
-.plyr__controls {
-    display: flex;
-    align-items: center;
-    line-height: 1;
-    text-align: center;
-
-    // Spacing
-    > .plyr__control,
-    .plyr__progress,
-    .plyr__time,
-    .plyr__menu {
-        margin-left: ($plyr-control-spacing / 2);
-
-        &:first-child,
-        &:first-child + [data-plyr="pause"] {
-            margin-left: 0;
-        }
-    }
-    .plyr__volume {
-        margin-left: ($plyr-control-spacing / 2);
-    }
-
-    // Buttons
-    button {
-        position: relative;
-        display: inline-block;
-        flex-shrink: 0;
-        overflow: visible; // IE11
-        vertical-align: middle;
-        padding: ($plyr-control-spacing * .7);
-        border: 0;
-        background: transparent;
-        border-radius: 3px;
-        cursor: pointer;
-        transition: background .3s ease, color .3s ease, opacity .3s ease;
-        color: inherit;
-
-        svg {
-            width: $plyr-control-icon-size;
-            height: $plyr-control-icon-size;
-            display: block;
-            fill: currentColor;
-            pointer-events: none;
-        }
-
-        // Default focus
-        &:focus {
-            outline: 0;
-        }
-    }
-
-    // Hide toggle icons by default
-    .icon--exit-fullscreen,
-    .icon--muted,
-    .icon--captions-on {
-        display: none;
-    }
-
-    @media (min-width: $plyr-bp-screen-sm) {
-        > button,
-        .plyr__progress,
-        .plyr__time {
-            margin-left: $plyr-control-spacing;
-        }
-    }
-}
-// Hide controls
-.plyr--hide-controls .plyr__controls {
-    opacity: 0;
-    pointer-events: none;
-}
-
-// Video controls
-.plyr--video .plyr__controls {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: ($plyr-control-spacing * 5) $plyr-control-spacing $plyr-control-spacing;
-    background: linear-gradient(transparentize($plyr-video-controls-bg, 1), transparentize($plyr-video-controls-bg, .5));
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-    color: $plyr-video-control-color;
-    transition: opacity .3s ease;
-
-    button {
-        // Hover and tab focus
-        &.tab-focus:focus,
-        &:hover {
-            background: $plyr-video-control-bg-hover;
-            color: $plyr-video-control-color-hover;
-        }
-    }
-}
-
-// Audio controls
-.plyr--audio .plyr__controls {
-    padding: $plyr-control-spacing;
-    border-radius: inherit;
-    background: $plyr-audio-controls-bg;
-    border: $plyr-audio-controls-border;
-    color: $plyr-audio-control-color;
-
-    button {
-        // Hover and tab focus
-        &.tab-focus:focus,
-        &:hover {
-            background: $plyr-audio-control-bg-hover;
-            color: $plyr-audio-control-color-hover;
-        }
-    }
-}
-
-// Large play button (video only)
-.plyr__play-large {
-    display: none;
-    position: absolute;
-    z-index: 1;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    padding: $plyr-control-spacing;
-    background: $plyr-video-control-bg-hover;
-    border: 4px solid currentColor;
-    border-radius: 100%;
-    box-shadow: 0 1px 1px transparentize(#000, .85);
-    color: $plyr-video-control-color;
-    transition: all .3s ease;
-
-    svg {
-        position: relative;
-        left: 2px;
-        width: 20px;
-        height: 20px;
-        display: block;
-        fill: currentColor;
-        pointer-events: none;
-    }
-
-    &:focus {
-        outline: 1px dotted transparentize($plyr-video-control-color, .5);
-    }
-}
-.plyr .plyr__play-large {
-    display: inline-block;
-}
-.plyr--audio .plyr__play-large {
-    display: none;
-}
-.plyr--playing .plyr__play-large {
-    opacity: 0;
-    visibility: hidden;
-}
-
-// States
-.plyr__controls [data-plyr='pause'],
-.plyr--playing .plyr__controls [data-plyr='play'] {
-    display: none;
-}
-.plyr--playing .plyr__controls [data-plyr='pause'] {
-    display: inline-block;
-}
-
-// Change icons on state change
-.plyr--fullscreen-active .icon--exit-fullscreen,
-.plyr--muted .plyr__controls .icon--muted,
-.plyr--captions-active .plyr__controls .icon--captions-on {
-    display: block;
-
-    & + svg {
-        display: none;
-    }
-}
-
-// Some options are hidden by default
-.plyr [data-plyr='captions'],
-.plyr [data-plyr='fullscreen'] {
-    display: none;
-}
-.plyr--captions-enabled [data-plyr='captions'],
-.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
-    display: inline-block;
-}
-
-// Tooltips
-// --------------------------------------------------------------
-.plyr__tooltip {
-    position: absolute;
-    z-index: 2;
-    bottom: 100%;
-    margin-bottom: ($plyr-tooltip-padding * 2);
-    padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);
-    pointer-events: none;
-
-    opacity: 0;
-    background: $plyr-tooltip-bg;
-    border-radius: $plyr-tooltip-radius;
-
-    color: $plyr-tooltip-color;
-    font-size: $plyr-font-size-small;
-    line-height: 1.3;
-
-    transform: translate(-50%, 10px) scale(.8);
-    transform-origin: 50% 100%;
-    transition: transform .2s .1s ease, opacity .2s .1s ease;
-
-    &::before {
-        // Arrows
-        content: '';
-        position: absolute;
-        width: 0;
-        height: 0;
-        left: 50%;
-        transform: translateX(-50%);
-
-        // The background triangle
-        bottom: -$plyr-tooltip-arrow-size;
-        border-right: $plyr-tooltip-arrow-size solid transparent;
-        border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
-        border-left: $plyr-tooltip-arrow-size solid transparent;
-        z-index: 2;
-    }
-}
-.plyr button:hover .plyr__tooltip,
-.plyr button.tab-focus:focus .plyr__tooltip,
-.plyr__tooltip--visible {
-    opacity: 1;
-    transform: translate(-50%, 0) scale(1);
-}
-.plyr button:hover .plyr__tooltip {
-    z-index: 3;
-}
-
-// First tooltip
-.plyr__controls > button:first-child .plyr__tooltip,
-.plyr__controls > button:first-child + button .plyr__tooltip {
-    left: 0;
-    transform: translate(0, 10px) scale(.8);
-    transform-origin: 0 100%;
-
-    &::before {
-        left: ($plyr-control-icon-size / 2) + $plyr-control-padding;
-    }
-}
-
-// Last tooltip
-.plyr__controls > button:last-child .plyr__tooltip {
-    right: 0;
-    transform: translate(0, 10px) scale(.8);
-    transform-origin: 100% 100%;
-
-    &::before {
-        left: auto;
-        right: ($plyr-control-icon-size / 2) + $plyr-control-padding;
-        transform: translateX(50%);
-    }
-}
-
-.plyr__controls > button:first-child,
-.plyr__controls > button:first-child + button,
-.plyr__controls > button:last-child {
-    &:hover .plyr__tooltip,
-    &.tab-focus:focus .plyr__tooltip,
-    .plyr__tooltip--visible {
-        transform: translate(0, 0) scale(1);
-    }
-}
-
-// Playback progress
-// --------------------------------------------------------------
-// <progress> element
-.plyr__progress {
-    display: none;
-    position: relative;
-    flex: 1;
-
-    input[type="range"] {
-        position: relative;
-        z-index: 2;
-
-        &::-webkit-slider-runnable-track {
-            background: transparent;
-        }
-        &::-moz-range-track {
-            background: transparent;
-        }
-        &::-ms-fill-upper {
-            background: transparent;
-        }
-    }
-
-    // Seek tooltip to show time
-    .plyr__tooltip {
-        left: 0;
-    }
-}
-.plyr .plyr__progress {
-    display: inline-block;
-}
-
-.plyr__progress--buffer,
-.plyr__progress--played,
-.plyr__volume--display {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    width: 100%;
-    height: $plyr-range-track-height;
-    margin: -($plyr-range-track-height / 2) 0 0;
-    padding: 0;
-    vertical-align: top;
-    appearance: none;
-    border: none;
-    border-radius: 100px;
-
-    &::-webkit-progress-bar {
-        background: transparent;
-    }
-    &::-webkit-progress-value {
-        background: currentColor;
-        border-radius: 100px;
-        min-width: $plyr-range-track-height;
-    }
-    &::-moz-progress-bar {
-        background: currentColor;
-        border-radius: 100px;
-        min-width: $plyr-range-track-height;
-    }
-    &::-ms-fill {
-        border-radius: 100px;
-    }
-}
-.plyr__progress--played,
-.plyr__volume--display {
-    z-index: 1;
-    color: $plyr-range-selected-bg;
-    background: transparent;
-    transition: none;
-
-    &::-webkit-progress-value {
-        min-width: $plyr-range-track-height;
-        max-width: 99%;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        transition: none;
-    }
-    &::-moz-progress-bar {
-        min-width: $plyr-range-track-height;
-        max-width: 99%;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        transition: none;
-    }
-    &::-ms-fill {
-        display: none;
-    }
-}
-.plyr__progress--buffer {
-    &::-webkit-progress-value {
-        transition: width .2s ease;
-    }
-    &::-moz-progress-bar {
-        transition: width .2s ease;
-    }
-    &::-ms-fill {
-        transition: width .2s ease;
-    }
-}
-.plyr--video .plyr__progress--buffer,
-.plyr--video .plyr__volume--display {
-    background: $plyr-video-range-track-bg;
-}
-.plyr--video .plyr__progress--buffer {
-    color: $plyr-video-progress-buffered-bg;
-}
-.plyr--audio .plyr__progress--buffer,
-.plyr--audio .plyr__volume--display {
-    background: $plyr-audio-range-track-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-size: $plyr-progress-loading-size $plyr-progress-loading-size;
-    background-repeat: repeat-x;
-    background-image: linear-gradient(
-        -45deg,
-        $plyr-progress-loading-bg 25%,
-        transparent 25%,
-        transparent 50%,
-        $plyr-progress-loading-bg 50%,
-        $plyr-progress-loading-bg 75%,
-        transparent 75%,
-        transparent);
-    color: transparent;
-}
-.plyr--video.plyr--loading .plyr__progress--buffer {
-    background-color: $plyr-video-progress-buffered-bg;
-}
-.plyr--audio.plyr--loading .plyr__progress--buffer {
-    background-color: $plyr-audio-progress-buffered-bg;
-}
-
-// Time
-// --------------------------------------------------------------
-.plyr__time {
-    display: inline-block;
-    vertical-align: middle;
-    font-size: $plyr-font-size-small;
-}
-// Media duration hidden on small screens
-.plyr__time + .plyr__time {
-    display: none;
-
-    @media (min-width: $plyr-bp-screen-md) {
-        display: inline-block;
-    }
-
-    // Add a slash in before
-    &::before {
-        content: '\2044';
-        margin-right: $plyr-control-spacing;
-    }
-}
-
-// Volume
-// --------------------------------------------------------------
-.plyr__volume {
-    display: none;
-}
-.plyr .plyr__volume {
-    flex: 1;
-    position: relative;
-
-    input[type="range"] {
-        position: relative;
-        z-index: 2;
-    }
-    @media (min-width: $plyr-bp-screen-sm) {
-        display: block;
-        max-width: 60px;
-    }
-    @media (min-width: $plyr-bp-screen-md) {
-        max-width: 100px;
-    }
-}
-
-// 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
-.plyr--is-ios .plyr__volume,
-.plyr--is-ios [data-plyr='mute'] {
-    display: none !important;
-}
-
-// Fullscreen
-// --------------------------------------------------------------
-.plyr--fullscreen-active {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 100%;
-    width: 100%;
-    z-index: 10000000;
-    background: #000;
-    border-radius: 0 !important;
-
-    video {
-        height: 100%;
-    }
-    .plyr__video-wrapper {
-        height: 100%;
-        width: 100%;
-    }
-    .plyr__video-embed {
-        // Revert overflow change
-        overflow: visible;
-    }
-    .plyr__controls {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
-
-    // Vimeo requires some different styling
-    &.plyr--vimeo .plyr__video-wrapper {
-        height: 0;
-        top: 50%;
-        transform: translateY(-50%);
-    }
-}
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
deleted file mode 100644
index 30c61bf5..00000000
--- a/src/scss/variables.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-// ==========================================================================
-// Plyr variables
-// https://github.com/sampotts/plyr
-// https://robots.thoughtbot.com/sass-default
-// ==========================================================================
-
-// Settings
-$plyr-border-box:                       true !default;
-$plyr-touch-action:                     true !default;
-$plyr-sr-only-important:                true !default;
-
-// Colors
-$plyr-color-main:                       #3498db !default;
-
-// Font sizes
-$plyr-font-family:                      Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
-$plyr-font-size-small:                  14px !default;
-$plyr-font-size-base:                   16px !default;
-
-// Captions
-$plyr-captions-bg:                      transparentize(#000, .4) !default;
-$plyr-captions-color:                   #fff !default;
-$plyr-font-size-captions-base:          $plyr-font-size-base !default;
-$plyr-font-size-captions-medium:        ceil($plyr-font-size-base * 1.5) !default;
-$plyr-font-size-captions-large:         ($plyr-font-size-base * 2) !default;
-
-// Controls
-$plyr-control-icon-size:                18px !default;
-$plyr-control-spacing:                  10px !default;
-$plyr-control-padding:                  ($plyr-control-spacing * .7) !default;
-$plyr-video-controls-bg:                #000 !default;
-$plyr-video-control-color:              #fff !default;
-$plyr-video-control-color-hover:        #fff !default;
-$plyr-video-control-bg-hover:           $plyr-color-main !default;
-$plyr-audio-controls-bg:                #fff !default;
-$plyr-audio-controls-border:            1px solid #dbe3e8 !default;
-$plyr-audio-control-color:              #565D64 !default;
-$plyr-audio-control-color-hover:        #fff !default;
-$plyr-audio-control-bg-hover:           $plyr-color-main;
-
-// Tooltips
-$plyr-tooltip-bg:                       transparentize(#000, .3) !default;
-$plyr-tooltip-color:                    #fff !default;
-$plyr-tooltip-padding:                  ($plyr-control-spacing / 2) !default;
-$plyr-tooltip-arrow-size:               4px !default;
-$plyr-tooltip-radius:                   3px !default;
-
-// Progress
-$plyr-progress-loading-size:            25px !default;
-$plyr-progress-loading-bg:              transparentize(#000, .85) !default;
-$plyr-video-progress-bg:                transparentize(#fff, .75) !default;
-$plyr-video-progress-buffered-bg:       $plyr-video-progress-bg !default;
-$plyr-audio-progress-bg:                transparentize(#C6D6DB, .33) !default;
-$plyr-audio-progress-buffered-bg:       $plyr-audio-progress-bg !default;
-
-// Range sliders
-$plyr-range-track-height:               8px !default;
-$plyr-range-thumb-height:               floor($plyr-range-track-height * 2) !default;
-$plyr-range-thumb-width:                floor($plyr-range-track-height * 2) !default;
-$plyr-range-thumb-bg:                   #fff !default;
-$plyr-range-thumb-border:               2px solid transparent !default;
-$plyr-range-thumb-shadow:               0 1px 1px transparentize($plyr-video-controls-bg, .85), 0 0 0 1px transparentize(#000, .85) !default;
-$plyr-range-thumb-active-border-color:  #fff !default;
-$plyr-range-thumb-active-bg:            $plyr-video-control-bg-hover !default;
-$plyr-range-thumb-active-scale:         1.25 !default;
-$plyr-video-range-track-bg:             $plyr-video-progress-buffered-bg !default;
-$plyr-audio-range-track-bg:             $plyr-audio-progress-buffered-bg !default;
-$plyr-range-selected-bg:                $plyr-color-main !default;
-
-// Breakpoints
-$plyr-bp-screen-sm:                     480px !default;
-$plyr-bp-screen-md:                     768px !default;
-$plyr-bp-screen-lg:                     1024px !default;
\ No newline at end of file
-- 
cgit v1.2.3