Converted to 2 space indentation

26 files changed, 595 insertions, 597 deletions

diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js
index 7f7cec28..62c1ee0c 100644
--- a/demo/src/js/demo.js
+++ b/demo/src/js/demo.js
@@ -16,137 +16,134 @@ import sources from './sources';
 import toggleClass from './toggle-class';
 
 (() => {
-    const production = 'plyr.io';
-
-    // Sentry for demo site (https://plyr.io) only
-    if (window.location.host === production) {
-        Sentry.init({
-            dsn: 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
-            whitelistUrls: [production].map(d => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),
-        });
-    }
+  const production = 'plyr.io';
 
-    document.addEventListener('DOMContentLoaded', () => {
-        const selector = '#player';
-
-        // Setup share buttons
-        Shr.setup('.js-shr', {
-            count: {
-                className: 'button__count',
-            },
-            wrapper: {
-                className: 'button--with-count',
-            },
-        });
-
-        // Setup the player
-        const player = new Plyr(selector, {
-            debug: true,
-            title: 'View From A Blue Moon',
-            iconUrl: 'dist/demo.svg',
-            keyboard: {
-                global: true,
-            },
-            tooltips: {
-                controls: true,
-            },
-            captions: {
-                active: true,
-            },
-            ads: {
-                enabled: window.location.host.includes(production),
-                publisherId: '918848828995742',
-            },
-            previewThumbnails: {
-                enabled: true,
-                src: [
-                    'https://cdn.plyr.io/static/demo/thumbs/100p.vtt',
-                    'https://cdn.plyr.io/static/demo/thumbs/240p.vtt',
-                ],
-            },
-            vimeo: {
-                // Prevent Vimeo blocking plyr.io demo site
-                referrerPolicy: 'no-referrer',
-            },
-        });
-
-        // Expose for tinkering in the console
-        window.player = player;
-
-        // Setup type toggle
-        const buttons = document.querySelectorAll('[data-source]');
-        const types = Object.keys(sources);
-        const historySupport = Boolean(window.history && window.history.pushState);
-        let currentType = window.location.hash.substring(1);
-        const hasInitialType = currentType.length;
-
-        function render(type) {
-            // Remove active classes
-            Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
-
-            // Set active on parent
-            toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
-
-            // Show cite
-            Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
-                // eslint-disable-next-line no-param-reassign
-                cite.hidden = true;
-            });
-
-            document.querySelector(`.plyr__cite--${type}`).hidden = false;
-        }
+  // Sentry for demo site (https://plyr.io) only
+  if (window.location.host === production) {
+    Sentry.init({
+      dsn: 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
+      whitelistUrls: [production].map(d => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const selector = '#player';
+
+    // Setup share buttons
+    Shr.setup('.js-shr', {
+      count: {
+        className: 'button__count',
+      },
+      wrapper: {
+        className: 'button--with-count',
+      },
+    });
 
-        // Set a new source
-        function setSource(type, init) {
-            // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
-            if (!types.includes(type) || (!init && type === currentType) || (!currentType.length && type === 'video')) {
-                return;
-            }
+    // Setup the player
+    const player = new Plyr(selector, {
+      debug: true,
+      title: 'View From A Blue Moon',
+      iconUrl: 'dist/demo.svg',
+      keyboard: {
+        global: true,
+      },
+      tooltips: {
+        controls: true,
+      },
+      captions: {
+        active: true,
+      },
+      ads: {
+        enabled: window.location.host.includes(production),
+        publisherId: '918848828995742',
+      },
+      previewThumbnails: {
+        enabled: true,
+        src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'],
+      },
+      vimeo: {
+        // Prevent Vimeo blocking plyr.io demo site
+        referrerPolicy: 'no-referrer',
+      },
+    });
 
-            // Set the new source
-            player.source = sources[type];
+    // Expose for tinkering in the console
+    window.player = player;
 
-            // Set the current type for next time
-            currentType = type;
+    // Setup type toggle
+    const buttons = document.querySelectorAll('[data-source]');
+    const types = Object.keys(sources);
+    const historySupport = Boolean(window.history && window.history.pushState);
+    let currentType = window.location.hash.substring(1);
+    const hasInitialType = currentType.length;
 
-            render(type);
-        }
+    function render(type) {
+      // Remove active classes
+      Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
 
-        // Bind to each button
-        Array.from(buttons).forEach(button => {
-            button.addEventListener('click', () => {
-                const type = button.getAttribute('data-source');
-
-                setSource(type);
-
-                if (historySupport) {
-                    window.history.pushState({ type }, '', `#${type}`);
-                }
-            });
-        });
-
-        // List for backwards/forwards
-        window.addEventListener('popstate', event => {
-            if (event.state && Object.keys(event.state).includes('type')) {
-                setSource(event.state.type);
-            }
-        });
-
-        // If there's no current type set, assume video
-        if (!hasInitialType) {
-            currentType = 'video';
-        }
+      // Set active on parent
+      toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
 
-        // Replace current history state
-        if (historySupport && types.includes(currentType)) {
-            window.history.replaceState({ type: currentType }, '', hasInitialType ? `#${currentType}` : '');
-        }
+      // Show cite
+      Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
+        // eslint-disable-next-line no-param-reassign
+        cite.hidden = true;
+      });
+
+      document.querySelector(`.plyr__cite--${type}`).hidden = false;
+    }
+
+    // Set a new source
+    function setSource(type, init) {
+      // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
+      if (!types.includes(type) || (!init && type === currentType) || (!currentType.length && type === 'video')) {
+        return;
+      }
+
+      // Set the new source
+      player.source = sources[type];
+
+      // Set the current type for next time
+      currentType = type;
 
-        // If it's not video, load the source
-        if (currentType !== 'video') {
-            setSource(currentType, true);
+      render(type);
+    }
+
+    // Bind to each button
+    Array.from(buttons).forEach(button => {
+      button.addEventListener('click', () => {
+        const type = button.getAttribute('data-source');
+
+        setSource(type);
+
+        if (historySupport) {
+          window.history.pushState({ type }, '', `#${type}`);
         }
+      });
+    });
 
-        render(currentType);
+    // List for backwards/forwards
+    window.addEventListener('popstate', event => {
+      if (event.state && Object.keys(event.state).includes('type')) {
+        setSource(event.state.type);
+      }
     });
+
+    // If there's no current type set, assume video
+    if (!hasInitialType) {
+      currentType = 'video';
+    }
+
+    // Replace current history state
+    if (historySupport && types.includes(currentType)) {
+      window.history.replaceState({ type: currentType }, '', hasInitialType ? `#${currentType}` : '');
+    }
+
+    // If it's not video, load the source
+    if (currentType !== 'video') {
+      setSource(currentType, true);
+    }
+
+    render(currentType);
+  });
 })();
diff --git a/demo/src/js/sources.js b/demo/src/js/sources.js
index f0ec3515..6cec59c9 100644
--- a/demo/src/js/sources.js
+++ b/demo/src/js/sources.js
@@ -1,78 +1,78 @@
 const sources = {
-    video: {
-        type: 'video',
-        title: 'View From A Blue Moon',
-        sources: [
-            {
-                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
-                type: 'video/mp4',
-                size: 576,
-            },
-            {
-                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
-                type: 'video/mp4',
-                size: 720,
-            },
-            {
-                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
-                type: 'video/mp4',
-                size: 1080,
-            },
-            {
-                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
-                type: 'video/mp4',
-                size: 1440,
-            },
-        ],
-        poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
-        tracks: [
-            {
-                kind: 'captions',
-                label: 'English',
-                srclang: 'en',
-                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
-                default: true,
-            },
-            {
-                kind: 'captions',
-                label: 'French',
-                srclang: 'fr',
-                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
-            },
-        ],
-    },
-    audio: {
-        type: 'audio',
-        title: 'Kishi Bashi – “It All Began With A Burst”',
-        sources: [
-            {
-                src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
-                type: 'audio/mp3',
-            },
-            {
-                src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
-                type: 'audio/ogg',
-            },
-        ],
-    },
-    youtube: {
-        type: 'video',
-        sources: [
-            {
-                src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
-                provider: 'youtube',
-            },
-        ],
-    },
-    vimeo: {
-        type: 'video',
-        sources: [
-            {
-                src: 'https://vimeo.com/40648169',
-                provider: 'vimeo',
-            },
-        ],
-    },
+  video: {
+    type: 'video',
+    title: 'View From A Blue Moon',
+    sources: [
+      {
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
+        type: 'video/mp4',
+        size: 576,
+      },
+      {
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
+        type: 'video/mp4',
+        size: 720,
+      },
+      {
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
+        type: 'video/mp4',
+        size: 1080,
+      },
+      {
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
+        type: 'video/mp4',
+        size: 1440,
+      },
+    ],
+    poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
+    tracks: [
+      {
+        kind: 'captions',
+        label: 'English',
+        srclang: 'en',
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
+        default: true,
+      },
+      {
+        kind: 'captions',
+        label: 'French',
+        srclang: 'fr',
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
+      },
+    ],
+  },
+  audio: {
+    type: 'audio',
+    title: 'Kishi Bashi – “It All Began With A Burst”',
+    sources: [
+      {
+        src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
+        type: 'audio/mp3',
+      },
+      {
+        src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
+        type: 'audio/ogg',
+      },
+    ],
+  },
+  youtube: {
+    type: 'video',
+    sources: [
+      {
+        src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
+        provider: 'youtube',
+      },
+    ],
+  },
+  vimeo: {
+    type: 'video',
+    sources: [
+      {
+        src: 'https://vimeo.com/40648169',
+        provider: 'vimeo',
+      },
+    ],
+  },
 };
 
 export default sources;
diff --git a/demo/src/js/tab-focus.js b/demo/src/js/tab-focus.js
index c1602cf0..b13049bc 100644
--- a/demo/src/js/tab-focus.js
+++ b/demo/src/js/tab-focus.js
@@ -4,28 +4,28 @@ const tabClassName = 'tab-focus';
 
 // Remove class on blur
 document.addEventListener('focusout', event => {
-    if (!event.target.classList || container.contains(event.target)) {
-        return;
-    }
+  if (!event.target.classList || container.contains(event.target)) {
+    return;
+  }
 
-    event.target.classList.remove(tabClassName);
+  event.target.classList.remove(tabClassName);
 });
 
 // Add classname to tabbed elements
 document.addEventListener('keydown', event => {
-    if (event.keyCode !== 9) {
-        return;
-    }
+  if (event.keyCode !== 9) {
+    return;
+  }
 
-    // Delay the adding of classname until the focus has changed
-    // This event fires before the focusin event
-    setTimeout(() => {
-        const focused = document.activeElement;
+  // Delay the adding of classname until the focus has changed
+  // This event fires before the focusin event
+  setTimeout(() => {
+    const focused = document.activeElement;
 
-        if (!focused || !focused.classList || container.contains(focused)) {
-            return;
-        }
+    if (!focused || !focused.classList || container.contains(focused)) {
+      return;
+    }
 
-        focused.classList.add(tabClassName);
-    }, 10);
+    focused.classList.add(tabClassName);
+  }, 10);
 });
diff --git a/demo/src/js/toggle-class.js b/demo/src/js/toggle-class.js
index 1661433b..bd10c246 100644
--- a/demo/src/js/toggle-class.js
+++ b/demo/src/js/toggle-class.js
@@ -1,5 +1,5 @@
 // Toggle class on an element
 const toggleClass = (element, className = '', toggle = false) =>
-    element && element.classList[toggle ? 'add' : 'remove'](className);
+  element && element.classList[toggle ? 'add' : 'remove'](className);
 
 export default toggleClass;
diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss
index 279007fb..1c9375bf 100644
--- a/demo/src/sass/components/buttons.scss
+++ b/demo/src/sass/components/buttons.scss
@@ -5,80 +5,80 @@
 // Shared
 .button,
 .button__count {
-    align-items: center;
-    border: 0;
-    border-radius: $border-radius-base;
-    box-shadow: 0 1px 1px rgba(#000, 0.1);
-    display: inline-flex;
-    padding: ($spacing-base * 0.75);
-    position: relative;
-    text-shadow: none;
-    user-select: none;
-    vertical-align: middle;
+  align-items: center;
+  border: 0;
+  border-radius: $border-radius-base;
+  box-shadow: 0 1px 1px rgba(#000, 0.1);
+  display: inline-flex;
+  padding: ($spacing-base * 0.75);
+  position: relative;
+  text-shadow: none;
+  user-select: none;
+  vertical-align: middle;
 }
 
 // Buttons
 .button {
-    background: $color-button-background;
-    color: $color-button-text;
-    font-weight: $font-weight-bold;
-    padding-left: ($spacing-base * 1.25);
-    padding-right: ($spacing-base * 1.25);
-    transition: all 0.2s ease;
+  background: $color-button-background;
+  color: $color-button-text;
+  font-weight: $font-weight-bold;
+  padding-left: ($spacing-base * 1.25);
+  padding-right: ($spacing-base * 1.25);
+  transition: all 0.2s ease;
 
-    &:hover,
-    &:focus {
-        background: $color-button-background-hover;
+  &:hover,
+  &:focus {
+    background: $color-button-background-hover;
 
-        // Remove the underline/border
-        &::after {
-            display: none;
-        }
+    // Remove the underline/border
+    &::after {
+      display: none;
     }
+  }
 
-    &:hover {
-        box-shadow: 0 2px 2px rgba(#000, 0.1);
-    }
+  &:hover {
+    box-shadow: 0 2px 2px rgba(#000, 0.1);
+  }
 
-    &:focus {
-        outline: 0;
-    }
+  &:focus {
+    outline: 0;
+  }
 
-    &.tab-focus {
-        @include tab-focus();
-    }
+  &.tab-focus {
+    @include tab-focus();
+  }
 
-    &:active {
-        top: 1px;
-    }
+  &:active {
+    top: 1px;
+  }
 }
 
 // Button group
 .button--with-count {
-    display: inline-flex;
+  display: inline-flex;
 
-    .button .icon {
-        flex-shrink: 0;
-    }
+  .button .icon {
+    flex-shrink: 0;
+  }
 }
 
 // Count bubble
 .button__count {
-    animation: fadein 0.2s ease;
-    background: $color-button-count-background;
-    color: $color-button-count-text;
-    margin-left: ($spacing-base * 0.75);
+  animation: fadein 0.2s ease;
+  background: $color-button-count-background;
+  color: $color-button-count-text;
+  margin-left: ($spacing-base * 0.75);
 
-    &::before {
-        border: $arrow-size solid transparent;
-        border-left-width: 0;
-        border-right-color: $color-button-count-background;
-        content: '';
-        height: 0;
-        position: absolute;
-        right: 100%;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 0;
-    }
+  &::before {
+    border: $arrow-size solid transparent;
+    border-left-width: 0;
+    border-right-color: $color-button-count-background;
+    content: '';
+    height: 0;
+    position: absolute;
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+  }
 }
diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss
index fd014ead..47ba69b0 100644
--- a/demo/src/sass/components/header.scss
+++ b/demo/src/sass/components/header.scss
@@ -3,28 +3,28 @@
 // ==========================================================================
 
 header {
-    padding-bottom: $spacing-base;
-    text-align: center;
+  padding-bottom: $spacing-base;
+  text-align: center;
 
-    h1 span {
-        animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
-        display: inline-block;
-        font-weight: $font-weight-light;
-        opacity: 0.5;
-    }
+  h1 span {
+    animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
+    display: inline-block;
+    font-weight: $font-weight-light;
+    opacity: 0.5;
+  }
 
-    .call-to-action {
-        margin-top: ($spacing-base * 1.5);
-    }
+  .call-to-action {
+    margin-top: ($spacing-base * 1.5);
+  }
 
-    @media only screen and (min-width: $screen-md) {
-        margin-right: ($spacing-base * 3);
-        max-width: 360px;
-        padding-bottom: ($spacing-base * 2);
-        text-align: left;
+  @media only screen and (min-width: $screen-md) {
+    margin-right: ($spacing-base * 3);
+    max-width: 360px;
+    padding-bottom: ($spacing-base * 2);
+    text-align: left;
 
-        p:first-of-type {
-            @include font-size($font-size-base + 1);
-        }
+    p:first-of-type {
+      @include font-size($font-size-base + 1);
     }
+  }
 }
diff --git a/demo/src/sass/components/icons.scss b/demo/src/sass/components/icons.scss
index ec9f8c5c..32e5f685 100644
--- a/demo/src/sass/components/icons.scss
+++ b/demo/src/sass/components/icons.scss
@@ -4,20 +4,20 @@
 
 // Base size icon styles
 .icon {
-    fill: currentColor;
-    height: $icon-size;
-    vertical-align: -3px;
-    width: $icon-size;
+  fill: currentColor;
+  height: $icon-size;
+  vertical-align: -3px;
+  width: $icon-size;
 }
 
 // Within elements
 a svg,
 button svg,
 label svg {
-    pointer-events: none;
+  pointer-events: none;
 }
 
 a .icon,
 .btn .icon {
-    margin-right: ($spacing-base / 2);
+  margin-right: ($spacing-base / 2);
 }
diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss
index 1d49be3a..92e71931 100644
--- a/demo/src/sass/components/links.scss
+++ b/demo/src/sass/components/links.scss
@@ -4,45 +4,45 @@
 
 // Make a <button> look like an <a>
 button.faux-link {
-    @extend a; // stylelint-disable-line
-    @include cancel-button-styles();
+  @extend a; // stylelint-disable-line
+  @include cancel-button-styles();
 }
 
 // Links
 a {
-    border-bottom: 1px dotted currentColor;
-    color: $color-link;
-    position: relative;
-    text-decoration: none;
-    transition: all 0.2s ease;
+  border-bottom: 1px dotted currentColor;
+  color: $color-link;
+  position: relative;
+  text-decoration: none;
+  transition: all 0.2s ease;
 
-    &::after {
-        background: currentColor;
-        content: '';
-        height: 1px;
-        left: 50%;
-        position: absolute;
-        top: 100%;
-        transform: translateX(-50%);
-        transition: width 0.2s ease;
-        width: 0;
-    }
+  &::after {
+    background: currentColor;
+    content: '';
+    height: 1px;
+    left: 50%;
+    position: absolute;
+    top: 100%;
+    transform: translateX(-50%);
+    transition: width 0.2s ease;
+    width: 0;
+  }
 
-    &:hover,
-    &:focus {
-        border-bottom-color: transparent;
-        outline: 0;
+  &:hover,
+  &:focus {
+    border-bottom-color: transparent;
+    outline: 0;
 
-        &::after {
-            width: 100%;
-        }
+    &::after {
+      width: 100%;
     }
+  }
 
-    &.tab-focus {
-        @include tab-focus();
-    }
+  &.tab-focus {
+    @include tab-focus();
+  }
 
-    &.no-border::after {
-        display: none;
-    }
+  &.no-border::after {
+    display: none;
+  }
 }
diff --git a/demo/src/sass/components/lists.scss b/demo/src/sass/components/lists.scss
index bae3d11d..c6fe2ca5 100644
--- a/demo/src/sass/components/lists.scss
+++ b/demo/src/sass/components/lists.scss
@@ -5,7 +5,7 @@
 // Lists
 ul,
 li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
diff --git a/demo/src/sass/components/media.scss b/demo/src/sass/components/media.scss
index c6744bcc..d6456932 100644
--- a/demo/src/sass/components/media.scss
+++ b/demo/src/sass/components/media.scss
@@ -5,6 +5,6 @@
 img,
 video,
 audio {
-    max-width: 100%;
-    vertical-align: middle;
+  max-width: 100%;
+  vertical-align: middle;
 }
diff --git a/demo/src/sass/components/navigation.scss b/demo/src/sass/components/navigation.scss
index fe14c000..bcb1366e 100644
--- a/demo/src/sass/components/navigation.scss
+++ b/demo/src/sass/components/navigation.scss
@@ -3,7 +3,7 @@
 // ==========================================================================
 
 nav {
-    display: flex;
-    justify-content: center;
-    margin-bottom: $spacing-base;
+  display: flex;
+  justify-content: center;
+  margin-bottom: $spacing-base;
 }
diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss
index d05e9849..7dcea982 100644
--- a/demo/src/sass/components/players.scss
+++ b/demo/src/sass/components/players.scss
@@ -4,33 +4,33 @@
 
 // Example players
 .plyr {
-    border-radius: $border-radius-base;
-    box-shadow: 0 2px 15px rgba(#000, 0.1);
-    margin: $spacing-base auto;
+  border-radius: $border-radius-base;
+  box-shadow: 0 2px 15px rgba(#000, 0.1);
+  margin: $spacing-base auto;
 
-    &.plyr--audio {
-        max-width: 480px;
-    }
+  &.plyr--audio {
+    max-width: 480px;
+  }
 }
 
 .plyr__video-wrapper::after {
-    border: 1px solid rgba(#000, 0.15);
-    border-radius: inherit;
-    bottom: 0;
-    content: '';
-    left: 0;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 3;
+  border: 1px solid rgba(#000, 0.15);
+  border-radius: inherit;
+  bottom: 0;
+  content: '';
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 3;
 }
 
 // Style full supported player
 .plyr__cite {
-    color: $color-gray-500;
+  color: $color-gray-500;
 
-    .icon {
-        margin-right: ceil($spacing-base / 6);
-    }
+  .icon {
+    margin-right: ceil($spacing-base / 6);
+  }
 }
diff --git a/demo/src/sass/layout/core.scss b/demo/src/sass/layout/core.scss
index b9b2d4d5..3687b7d2 100644
--- a/demo/src/sass/layout/core.scss
+++ b/demo/src/sass/layout/core.scss
@@ -4,60 +4,60 @@
 
 html,
 body {
-    display: flex;
-    width: 100%;
+  display: flex;
+  width: 100%;
 }
 
 html {
-    background: $page-background;
-    background-attachment: fixed;
-    height: 100%;
+  background: $page-background;
+  background-attachment: fixed;
+  height: 100%;
 }
 
 body {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
 }
 
 .grid {
-    flex: 1;
-    overflow: auto;
+  flex: 1;
+  overflow: auto;
 }
 
 main {
-    margin: auto;
-    padding-bottom: 1px; // Collapsing margins
-    text-align: center;
+  margin: auto;
+  padding-bottom: 1px; // Collapsing margins
+  text-align: center;
 }
 
 aside {
-    align-items: center;
-    background: #fff;
-    display: flex;
-    flex-shrink: 0;
-    justify-content: center;
-    padding: $spacing-base;
-    position: relative;
-    text-align: center;
-    text-shadow: none;
-    width: 100%;
-
-    .icon {
-        fill: $color-twitter;
-        margin-right: ($spacing-base / 2);
-    }
-
-    p {
-        margin: 0;
-    }
-
-    a {
-        color: $color-twitter;
-
-        &.tab-focus {
-            @include tab-focus($color-twitter);
-        }
+  align-items: center;
+  background: #fff;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  padding: $spacing-base;
+  position: relative;
+  text-align: center;
+  text-shadow: none;
+  width: 100%;
+
+  .icon {
+    fill: $color-twitter;
+    margin-right: ($spacing-base / 2);
+  }
+
+  p {
+    margin: 0;
+  }
+
+  a {
+    color: $color-twitter;
+
+    &.tab-focus {
+      @include tab-focus($color-twitter);
     }
+  }
 }
diff --git a/demo/src/sass/layout/error.scss b/demo/src/sass/layout/error.scss
index 385ecbf3..7c625610 100644
--- a/demo/src/sass/layout/error.scss
+++ b/demo/src/sass/layout/error.scss
@@ -5,26 +5,26 @@
 // Error page
 html.error,
 .error body {
-    height: 100%;
+  height: 100%;
 }
 
 html.error {
-    background: $page-background;
-    background-attachment: fixed;
+  background: $page-background;
+  background-attachment: fixed;
 }
 
 .error body {
-    align-items: center;
-    display: flex;
-    width: 100%;
+  align-items: center;
+  display: flex;
+  width: 100%;
 }
 
 .error main {
-    padding: $spacing-base;
-    text-align: center;
-    width: 100%;
+  padding: $spacing-base;
+  text-align: center;
+  width: 100%;
 
-    p {
-        @include font-size($font-size-large);
-    }
+  p {
+    @include font-size($font-size-large);
+  }
 }
diff --git a/demo/src/sass/layout/grid.scss b/demo/src/sass/layout/grid.scss
index 40dd829e..fd3f8fdc 100644
--- a/demo/src/sass/layout/grid.scss
+++ b/demo/src/sass/layout/grid.scss
@@ -3,17 +3,17 @@
 // ==========================================================================
 
 .grid {
-    margin: 0 auto;
-    padding: $spacing-base;
+  margin: 0 auto;
+  padding: $spacing-base;
 
-    @media only screen and (min-width: $screen-md) {
-        align-items: center;
-        display: flex;
-        max-width: $container-max-width;
-        width: 100%;
+  @media only screen and (min-width: $screen-md) {
+    align-items: center;
+    display: flex;
+    max-width: $container-max-width;
+    width: 100%;
 
-        > * {
-            flex: 1;
-        }
+    > * {
+      flex: 1;
     }
+  }
 }
diff --git a/demo/src/sass/lib/animation.scss b/demo/src/sass/lib/animation.scss
index 64eb5595..cc18d59b 100644
--- a/demo/src/sass/lib/animation.scss
+++ b/demo/src/sass/lib/animation.scss
@@ -4,24 +4,24 @@
 
 // Fade
 @keyframes fadein {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes shrinkHide {
-    0% {
-        opacity: 0.5;
-        width: 38px;
-    }
-    20% {
-        width: 45px;
-    }
-    100% {
-        opacity: 0;
-        width: 0;
-    }
+  0% {
+    opacity: 0.5;
+    width: 38px;
+  }
+  20% {
+    width: 45px;
+  }
+  100% {
+    opacity: 0;
+    width: 0;
+  }
 }
diff --git a/demo/src/sass/lib/fontface.scss b/demo/src/sass/lib/fontface.scss
index d104c501..d54188d0 100644
--- a/demo/src/sass/lib/fontface.scss
+++ b/demo/src/sass/lib/fontface.scss
@@ -3,46 +3,46 @@
 // ==========================================================================
 
 @font-face {
-    font-display: swap;
-    font-family: 'Gordita';
-    font-style: normal;
-    font-weight: $font-weight-light;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
-        url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
+  font-display: swap;
+  font-family: 'Gordita';
+  font-style: normal;
+  font-weight: $font-weight-light;
+  src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
+    url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
 }
 
 @font-face {
-    font-display: swap;
-    font-family: 'Gordita';
-    font-style: normal;
-    font-weight: $font-weight-regular;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
-        url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff');
+  font-display: swap;
+  font-family: 'Gordita';
+  font-style: normal;
+  font-weight: $font-weight-regular;
+  src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
+    url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff');
 }
 
 @font-face {
-    font-display: swap;
-    font-family: 'Gordita';
-    font-style: normal;
-    font-weight: $font-weight-medium;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
-        url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff');
+  font-display: swap;
+  font-family: 'Gordita';
+  font-style: normal;
+  font-weight: $font-weight-medium;
+  src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
+    url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff');
 }
 
 @font-face {
-    font-display: swap;
-    font-family: 'Gordita';
-    font-style: normal;
-    font-weight: $font-weight-bold;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
-        url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
+  font-display: swap;
+  font-family: 'Gordita';
+  font-style: normal;
+  font-weight: $font-weight-bold;
+  src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
+    url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
 }
 
 @font-face {
-    font-display: swap;
-    font-family: 'Gordita';
-    font-style: normal;
-    font-weight: $font-weight-black;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
-        url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
+  font-display: swap;
+  font-family: 'Gordita';
+  font-style: normal;
+  font-weight: $font-weight-black;
+  src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
+    url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
 }
diff --git a/demo/src/sass/lib/mixins.scss b/demo/src/sass/lib/mixins.scss
index 268157ae..2744bfb5 100644
--- a/demo/src/sass/lib/mixins.scss
+++ b/demo/src/sass/lib/mixins.scss
@@ -5,50 +5,50 @@
 // Convert a <button> into an <a>
 // ---------------------------------------
 @mixin cancel-button-styles() {
-    background: transparent;
-    border: 0;
-    border-radius: 0;
-    cursor: pointer;
-    font: inherit;
-    line-height: $line-height-base;
-    margin: 0;
-    padding: 0;
-    position: relative;
-    text-align: inherit;
-    text-shadow: inherit;
-    -moz-user-select: text; // stylelint-disable-line
-    vertical-align: baseline;
-    width: auto;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  cursor: pointer;
+  font: inherit;
+  line-height: $line-height-base;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  text-align: inherit;
+  text-shadow: inherit;
+  -moz-user-select: text; // stylelint-disable-line
+  vertical-align: baseline;
+  width: auto;
 }
 
 // Nicer focus styles
 // ---------------------------------------
 @mixin tab-focus($color: $tab-focus-default-color) {
-    box-shadow: 0 0 0 3px rgba($color, 0.35);
-    outline: 0;
+  box-shadow: 0 0 0 3px rgba($color, 0.35);
+  outline: 0;
 }
 
 // Use rems for font sizing
 // Leave <body> at 100%/16px
 // ---------------------------------------
 @function calculate-rem($size) {
-    $rem: $size / 16;
-    @return #{$rem}rem;
+  $rem: $size / 16;
+  @return #{$rem}rem;
 }
 
 @mixin font-size($size: $font-size-base) {
-    font-size: $size * 1px; // Fallback in px
-    font-size: calculate-rem($size);
+  font-size: $size * 1px; // Fallback in px
+  font-size: calculate-rem($size);
 }
 
 // Font smoothing
 // ---------------------------------------
 @mixin font-smoothing($enabled: true) {
-    @if $enabled {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-    } @else {
-        -moz-osx-font-smoothing: auto;
-        -webkit-font-smoothing: subpixel-antialiased;
-    }
+  @if $enabled {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+  } @else {
+    -moz-osx-font-smoothing: auto;
+    -webkit-font-smoothing: subpixel-antialiased;
+  }
 }
diff --git a/demo/src/sass/lib/normalize.scss b/demo/src/sass/lib/normalize.scss
index 4f8542c1..f2d2c09c 100644
--- a/demo/src/sass/lib/normalize.scss
+++ b/demo/src/sass/lib/normalize.scss
@@ -10,9 +10,9 @@
  */
 
 html {
-    line-height: 1.15; /* 1 */
-    -ms-text-size-adjust: 100%; /* 2 */
-    -webkit-text-size-adjust: 100%; /* 2 */
+  line-height: 1.15; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
@@ -23,7 +23,7 @@ html {
    */
 
 body {
-    margin: 0;
+  margin: 0;
 }
 
 /**
@@ -36,7 +36,7 @@ footer,
 header,
 nav,
 section {
-    display: block;
+  display: block;
 }
 
 /**
@@ -45,8 +45,8 @@ section {
    */
 
 h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
+  font-size: 2em;
+  margin: 0.67em 0;
 }
 
 /* Grouping content
@@ -60,8 +60,8 @@ h1 {
 figcaption,
 figure,
 main {
-    /* 1 */
-    display: block;
+  /* 1 */
+  display: block;
 }
 
 /**
@@ -69,7 +69,7 @@ main {
    */
 
 figure {
-    margin: 1em 40px;
+  margin: 1em 40px;
 }
 
 /**
@@ -78,9 +78,9 @@ figure {
    */
 
 hr {
-    box-sizing: content-box; /* 1 */
-    height: 0; /* 1 */
-    overflow: visible; /* 2 */
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
 }
 
 /**
@@ -89,8 +89,8 @@ hr {
    */
 
 pre {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
 /* Text-level semantics
@@ -102,8 +102,8 @@ pre {
    */
 
 a {
-    background-color: transparent; /* 1 */
-    -webkit-text-decoration-skip: objects; /* 2 */
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
 }
 
 /**
@@ -112,9 +112,9 @@ a {
    */
 
 abbr[title] {
-    border-bottom: none; /* 1 */
-    text-decoration: underline; /* 2 */
-    text-decoration: underline dotted; /* 2 */
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
 }
 
 /**
@@ -123,7 +123,7 @@ abbr[title] {
 
 b,
 strong {
-    font-weight: inherit;
+  font-weight: inherit;
 }
 
 /**
@@ -132,7 +132,7 @@ strong {
 
 b,
 strong {
-    font-weight: bolder;
+  font-weight: bolder;
 }
 
 /**
@@ -143,8 +143,8 @@ strong {
 code,
 kbd,
 samp {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
 /**
@@ -152,7 +152,7 @@ samp {
    */
 
 dfn {
-    font-style: italic;
+  font-style: italic;
 }
 
 /**
@@ -160,8 +160,8 @@ dfn {
    */
 
 mark {
-    background-color: #ff0;
-    color: #000;
+  background-color: #ff0;
+  color: #000;
 }
 
 /**
@@ -169,7 +169,7 @@ mark {
    */
 
 small {
-    font-size: 80%;
+  font-size: 80%;
 }
 
 /**
@@ -179,18 +179,18 @@ small {
 
 sub,
 sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
 }
 
 sub {
-    bottom: -0.25em;
+  bottom: -0.25em;
 }
 
 sup {
-    top: -0.5em;
+  top: -0.5em;
 }
 
 /* Embedded content
@@ -202,7 +202,7 @@ sup {
 
 audio,
 video {
-    display: inline-block;
+  display: inline-block;
 }
 
 /**
@@ -210,8 +210,8 @@ video {
    */
 
 audio:not([controls]) {
-    display: none;
-    height: 0;
+  display: none;
+  height: 0;
 }
 
 /**
@@ -219,7 +219,7 @@ audio:not([controls]) {
    */
 
 img {
-    border-style: none;
+  border-style: none;
 }
 
 /**
@@ -227,7 +227,7 @@ img {
    */
 
 svg:not(:root) {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 /* Forms
@@ -243,10 +243,10 @@ input,
 optgroup,
 select,
 textarea {
-    font-family: sans-serif; /* 1 */
-    font-size: 100%; /* 1 */
-    line-height: 1.15; /* 1 */
-    margin: 0; /* 2 */
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
 }
 
 /**
@@ -256,8 +256,8 @@ textarea {
 
 button,
 input {
-    /* 1 */
-    overflow: visible;
+  /* 1 */
+  overflow: visible;
 }
 
 /**
@@ -267,8 +267,8 @@ input {
 
 button,
 select {
-    /* 1 */
-    text-transform: none;
+  /* 1 */
+  text-transform: none;
 }
 
 /**
@@ -281,7 +281,7 @@ button,
 html [type='button'],
 [type='reset'],
 [type='submit'] {
-    -webkit-appearance: button; /* 2 */
+  -webkit-appearance: button; /* 2 */
 }
 
 /**
@@ -292,8 +292,8 @@ button::-moz-focus-inner,
 [type='button']::-moz-focus-inner,
 [type='reset']::-moz-focus-inner,
 [type='submit']::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
+  border-style: none;
+  padding: 0;
 }
 
 /**
@@ -304,7 +304,7 @@ button:-moz-focusring,
 [type='button']:-moz-focusring,
 [type='reset']:-moz-focusring,
 [type='submit']:-moz-focusring {
-    outline: 1px dotted ButtonText;
+  outline: 1px dotted ButtonText;
 }
 
 /**
@@ -312,7 +312,7 @@ button:-moz-focusring,
    */
 
 fieldset {
-    padding: 0.35em 0.75em 0.625em;
+  padding: 0.35em 0.75em 0.625em;
 }
 
 /**
@@ -323,12 +323,12 @@ fieldset {
    */
 
 legend {
-    box-sizing: border-box; /* 1 */
-    color: inherit; /* 2 */
-    display: table; /* 1 */
-    max-width: 100%; /* 1 */
-    padding: 0; /* 3 */
-    white-space: normal; /* 1 */
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
 }
 
 /**
@@ -337,8 +337,8 @@ legend {
    */
 
 progress {
-    display: inline-block; /* 1 */
-    vertical-align: baseline; /* 2 */
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
 }
 
 /**
@@ -346,7 +346,7 @@ progress {
    */
 
 textarea {
-    overflow: auto;
+  overflow: auto;
 }
 
 /**
@@ -356,8 +356,8 @@ textarea {
 
 [type='checkbox'],
 [type='radio'] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
 }
 
 /**
@@ -366,7 +366,7 @@ textarea {
 
 [type='number']::-webkit-inner-spin-button,
 [type='number']::-webkit-outer-spin-button {
-    height: auto;
+  height: auto;
 }
 
 /**
@@ -375,8 +375,8 @@ textarea {
    */
 
 [type='search'] {
-    -webkit-appearance: textfield; /* 1 */
-    outline-offset: -2px; /* 2 */
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
 }
 
 /**
@@ -385,7 +385,7 @@ textarea {
 
 [type='search']::-webkit-search-cancel-button,
 [type='search']::-webkit-search-decoration {
-    -webkit-appearance: none;
+  -webkit-appearance: none;
 }
 
 /**
@@ -394,8 +394,8 @@ textarea {
    */
 
 ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
-    font: inherit; /* 2 */
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
 }
 
 /* Interactive
@@ -408,7 +408,7 @@ textarea {
 
 details,
 menu {
-    display: block;
+  display: block;
 }
 
 /*
@@ -416,7 +416,7 @@ menu {
    */
 
 summary {
-    display: list-item;
+  display: list-item;
 }
 
 /* Scripting
@@ -427,7 +427,7 @@ summary {
    */
 
 canvas {
-    display: inline-block;
+  display: inline-block;
 }
 
 /**
@@ -435,7 +435,7 @@ canvas {
    */
 
 template {
-    display: none;
+  display: none;
 }
 
 /* Hidden
@@ -446,5 +446,5 @@ template {
    */
 
 [hidden] {
-    display: none;
+  display: none;
 }
diff --git a/demo/src/sass/lib/reset.scss b/demo/src/sass/lib/reset.scss
index 50798b10..9d987fe2 100644
--- a/demo/src/sass/lib/reset.scss
+++ b/demo/src/sass/lib/reset.scss
@@ -7,5 +7,5 @@
 *,
 *::after,
 *::before {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss
index edd917c4..575c4a6c 100644
--- a/demo/src/sass/settings/plyr.scss
+++ b/demo/src/sass/settings/plyr.scss
@@ -2,16 +2,17 @@
 // Plyr Settings
 // ==========================================================================
 
-// Font
-$plyr-font-family: inherit;
-
-// Sizes
+// Font sizes
 $plyr-font-size-base: 13px;
 $plyr-font-size-small: 12px;
 $plyr-font-size-time: 11px;
 $plyr-font-size-badges: 9px;
 
-// Other
+// Font weight
+$plyr-font-weight-regular: 500;
+$plyr-font-weight-bold: 600;
+
+// Font smoothing
 $plyr-font-smoothing: true;
 
 // Colors
diff --git a/demo/src/sass/settings/type.scss b/demo/src/sass/settings/type.scss
index 8c614361..c2c6695b 100644
--- a/demo/src/sass/settings/type.scss
+++ b/demo/src/sass/settings/type.scss
@@ -3,7 +3,7 @@
 // ==========================================================================
 
 $font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol';
+  'Segoe UI Symbol';
 
 $font-size-base: 15;
 $font-size-small: 13;
diff --git a/demo/src/sass/type/base.scss b/demo/src/sass/type/base.scss
index 736d8e89..91c7849b 100644
--- a/demo/src/sass/type/base.scss
+++ b/demo/src/sass/type/base.scss
@@ -4,31 +4,31 @@
 
 // Set to 100% for rem sizing
 html {
-    font-size: 100%;
+  font-size: 100%;
 }
 
 body {
-    @include font-smoothing();
-    @include font-size($font-size-base);
-    color: $color-text;
-    font-family: $font-sans-serif;
-    font-weight: $font-weight-medium;
-    line-height: $line-height-base;
+  @include font-smoothing();
+  @include font-size($font-size-base);
+  color: $color-text;
+  font-family: $font-sans-serif;
+  font-weight: $font-weight-medium;
+  line-height: $line-height-base;
 }
 
 button,
 input,
 select,
 textarea {
-    font: inherit;
+  font: inherit;
 }
 
 p,
 small {
-    margin: 0 0 ($spacing-base * 1.5);
+  margin: 0 0 ($spacing-base * 1.5);
 }
 
 small {
-    @include font-size($font-size-small);
-    display: block;
+  @include font-size($font-size-small);
+  display: block;
 }
diff --git a/demo/src/sass/type/headings.scss b/demo/src/sass/type/headings.scss
index 670619e8..a6a92971 100644
--- a/demo/src/sass/type/headings.scss
+++ b/demo/src/sass/type/headings.scss
@@ -3,10 +3,10 @@
 // ==========================================================================
 
 h1 {
-    @include font-size($font-size-h1);
-    color: $color-headings;
-    font-weight: $font-weight-bold;
-    letter-spacing: $letter-spacing-headings;
-    line-height: 1.2;
-    margin: 0 0 ($spacing-base * 1.5);
+  @include font-size($font-size-h1);
+  color: $color-headings;
+  font-weight: $font-weight-bold;
+  letter-spacing: $letter-spacing-headings;
+  line-height: 1.2;
+  margin: 0 0 ($spacing-base * 1.5);
 }
diff --git a/demo/src/sass/utilities/cosmetic.scss b/demo/src/sass/utilities/cosmetic.scss
index 91374d9d..2aec4e6d 100644
--- a/demo/src/sass/utilities/cosmetic.scss
+++ b/demo/src/sass/utilities/cosmetic.scss
@@ -3,5 +3,5 @@
 // ==========================================================================
 
 .no-border {
-    border: 0;
+  border: 0;
 }
diff --git a/demo/src/sass/utilities/hidden.scss b/demo/src/sass/utilities/hidden.scss
index 665bfd76..97267f4d 100644
--- a/demo/src/sass/utilities/hidden.scss
+++ b/demo/src/sass/utilities/hidden.scss
@@ -3,18 +3,18 @@
 // ==========================================================================
 
 [hidden] {
-    display: none;
+  display: none;
 }
 
 // Hide only visually, but have it available for screen readers: h5bp.com/v
 .sr-only {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    opacity: 0.001;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  opacity: 0.001;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }