15 files changed, 46 insertions, 37 deletions
diff --git a/demo/src/sass/bundles/demo.scss b/demo/src/sass/bundles/demo.scss
index 6592013c..07e229f5 100644
--- a/demo/src/sass/bundles/demo.scss
+++ b/demo/src/sass/bundles/demo.scss
@@ -2,8 +2,8 @@
 // Plyr.io Demo Page
 // ==========================================================================
 @charset 'UTF-8';
-
 @import '../../../../src/sass/lib/css-vars';
+
 $css-vars-use-native: true;
 
 // Settings
diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss
index 1c9375bf..7c3ae4f7 100644
--- a/demo/src/sass/components/buttons.scss
+++ b/demo/src/sass/components/buttons.scss
@@ -45,7 +45,7 @@
   }
 
   &.tab-focus {
-    @include tab-focus();
+    @include tab-focus;
   }
 
   &:active {
@@ -64,7 +64,7 @@
 
 // Count bubble
 .button__count {
-  animation: fadein 0.2s ease;
+  animation: fade-in 0.2s ease;
   background: $color-button-count-background;
   color: $color-button-count-text;
   margin-left: ($spacing-base * 0.75);
diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss
index 47ba69b0..cd70acb7 100644
--- a/demo/src/sass/components/header.scss
+++ b/demo/src/sass/components/header.scss
@@ -7,7 +7,7 @@ header {
   text-align: center;
 
   h1 span {
-    animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
+    animation: shrink-hide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
     display: inline-block;
     font-weight: $font-weight-light;
     opacity: 0.5;
diff --git a/demo/src/sass/components/icons.scss b/demo/src/sass/components/icons.scss
index 32e5f685..c40a14e5 100644
--- a/demo/src/sass/components/icons.scss
+++ b/demo/src/sass/components/icons.scss
@@ -2,6 +2,8 @@
 // Icons
 // ==========================================================================
 
+@use 'sass:math';
+
 // Base size icon styles
 .icon {
   fill: currentColor;
@@ -19,5 +21,5 @@ label svg {
 
 a .icon,
 .btn .icon {
-  margin-right: ($spacing-base / 2);
+  margin-right: math.div($spacing-base, 4);
 }
diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss
index 92e71931..4f03c4de 100644
--- a/demo/src/sass/components/links.scss
+++ b/demo/src/sass/components/links.scss
@@ -5,7 +5,7 @@
 // Make a <button> look like an <a>
 button.faux-link {
   @extend a; // stylelint-disable-line
-  @include cancel-button-styles();
+  @include cancel-button-styles;
 }
 
 // Links
@@ -39,7 +39,7 @@ a {
   }
 
   &.tab-focus {
-    @include tab-focus();
+    @include tab-focus;
   }
 
   &.no-border::after {
diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss
index 20422237..98cbaf17 100644
--- a/demo/src/sass/components/players.scss
+++ b/demo/src/sass/components/players.scss
@@ -2,6 +2,8 @@
 // Examples
 // ==========================================================================
 
+@use 'sass:math';
+
 // Example players
 .plyr {
   border-radius: $border-radius-large;
@@ -31,6 +33,6 @@
   color: $color-gray-500;
 
   .icon {
-    margin-right: ceil($spacing-base / 6);
+    margin-right: math.div($spacing-base, 6);
   }
 }
diff --git a/demo/src/sass/layout/core.scss b/demo/src/sass/layout/core.scss
index 3687b7d2..b613a9fc 100644
--- a/demo/src/sass/layout/core.scss
+++ b/demo/src/sass/layout/core.scss
@@ -2,6 +2,8 @@
 // Core
 // ==========================================================================
 
+@use 'sass:math';
+
 html,
 body {
   display: flex;
@@ -46,7 +48,7 @@ aside {
 
   .icon {
     fill: $color-twitter;
-    margin-right: ($spacing-base / 2);
+    margin-right: math.div($spacing-base, 2);
   }
 
   p {
diff --git a/demo/src/sass/lib/animation.scss b/demo/src/sass/lib/animation.scss
index cc18d59b..751b34c8 100644
--- a/demo/src/sass/lib/animation.scss
+++ b/demo/src/sass/lib/animation.scss
@@ -3,23 +3,26 @@
 // ==========================================================================
 
 // Fade
-@keyframes fadein {
+@keyframes fade-in {
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
 }
 
-@keyframes shrinkHide {
+@keyframes shrink-hide {
   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 d54188d0..3884b44a 100644
--- a/demo/src/sass/lib/fontface.scss
+++ b/demo/src/sass/lib/fontface.scss
@@ -4,7 +4,7 @@
 
 @font-face {
   font-display: swap;
-  font-family: 'Gordita';
+  font-family: Gordita;
   font-style: normal;
   font-weight: $font-weight-light;
   src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
@@ -13,7 +13,7 @@
 
 @font-face {
   font-display: swap;
-  font-family: 'Gordita';
+  font-family: Gordita;
   font-style: normal;
   font-weight: $font-weight-regular;
   src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
@@ -22,7 +22,7 @@
 
 @font-face {
   font-display: swap;
-  font-family: 'Gordita';
+  font-family: Gordita;
   font-style: normal;
   font-weight: $font-weight-medium;
   src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
@@ -31,7 +31,7 @@
 
 @font-face {
   font-display: swap;
-  font-family: 'Gordita';
+  font-family: Gordita;
   font-style: normal;
   font-weight: $font-weight-bold;
   src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
@@ -40,7 +40,7 @@
 
 @font-face {
   font-display: swap;
-  font-family: 'Gordita';
+  font-family: Gordita;
   font-style: normal;
   font-weight: $font-weight-black;
   src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
diff --git a/demo/src/sass/lib/mixins.scss b/demo/src/sass/lib/mixins.scss
index 2744bfb5..0f7e66b8 100644
--- a/demo/src/sass/lib/mixins.scss
+++ b/demo/src/sass/lib/mixins.scss
@@ -2,6 +2,8 @@
 // Mixins
 // ==========================================================================
 
+@use 'sass:math';
+
 // Convert a <button> into an <a>
 // ---------------------------------------
 @mixin cancel-button-styles() {
@@ -16,7 +18,7 @@
   position: relative;
   text-align: inherit;
   text-shadow: inherit;
-  -moz-user-select: text; // stylelint-disable-line
+  user-select: text;
   vertical-align: baseline;
   width: auto;
 }
@@ -32,7 +34,7 @@
 // Leave <body> at 100%/16px
 // ---------------------------------------
 @function calculate-rem($size) {
-  $rem: $size / 16;
+  $rem: math.div($size, 16);
   @return #{$rem}rem;
 }
 
diff --git a/demo/src/sass/lib/normalize.scss b/demo/src/sass/lib/normalize.scss
index f2d2c09c..52e4b986 100644
--- a/demo/src/sass/lib/normalize.scss
+++ b/demo/src/sass/lib/normalize.scss
@@ -11,8 +11,7 @@
 
 html {
   line-height: 1.15; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
+  text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
@@ -89,7 +88,7 @@ hr {
    */
 
 pre {
-  font-family: monospace, monospace; /* 1 */
+  font-family: monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 
@@ -103,7 +102,7 @@ pre {
 
 a {
   background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
+  text-decoration-skip: objects; /* 2 */
 }
 
 /**
@@ -112,7 +111,7 @@ a {
    */
 
 abbr[title] {
-  border-bottom: none; /* 1 */
+  border-bottom: 0; /* 1 */
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
 }
@@ -281,7 +280,7 @@ button,
 html [type='button'],
 [type='reset'],
 [type='submit'] {
-  -webkit-appearance: button; /* 2 */
+  appearance: button; /* 2 */
 }
 
 /**
@@ -375,7 +374,7 @@ textarea {
    */
 
 [type='search'] {
-  -webkit-appearance: textfield; /* 1 */
+  appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
 
@@ -385,7 +384,7 @@ textarea {
 
 [type='search']::-webkit-search-cancel-button,
 [type='search']::-webkit-search-decoration {
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 /**
@@ -394,7 +393,7 @@ textarea {
    */
 
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
+  appearance: button; /* 1 */
   font: inherit; /* 2 */
 }
 
diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss
index ecd55ad1..451bc29d 100644
--- a/demo/src/sass/settings/colors.scss
+++ b/demo/src/sass/settings/colors.scss
@@ -3,7 +3,7 @@
 // ==========================================================================
 
 // Grayscale
-$color-gray-900: hsl(210, 15%, 16%);
+$color-gray-900: hsl(210deg 15% 16%);
 $color-gray-800: lighten($color-gray-900, 9%);
 $color-gray-700: lighten($color-gray-800, 9%);
 $color-gray-600: lighten($color-gray-700, 9%);
@@ -15,7 +15,7 @@ $color-gray-100: lighten($color-gray-200, 9%);
 $color-gray-50: lighten($color-gray-100, 9%);
 
 // Branding
-$color-brand-primary: hsl(198, 100%, 50%);
+$color-brand-primary: hsl(198deg 100% 50%);
 
 // Text
 $color-text: $color-gray-700;
@@ -28,13 +28,13 @@ $color-twitter: #4baaf4;
 $color-link: $color-brand-primary;
 
 // Background
-$color-background-from: hsl(198, 100%, 94%);
-$color-background-to: hsl(198, 100%, 98%);
+$color-background-from: hsl(198deg 100% 94%);
+$color-background-to: hsl(198deg 100% 98%);
 
 // Buttons
 $color-button-background: $color-brand-primary;
 $color-button-text: #fff;
-$color-button-background-hover: hsl(198, 100%, 55%);
+$color-button-background-hover: hsl(198deg 100% 55%);
 $color-button-count-background: #fff;
 $color-button-count-text: $color-gray-600;
 
diff --git a/demo/src/sass/settings/type.scss b/demo/src/sass/settings/type.scss
index c2c6695b..c01d9496 100644
--- a/demo/src/sass/settings/type.scss
+++ b/demo/src/sass/settings/type.scss
@@ -4,18 +4,14 @@
 
 $font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
   'Segoe UI Symbol';
-
 $font-size-base: 15;
 $font-size-small: 13;
 $font-size-large: 18;
 $font-size-h1: 64;
-
 $font-weight-light: 300;
 $font-weight-regular: 400;
 $font-weight-medium: 500;
 $font-weight-bold: 600;
 $font-weight-black: 900;
-
 $line-height-base: 1.75;
-
 $letter-spacing-headings: -0.025em;
diff --git a/demo/src/sass/type/base.scss b/demo/src/sass/type/base.scss
index 91c7849b..c4fc5931 100644
--- a/demo/src/sass/type/base.scss
+++ b/demo/src/sass/type/base.scss
@@ -8,8 +8,9 @@ html {
 }
 
 body {
-  @include font-smoothing();
+  @include font-smoothing;
   @include font-size($font-size-base);
+
   color: $color-text;
   font-family: $font-sans-serif;
   font-weight: $font-weight-medium;
@@ -30,5 +31,6 @@ small {
 
 small {
   @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 a6a92971..ca32076f 100644
--- a/demo/src/sass/type/headings.scss
+++ b/demo/src/sass/type/headings.scss
@@ -4,6 +4,7 @@
 
 h1 {
   @include font-size($font-size-h1);
+
   color: $color-headings;
   font-weight: $font-weight-bold;
   letter-spacing: $letter-spacing-headings;