Merge pull request #62 from brunowego/patch-1

Updated SASS support

1 files changed, 530 insertions, 524 deletions

diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index 8b4f3ba3..17b770a2 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -5,582 +5,588 @@
 // Variables
 // -------------------------------
 // Colors
-$blue:          			#3498DB;
-$gray-dark: 				#343f4a;
-$gray: 						#565d64;
-$gray-light: 				#cbd0d3;
+$blue:                #3498DB;
+$gray-dark:           #343f4a;
+$gray:                #565d64;
+$gray-light:          #cbd0d3;
 
 // Font sizes
-$font-size-small: 			14px;
-$font-size-base: 			16px;
-$font-size-large:           ceil(($font-size-base * 1.5));
+$font-size-small:     14px;
+$font-size-base:      16px;
+$font-size-large:     ceil(($font-size-base * 1.5));
 
 // Controls
-$control-spacing: 			10px;
-$controls-bg: 				$gray-dark;
-$control-bg-hover: 			$blue;
-$control-color: 			$gray-light;
-$control-color-inactive: 	$gray;
-$control-color-hover: 		#fff;
+$control-spacing:     10px;
+$controls-bg:         $gray-dark;
+$control-bg-hover:    $blue;
+$control-color:       $gray-light;
+$control-color-inactive: $gray;
+$control-color-hover: #fff;
 
 // Tooltips
-$tooltip-bg: 				$controls-bg;
-$tooltip-color: 			#fff;
-$tooltip-padding: 			$control-spacing; 	
-$tooltip-arrow-size: 		5px;
-$tooltip-radius: 			3px;
+$tooltip-bg:          $controls-bg;
+$tooltip-color:       #fff;
+$tooltip-padding:     $control-spacing;
+$tooltip-arrow-size:  5px;
+$tooltip-radius:      3px;
 
 // Progress
-$progress-bg: 				lighten($gray, 10%);
-$progress-playing-bg: 		$blue;
-$progress-buffered-bg: 		$gray;
-$progress-loading-size: 	40px;
-$progress-loading-bg: 		rgba(0,0,0, .15);
-
-// Range
-$volume-track-height: 		6px;
-$volume-track-bg: 			$gray;
-$volume-thumb-height: 		($volume-track-height * 2);
-$volume-thumb-width: 		($volume-track-height * 2);
-$volume-thumb-bg: 			$control-color;
-$volume-thumb-bg-focus: 	$control-bg-hover;
+$progress-bg:         lighten($gray, 10%);
+$progress-playing-bg: $blue;
+$progress-buffered-bg: $gray;
+$progress-loading-size: 40px;
+$progress-loading-bg: rgba(0,0,0, .15);
+
+// Volume
+$volume-track-height: 6px;
+$volume-track-bg:     $gray;
+$volume-thumb-height: ($volume-track-height * 2);
+$volume-thumb-width:  ($volume-track-height * 2);
+$volume-thumb-bg:     $control-color;
+$volume-thumb-bg-focus: $control-bg-hover;
 
 // Breakpoints
