Updated SASS support

src/sass/plyr.scss

@@ -37,7 +37,7 @@ $progress-buffered-bg: 		$gray;
 $progress-loading-size: 40px;
 $progress-loading-bg: rgba(0,0,0, .15);
 
-// Range
+// Volume
 $volume-track-height: 6px;
 $volume-track-bg:     $gray;
 $volume-thumb-height: ($volume-track-height * 2);
@@ -79,7 +79,7 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 // Animation
 // ---------------------------------------
 @keyframes progress {
-	to { background-position: @progress-loading-size 0; }
+  to { background-position: $progress-loading-size 0; }
 }
 
 // <input type="range"> styling
@@ -101,28 +101,30 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
   border: 0;
   border-radius: ($volume-track-height / 2);
 }
-@mixin seek-thumb() {
+@mixin seek-thumb()
+{
   background: transparent;
   border: 0;
   width: ($control-spacing * 2);
   height: $control-spacing;
 }
-@mixin seek-track() {
+@mixin seek-track()
+{
   background: none;
   border: 0;
 }
 
 // Font smoothing
 // ---------------------------------------
-@mixin font-smoothing($mode: on) when ($mode = on)
+@mixin font-smoothing($mode: on)
 {
+  @if $mode == 'on' {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
-}
+  } @else if $mode == 'off' {
-@mixin font-smoothing($mode: on) when ($mode = off)
-{
     -moz-osx-font-smoothing: auto;
     -webkit-font-smoothing: subpixel-antialiased;
+  }
 }
 
 // Styles
@@ -191,7 +193,7 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
     text-align: center;
 
     // Layout
-		&-sound {
+    &-right {
       display: block;
       margin: $control-spacing auto 0;
     }
@@ -238,16 +240,19 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
       background: transparent;
       overflow: hidden;
     }
-		input:focus + label,
+
-		button:focus {
+    // Specificity for overriding .inverted
-			@include tab-focus();
+    button:focus,
-			color: $control-color-focus;
-		}
     button:hover,
-		input + label:hover {
+    [type="checkbox"]:focus + label,
+    [type="checkbox"] + label:hover {
       background: $control-bg-hover;
       color: $control-color-hover;
     }
+    button:focus,
+    input:focus + label {
+      outline: 0;
+    }
     .icon-exit-fullscreen,
     .icon-muted,
     .icon-captions-on {
@@ -330,8 +335,9 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
       left: 0;
       top: 0;
       width: 100%;
-			height: 100%;
+      height: $control-spacing;
       margin: 0;
+      padding: 0;
       vertical-align: top;
 
       -webkit-appearance: none;
@@ -339,7 +345,6 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
       border: none;
       background: transparent;
     }
-
     &-buffer[value],
     &-played[value] {
       &::-webkit-progress-bar {
@@ -366,7 +371,7 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
     // <input[type='range']> element
     // Specificity is for bootstrap compatibility
     &-seek[type=range] {
-			z-index: 3;
+      z-index: 4;
       cursor: pointer;
       outline: 0;
 
@@ -441,6 +446,7 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
   // <input[type='range']> element
   // Specificity is for bootstrap compatibility
   &-volume[type=range] {
+    display: inline-block;
     vertical-align: middle;
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -452,20 +458,20 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 
     // Webkit
     &::-webkit-slider-runnable-track {
-			@include range-track();
+      @include volume-track();
     }
     &::-webkit-slider-thumb {
       -webkit-appearance: none;
       margin-top: -(($volume-thumb-height - $volume-track-height) / 2);
-			@include range-thumb();
+      @include volume-thumb();
     }
 
     // Mozilla
     &::-moz-range-track {
-			@include range-track();
+      @include volume-track();
     }
     &::-moz-range-thumb {
-			@include range-thumb();
+      @include volume-thumb();
     }
 
     // Microsoft
@@ -478,10 +484,10 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
     }
     &::-ms-fill-lower,
     &::-ms-fill-upper {
-			@include range-track();
+      @include volume-track();
     }
     &::-ms-thumb {
-			@include range-thumb();
+      @include volume-thumb();
     }
 
     &:focus {