-$bp-control-split: 			560px; // When controls split into left/right
-$bp-captions-large: 		768px; // When captions jump to the larger font size
+$bp-control-split:    560px; // When controls split into left/right
+$bp-captions-large:   768px; // When captions jump to the larger font size
 
 // Utility classes & mixins
 // -------------------------------
 // Screen reader only
 .sr-only {
-	position: absolute !important;
-	clip: rect(1px, 1px, 1px, 1px);
-	padding: 0 !important;
-	border: 0 !important;
-	height: 1px !important;
-	width: 1px !important;
-	overflow: hidden;
+  position: absolute !important;
+  clip: rect(1px, 1px, 1px, 1px);
+  padding: 0 !important;
+  border: 0 !important;
+  height: 1px !important;
+  width: 1px !important;
+  overflow: hidden;
 }
 // Contain floats: nicolasgallagher.com/micro-clearfix-hack/
 @mixin clearfix()
 {
-	zoom: 1;
-	&:before,
-	&:after { content: ""; display: table; }
-	&:after { clear: both; }
+  zoom: 1;
+  &:before,
+  &:after { content: ""; display: table; }
+  &:after { clear: both; }
 }
 // Tab focus styles
 @mixin tab-focus()
 {
-	outline: thin dotted #000;
-	outline-offset: 0;
+  outline: thin dotted #000;
+  outline-offset: 0;
 }
 
 // Animation
 // ---------------------------------------
 @keyframes progress {
-	to { background-position: @progress-loading-size 0; }
+  to { background-position: $progress-loading-size 0; }
 }
 
 // <input type="range"> styling
 // ---------------------------------------
 @mixin volume-thumb()
 {
-	height: $volume-thumb-height;
-	width: $volume-thumb-width;
-	background: $volume-thumb-bg;
-	border: 0;
-	border-radius: ($volume-thumb-height / 2);
-	transition: background .3s ease;
-	cursor: ew-resize;
+  height: $volume-thumb-height;
+  width: $volume-thumb-width;
+  background: $volume-thumb-bg;
+  border: 0;
+  border-radius: ($volume-thumb-height / 2);
+  transition: background .3s ease;
+  cursor: ew-resize;
 }
 @mixin volume-track()
 {
-	height: $volume-track-height;
-	background: $volume-track-bg;
-	border: 0;
-	border-radius: ($volume-track-height / 2);
+  height: $volume-track-height;
+  background: $volume-track-bg;
+  border: 0;
+  border-radius: ($volume-track-height / 2);
 }
-@mixin seek-thumb() {
-	background: transparent;
-	border: 0;
-	width: ($control-spacing * 2);
-	height: $control-spacing;
+@mixin seek-thumb()
+{
+  background: transparent;
+  border: 0;
+  width: ($control-spacing * 2);
+  height: $control-spacing;
 }
-@mixin seek-track() {
-	background: none;
-	border: 0;
+@mixin seek-track()
+{
+  background: none;
+  border: 0;
 }
 
 // Font smoothing
 // ---------------------------------------
-@mixin font-smoothing($mode: on) when ($mode = on)
-{
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-font-smoothing: antialiased;
-}
-@mixin font-smoothing($mode: on) when ($mode = off)
+@mixin font-smoothing($mode: on)
 {
-	-moz-osx-font-smoothing: auto;
-	-webkit-font-smoothing: subpixel-antialiased;
+  @if $mode == 'on' {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+  } @else if $mode == 'off' {
+    -moz-osx-font-smoothing: auto;
+    -webkit-font-smoothing: subpixel-antialiased;
+  }
 }
 
 // Styles
 // -------------------------------
 // Base
 .player {
-	position: relative;
-	max-width: 100%;
-	min-width: 290px;
-
-	// border-box everything
-	// http://paulirish.com/2012/box-sizing-border-box-ftw/
-	&,
-	*,
-	*::after,
-	*::before {
-		box-sizing: border-box;
-	}
-
-	// For video
-	&-video-wrapper {
-		position: relative;
-	}
-	video {
-		width: 100%;
-		height: auto;
-		vertical-align: middle;
-	}
-
-	// Captions
-	&-captions {
-		display: none;
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		padding: 20px;
-		min-height: 2.5em;
-		color: #fff;
-		font-size: $font-size-base;
-		font-weight: 600;
-		text-shadow:
-		-1px -1px 0 $gray,
-		1px -1px 0 $gray,
-		-1px 1px 0 $gray,
-		1px 1px 0 $gray;
-		text-align: center;
-		@include font-smoothing();
-
-		@media (min-width: $bp-captions-large) {
-			font-size: $font-size-large;
-		}
-	}
-	&.captions-active &-captions {
-		display: block;
-	}
-
-	// Player controls
-	&-controls {
-		@include clearfix();
-		@include font-smoothing();
-		position: relative;
-		padding: ($control-spacing * 2) $control-spacing $control-spacing;
-		background: $controls-bg;
-		line-height: 1;
-		text-align: center;
-
-		// Layout
-		&-sound {
-			display: block;
-			margin: $control-spacing auto 0;
-		}
-		@media (min-width: $bp-control-split) {
-			&-left {
-				float: left;
-			}
-			&-right {
-				float: right;
-				margin-top: 0;
-			}
-		}
-
-		input + label,
-		button {
-			display: inline-block;
-			vertical-align: middle;
-			margin: 0 2px;
-			padding: ($control-spacing / 2) $control-spacing;
-
-			transition: background .3s ease;
-			border-radius: 3px;
-			cursor: pointer;
-
-			svg {
-				width: 18px;
-				height: 18px;
-				display: block;
-				fill: currentColor;
-				transition: fill .3s ease;
-			}
-		}
-		input + label,
-		.inverted:checked + label {
-			color: $control-color-inactive;
-		}
-		button,
-		.inverted + label,
-		input:checked + label {
-			color: $control-color;
-		}
-		button {
-			border: 0;
-			background: transparent;
-			overflow: hidden;
-		}
-		input:focus + label,
-		button:focus {
-			@include tab-focus();
-			color: $control-color-focus;
-		}
-		button:hover,
-		input + label:hover {
-			background: $control-bg-hover;
-			color: $control-color-hover;
-		}
-		.icon-exit-fullscreen,
-		.icon-muted,
-		.icon-captions-on {
-			display: none;
-		}
-		.player-time {
-			display: inline-block;
-			vertical-align: middle;
-			margin-left: $control-spacing;
-			color: $control-color;
-			font-weight: 600;
-			font-size: $font-size-small;
-			@include font-smoothing();
-		}
-	}
-
-	// Tooltips
-	&-tooltip {
-		visibility: hidden;
-		position: absolute;
-		z-index: 2;
-		bottom: 100%;
-		margin-bottom: $tooltip-padding;
-		padding: $tooltip-padding ($tooltip-padding * 1.5);
+  position: relative;
+  max-width: 100%;
+  min-width: 290px;
+
+  // border-box everything
+  // http://paulirish.com/2012/box-sizing-border-box-ftw/
+  &,
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  // For video
+  &-video-wrapper {
+    position: relative;
+  }
+  video {
+    width: 100%;
+    height: auto;
+    vertical-align: middle;
+  }
+
+  // Captions
+  &-captions {
+    display: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 20px;
+    min-height: 2.5em;
+    color: #fff;
+    font-size: $font-size-base;
+    font-weight: 600;
+    text-shadow:
+    -1px -1px 0 $gray,
+    1px -1px 0 $gray,
+    -1px 1px 0 $gray,
+    1px 1px 0 $gray;
+    text-align: center;
+    @include font-smoothing();
+
+    @media (min-width: $bp-captions-large) {
+      font-size: $font-size-large;
+    }
+  }
+  &.captions-active &-captions {
+    display: block;
+  }
+
+  // Player controls
+  &-controls {
+    @include clearfix();
+    @include font-smoothing();
+    position: relative;
+    padding: ($control-spacing * 2) $control-spacing $control-spacing;
+    background: $controls-bg;
+    line-height: 1;
+    text-align: center;
+
+    // Layout
+    &-right {
+      display: block;
+      margin: $control-spacing auto 0;
+    }
+    @media (min-width: $bp-control-split) {
+      &-left {
+        float: left;
+      }
+      &-right {
+        float: right;
+        margin-top: 0;
+      }
+    }
+
+    input + label,
+    button {
+      display: inline-block;
+      vertical-align: middle;
+      margin: 0 2px;
+      padding: ($control-spacing / 2) $control-spacing;
+
+      transition: background .3s ease;
+      border-radius: 3px;
+      cursor: pointer;
+
+      svg {
+        width: 18px;
+        height: 18px;
+        display: block;
+        fill: currentColor;
+        transition: fill .3s ease;
+      }
+    }
+    input + label,
+    .inverted:checked + label {
+      color: $control-color-inactive;
+    }
+    button,
+    .inverted + label,
+    input:checked + label {
+      color: $control-color;
+    }
+    button {
+      border: 0;
+      background: transparent;
+      overflow: hidden;
+    }
+
+    // Specificity for overriding .inverted
+    button:focus,
+    button: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 {
+      display: none;
+    }
+    .player-time {
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: $control-spacing;
+      color: $control-color;
+      font-weight: 600;
+      font-size: $font-size-small;
+      @include font-smoothing();
+    }
+  }
+
+  // Tooltips
+  &-tooltip {
+    visibility: hidden;
+    position: absolute;
+    z-index: 2;
+    bottom: 100%;
+    margin-bottom: $tooltip-padding;
+    padding: $tooltip-padding ($tooltip-padding * 1.5);
 
         opacity: 0;
-		background: $tooltip-bg;
-		border-radius: $tooltip-radius;
-		color: $tooltip-color;
-		font-size: $font-size-small;
-		line-height: 1.5;
-		font-weight: 600;
-
-		transform: translate(-50%, ($tooltip-padding * 3));
+    background: $tooltip-bg;
+    border-radius: $tooltip-radius;
+    color: $tooltip-color;
+    font-size: $font-size-small;
+    line-height: 1.5;
+    font-weight: 600;
+
+    transform: translate(-50%, ($tooltip-padding * 3));
         transition: transform .2s .2s ease, opacity .2s .2s ease;
 
-		&::after {
-			content: "";
-			display: block;
-			position: absolute;
-			left: 50%;
-			bottom: -$tooltip-arrow-size;
-			margin-left: -$tooltip-arrow-size;
-			width: 0;
-			height: 0;
-			transition: inherit;
-			border-style: solid;
-			border-width: $tooltip-arrow-size $tooltip-arrow-size 0 $tooltip-arrow-size;
-			border-color: $controls-bg transparent transparent;
-		}
-	}
-	label:hover .player-tooltip,
-	input:focus + label .player-tooltip, 
-	button:hover .player-tooltip,
-	button:focus .player-tooltip {
-		visibility: visible;
-		opacity: 1;
-		transform: translate(-50%, 0);
-	}
-	label:hover .player-tooltip,
-	button:hover .player-tooltip {
-		z-index: 3;
-	}
-
-	// Player progress
-	// <progress> element
-	&-progress {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		width: 100%;
-		height: $control-spacing;
-		background: $progress-bg;
-
-		&-buffer[value],
-		&-played[value],
-		&-seek[type=range] {
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			margin: 0;
-			vertical-align: top;
-
-			-webkit-appearance: none;
-			-moz-appearance: none;
-			border: none;
-			background: transparent;
-		}
-
-		&-buffer[value],
-		&-played[value] {	
-			&::-webkit-progress-bar {
-				background: transparent;
-			}
-
-			// Inherit from currentColor;
-			&::-webkit-progress-value {
-				background: currentColor;
-			}
-			&::-moz-progress-bar {
-				background: currentColor;
-			}
-		}
-		&-played[value] {
-			z-index: 2;
-			color: $progress-playing-bg;
-		}
-		&-buffer[value] {
-			color: $progress-buffered-bg;
-		}
-
-		// Seek control
-		// <input[type='range']> element
-		// Specificity is for bootstrap compatibility
-		&-seek[type=range] {
-			z-index: 3;
-			cursor: pointer;
-			outline: 0;
-
-			// Webkit
-			&::-webkit-slider-runnable-track {
-				@include seek-track();
-			}
-			&::-webkit-slider-thumb {
-				-webkit-appearance: none;
-				@include seek-thumb();
-			}
-
-			// Mozilla
-			&::-moz-range-track {
-				@include seek-track();
-			}
-			&::-moz-range-thumb {
-				-moz-appearance: none;
-				@include seek-thumb();
-			}
-			
-			// Microsoft
-			&::-ms-track {
-				color: transparent;
-				@include seek-track();
-			}
-			&::-ms-fill-lower,
-			&::-ms-fill-upper {
-				@include seek-track();
-			}
-			&::-ms-thumb {
-				@include seek-thumb();
-			}
-
-			&:focus {
-				outline: 0;
-			}
-			&::-moz-focus-outer {
-				border: 0;
-			}
-		}
-	}
-
-	// Loading state
-	&.loading .player-progress-buffer {
-		animation: progress 1s linear infinite;
-		background-size: $progress-loading-size $progress-loading-size;
-		background-repeat: repeat-x;
-		background-color: $progress-buffered-bg;
-		background-image: linear-gradient(
-			-45deg, 
-			$progress-loading-bg 25%, 
-			transparent 25%, 
-			transparent 50%, 
-			$progress-loading-bg 50%, 
-			$progress-loading-bg 75%,
-			transparent 75%, 
-			transparent);
-	    color: transparent;
-	}
-
-	// States
-	&-controls [data-player='pause'],
-	&.playing .player-controls [data-player='play'] {
-		display: none;
-	}
-	&.playing .player-controls [data-player='pause'] {
-		display: inline-block;
-	}
-
-	// Volume control
-	// <input[type='range']> element
-	// Specificity is for bootstrap compatibility
-	&-volume[type=range] {
-		vertical-align: middle;
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		width: 100px;
-		margin: 0 $control-spacing 0 0;
-		padding: 0;
-		cursor: pointer;
-		background: none;
-
-		// Webkit
-		&::-webkit-slider-runnable-track {
-			@include range-track();
-		}
-		&::-webkit-slider-thumb {
-			-webkit-appearance: none;
-			margin-top: -(($volume-thumb-height - $volume-track-height) / 2);
-			@include range-thumb();
-		}
-
-		// Mozilla
-		&::-moz-range-track {
-			@include range-track();
-		}
-		&::-moz-range-thumb {
-			@include range-thumb();
-		}
-
-		// Microsoft
-		&::-ms-track {
-			height: $volume-track-height;
-			background: transparent;
-			border-color: transparent;
-			border-width: (($volume-thumb-height - $volume-track-height) / 2) 0;
-			color: transparent;
-		}
-		&::-ms-fill-lower,
-		&::-ms-fill-upper {
-			@include range-track();
-		}
-		&::-ms-thumb {
-			@include range-thumb();
-		}
-
-		&:focus {
-			outline: 0;
-
-			&::-webkit-slider-thumb {
-				background: $volume-thumb-bg-focus;
-			}
-			&::-moz-range-thumb {
-				background: $volume-thumb-bg-focus;
-			}
-			&::-ms-thumb {
-				background: $volume-thumb-bg-focus;
-			}
-		}
-	}
-
-	// 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
-	&.ios &-volume,
-	&.ios [data-player='mute'],
-	&.ios [data-player='mute'] + label,
-	&-audio.ios &-controls-right {
-		display: none;
-	}
-	// Center buttons so it looks less odd
-	&-audio.ios &-controls-left {
-		float: none;
-	}
-
-	// Full screen mode
-	&-fullscreen,
-	&.fullscreen-active {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		height: 100%;
-		width: 100%;
-		z-index: 10000000;
-		background: #000;
-
-		.player-video-wrapper {
-			height: 100%;
-			width: 100%;
-
-			video {
-				height: 100%;
-			}
-			.player-captions {
-				top: auto;
-				bottom: 90px;
-
-				@media (min-width: $bp-control-split) and (max-width: ($bp-captions-large - 1)) {
-					bottom: 60px;
-				}
-				@media (min-width: $bp-captions-large) {
-					bottom: 80px;
-				}
-			}
-		}
-		.player-controls {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			right: 0;
-		}
-	}
-
-	// Change icons on state change
-	&.fullscreen-active .icon-exit-fullscreen,
-	&.muted .player-controls .icon-muted,
-	&.captions-active .player-controls .icon-captions-on {
-		display: block;
-
-		& + svg {
-			display: none;
-		}
-	}
-
-	// Some options are hidden by default
-	[data-player='captions'],
-	[data-player='captions'] + label,
-	[data-player='fullscreen'],
-	[data-player='fullscreen'] + label {
-		display: none;
-	}
-	&.captions-enabled [data-player='captions'],
-	&.captions-enabled [data-player='captions'] + label,
-	&.fullscreen-enabled [data-player='fullscreen'],
-	&.fullscreen-enabled [data-player='fullscreen'] + label {
-		display: inline-block;
-	}
-
-	// Full browser view hides toggle
-	&-fullscreen [data-player='fullscreen'],
-	&-fullscreen [data-player='fullscreen'] + label {
-		display: none !important;
-	}
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      left: 50%;
+      bottom: -$tooltip-arrow-size;
+      margin-left: -$tooltip-arrow-size;
+      width: 0;
+      height: 0;
+      transition: inherit;
+      border-style: solid;
+      border-width: $tooltip-arrow-size $tooltip-arrow-size 0 $tooltip-arrow-size;
+      border-color: $controls-bg transparent transparent;
+    }
+  }
+  label:hover .player-tooltip,
+  input:focus + label .player-tooltip,
+  button:hover .player-tooltip,
+  button:focus .player-tooltip {
+    visibility: visible;
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+  label:hover .player-tooltip,
+  button:hover .player-tooltip {
+    z-index: 3;
+  }
+
+  // Player progress
+  // <progress> element
+  &-progress {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: $control-spacing;
+    background: $progress-bg;
+
+    &-buffer[value],
+    &-played[value],
+    &-seek[type=range] {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: $control-spacing;
+      margin: 0;
+      padding: 0;
+      vertical-align: top;
+
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      border: none;
+      background: transparent;
+    }
+    &-buffer[value],
+    &-played[value] {
+      &::-webkit-progress-bar {
+        background: transparent;
+      }
+
+      // Inherit from currentColor;
+      &::-webkit-progress-value {
+        background: currentColor;
+      }
+      &::-moz-progress-bar {
+        background: currentColor;
+      }
+    }
+    &-played[value] {
+      z-index: 2;
+      color: $progress-playing-bg;
+    }
+    &-buffer[value] {
+      color: $progress-buffered-bg;
+    }
+
+    // Seek control
+    // <input[type='range']> element
+    // Specificity is for bootstrap compatibility
+    &-seek[type=range] {
+      z-index: 4;
+      cursor: pointer;
+      outline: 0;
+
+      // Webkit
+      &::-webkit-slider-runnable-track {
+        @include seek-track();
+      }
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        @include seek-thumb();
+      }
+
+      // Mozilla
+      &::-moz-range-track {
+        @include seek-track();
+      }
+      &::-moz-range-thumb {
+        -moz-appearance: none;
+        @include seek-thumb();
+      }
+
+      // Microsoft
+      &::-ms-track {
+        color: transparent;
+        @include seek-track();
+      }
+      &::-ms-fill-lower,
+      &::-ms-fill-upper {
+        @include seek-track();
+      }
+      &::-ms-thumb {
+        @include seek-thumb();
+      }
+
+      &:focus {
+        outline: 0;
+      }
+      &::-moz-focus-outer {
+        border: 0;
+      }
+    }
+  }
+
+  // Loading state
+  &.loading .player-progress-buffer {
+    animation: progress 1s linear infinite;
+    background-size: $progress-loading-size $progress-loading-size;
+    background-repeat: repeat-x;
+    background-color: $progress-buffered-bg;
+    background-image: linear-gradient(
+      -45deg,
+      $progress-loading-bg 25%,
+      transparent 25%,
+      transparent 50%,
+      $progress-loading-bg 50%,
+      $progress-loading-bg 75%,
+      transparent 75%,
+      transparent);
+      color: transparent;
+  }
+
+  // States
+  &-controls [data-player='pause'],
+  &.playing .player-controls [data-player='play'] {
+    display: none;
+  }
+  &.playing .player-controls [data-player='pause'] {
+    display: inline-block;
+  }
+
+  // Volume control
+  // <input[type='range']> element
+  // Specificity is for bootstrap compatibility
+  &-volume[type=range] {
+    display: inline-block;
+    vertical-align: middle;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 100px;
+    margin: 0 $control-spacing 0 0;
+    padding: 0;
+    cursor: pointer;
+    background: none;
+
+    // Webkit
+    &::-webkit-slider-runnable-track {
+      @include volume-track();
+    }
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      margin-top: -(($volume-thumb-height - $volume-track-height) / 2);
+      @include volume-thumb();
+    }
+
+    // Mozilla
+    &::-moz-range-track {
+      @include volume-track();
+    }
+    &::-moz-range-thumb {
+      @include volume-thumb();
+    }
+
+    // Microsoft
+    &::-ms-track {
+      height: $volume-track-height;
+      background: transparent;
+      border-color: transparent;
+      border-width: (($volume-thumb-height - $volume-track-height) / 2) 0;
+      color: transparent;
+    }
+    &::-ms-fill-lower,
+    &::-ms-fill-upper {
+      @include volume-track();
+    }
+    &::-ms-thumb {
+      @include volume-thumb();
+    }
+
+    &:focus {
+      outline: 0;
+
+      &::-webkit-slider-thumb {
+        background: $volume-thumb-bg-focus;
+      }
+      &::-moz-range-thumb {
+        background: $volume-thumb-bg-focus;
+      }
+      &::-ms-thumb {
+        background: $volume-thumb-bg-focus;
+      }
+    }
+  }
+
+  // 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
+  &.ios &-volume,
+  &.ios [data-player='mute'],
+  &.ios [data-player='mute'] + label,
+  &-audio.ios &-controls-right {
+    display: none;
+  }
+  // Center buttons so it looks less odd
+  &-audio.ios &-controls-left {
+    float: none;
+  }
+
+  // Full screen mode
+  &-fullscreen,
+  &.fullscreen-active {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 10000000;
+    background: #000;
+
+    .player-video-wrapper {
+      height: 100%;
+      width: 100%;
+
+      video {
+        height: 100%;
+      }
+      .player-captions {
+        top: auto;
+        bottom: 90px;
+
+        @media (min-width: $bp-control-split) and (max-width: ($bp-captions-large - 1)) {
+          bottom: 60px;
+        }
+        @media (min-width: $bp-captions-large) {
+          bottom: 80px;
+        }
+      }
+    }
+    .player-controls {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+
+  // Change icons on state change
+  &.fullscreen-active .icon-exit-fullscreen,
+  &.muted .player-controls .icon-muted,
+  &.captions-active .player-controls .icon-captions-on {
+    display: block;
+
+    & + svg {
+      display: none;
+    }
+  }
+
+  // Some options are hidden by default
+  [data-player='captions'],
+  [data-player='captions'] + label,
+  [data-player='fullscreen'],
+  [data-player='fullscreen'] + label {
+    display: none;
+  }
+  &.captions-enabled [data-player='captions'],
+  &.captions-enabled [data-player='captions'] + label,
+  &.fullscreen-enabled [data-player='fullscreen'],
+  &.fullscreen-enabled [data-player='fullscreen'] + label {
+    display: inline-block;
+  }
+
+  // Full browser view hides toggle
+  &-fullscreen [data-player='fullscreen'],
+  &-fullscreen [data-player='fullscreen'] + label {
+    display: none !important;
+  }
 }