pillar/src/styles/plugins/_videoplayer.sass

$videoplayer-controls-color: white
$videoplayer-background-color: darken($primary, 10%)

$videoplayer-progress-bar-height: .5em

.video-js
	.vjs-big-play-button:before, .vjs-control:before, .vjs-modal-dialog
		position: absolute
		top: 0
		left: 0
		width: 100%
		height: 100%
	.vjs-big-play-button:before, .vjs-control:before
		text-align: center

	.vjs-big-play-button, .vjs-play-control
		font-family: VideoJS
		font-weight: normal
		font-style: normal

.vjs-modal-dialog .vjs-modal-dialog-content
	position: absolute
	top: 0
	left: 0
	width: 100%
	height: 100%


@font-face
	font-family: VideoJS
	src: url(data:application/font-woff;charset=utf-8;base64,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
	font-weight: normal
	font-style: normal

.vjs-icon-play
	font-family: VideoJS
	font-weight: normal
	font-style: normal

	&:before
		content: '\f101'

.video-js
	.vjs-big-play-button:before, .vjs-play-control:before
		content: '\f101'

.vjs-icon-play-circle
	font-family: VideoJS
	font-weight: normal
	font-style: normal
	&:before
		content: '\f102'

.vjs-icon-pause, .video-js .vjs-play-control.vjs-playing
	font-family: VideoJS
	font-weight: normal
	font-style: normal

.vjs-icon-pause:before, .video-js .vjs-play-control.vjs-playing:before
	content: '\f103'

.vjs-icon-volume-mute
	font-family: VideoJS
	font-weight: normal
	font-style: normal

.video-js
	.vjs-mute-control.vjs-vol-0, .vjs-volume-menu-button.vjs-vol-0
		font-family: VideoJS
		font-weight: normal
		font-style: normal

.vjs-icon-volume-mute:before
	content: '\f104'

.video-js
	.vjs-mute-control.vjs-vol-0:before, .vjs-volume-menu-button.vjs-vol-0:before
		content: '\f104'

.vjs-icon-volume-low
	font-family: VideoJS
	font-weight: normal
	font-style: normal

.video-js
	.vjs-mute-control.vjs-vol-1, .vjs-volume-menu-button.vjs-vol-1
		font-family: VideoJS
		font-weight: normal
		font-style: normal

.vjs-icon-volume-low:before
	content: '\f105'

.video-js
	.vjs-mute-control.vjs-vol-1:before, .vjs-volume-menu-button.vjs-vol-1:before
		content: '\f105'

.vjs-icon-volume-mid
	font-family: VideoJS
	font-weight: normal
	font-style: normal

.video-js
	.vjs-mute-control.vjs-vol-2, .vjs-volume-menu-button.vjs-vol-2
		font-family: VideoJS
		font-weight: normal
		font-style: normal

.vjs-icon-volume-mid:before
	content: '\f106'

.video-js
	.vjs-mute-control.vjs-vol-2:before, .vjs-volume-menu-button.vjs-vol-2:before
		content: '\f106'

.vjs-icon-volume-high
	font-family: VideoJS
	font-weight: normal
	font-style: normal

.video-js
	.vjs-mute-control, .vjs-volume-menu-button
		font-family: VideoJS
		font-weight: normal
		font-style: normal

.vjs-icon-volume-high:before
	content: '\f107'

.video-js
	.vjs-mute-control:before, .vjs-volume-menu-button:before
		content: '\f107'

.vjs-icon-fullscreen-enter, .video-js .vjs-fullscreen-control
	font-family: VideoJS
	font-weight: normal
	font-style: normal

.vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control:before
	content: '\f108'

.vjs-icon-fullscreen-exit, .video-js.vjs-fullscreen .vjs-fullscreen-control
	font-family: VideoJS
	font-weight: normal
	font-style: normal

.vjs-icon-fullscreen-exit:before, .video-js.vjs-fullscreen .vjs-fullscreen-control:before
	content: '\f109'

.vjs-icon-square
	font-family: VideoJS
	font-weight: normal
	font-style: normal
	&:before
		content: '\f10a'

.vjs-icon-spinner
	font-family: VideoJS
	font-weight: normal
	font-style: normal
	&:before
		content: '\f10b'

.vjs-icon-subtitles, .video-js .vjs-subtitles-button
	font-family: VideoJS
	font-weight: normal
	font-style: normal

.vjs-icon-subtitles:before, .video-js .vjs-subtitles-button:before
	content: '\f10c'

.vjs-icon-captions, .video-js .vjs-captions-button
	font-family: VideoJS
	font-weight: normal
	font-style: normal

.vjs-icon-captions:before, .video-js .vjs-captions-button:before
	content: '\f10d'

.vjs-icon-chapters, .video-js .vjs-chapters-button
	font-family: VideoJS
	font-weight: normal
	font-style: normal

.vjs-icon-chapters:before, .video-js .vjs-chapters-button:before
	content: '\f10e'

.vjs-icon-share
	font-family: VideoJS
	font-weight: normal
	font-style: normal
	&:before
		content: '\f10f'

.vjs-icon-cog
	font-family: VideoJS
	font-weight: normal
	font-style: normal
	&:before
		content: '\f110'

.vjs-icon-circle
	font-family: VideoJS
	font-weight: normal
	font-style: normal


.vjs-loop-button
	&:hover
		&:before
			opacity: 1

	&:before
		font-family: 'pillar-font'
		content: '\e864'
		opacity: .4
		font-weight: normal

.vjs-control-active
	box-shadow: inset 0 -3px $videoplayer-controls-color

	&:before
		opacity: 1

.video-js
	.vjs-mouse-display, .vjs-volume-level
		font-family: VideoJS
		font-weight: normal
		font-style: normal

.video-js
	.vjs-mouse-display:before, .vjs-play-progress:before, .vjs-volume-level:before
		background-color: $videoplayer-controls-color
		border-radius: 50%
		content: ''
		height: 10px
		width: 10px

.vjs-icon-circle-outline
	font-family: VideoJS
	font-weight: normal
	font-style: normal
	&:before
		content: '\f112'

.vjs-icon-circle-inner-circle
	font-family: VideoJS
	font-weight: normal
	font-style: normal
	&:before
		content: '\f113'


.vjs-icon-cancel, .video-js .vjs-control.vjs-close-button
	font-family: VideoJS
	font-weight: normal
	font-style: normal

.vjs-icon-cancel:before, .video-js .vjs-control.vjs-close-button:before
	content: '\f115'

.vjs-icon-replay
	font-family: VideoJS
	font-weight: normal
	font-style: normal
	&:before
		content: '\f116'


.vjs-icon-audio-description
	font-family: VideoJS
	font-weight: normal
	font-style: normal
	&:before
		content: '\f11d'

.video-js
	display: block
	vertical-align: top
	box-sizing: border-box
	color: $videoplayer-controls-color
	background-color: black
	position: relative
	padding: 0
	font-size: 10px
	line-height: 1
	font-weight: normal
	font-style: normal
	-webkit-user-select: none
	-moz-user-select: none
	-ms-user-select: none
	user-select: none
	&:-moz-full-screen
		position: absolute
	&:-webkit-full-screen
		width: 100% !important
		height: 100% !important
	*
		box-sizing: inherit
		&:before, &:after
			box-sizing: inherit
	ul
		font-family: inherit
		font-size: inherit
		line-height: inherit
		list-style-position: outside
		margin: 0

	&.vjs-fluid, &.vjs-16-9, &.vjs-4-3
		width: 100%
		max-width: 100%
		height: 0
	&.vjs-16-9
		padding-top: 56.25%
	&.vjs-4-3
		padding-top: 75%
	&.vjs-fill
		width: 100%
		height: 100%
	.vjs-tech
		position: absolute
		top: 0
		left: 0
		width: 100%
		height: 100%

body.vjs-full-window
	padding: 0
	margin: 0
	height: 100%
	overflow-y: auto

.vjs-full-window .video-js.vjs-fullscreen
	position: fixed
	overflow: hidden
	z-index: 1000
	left: 0
	top: 0
	bottom: 0
	right: 0

.video-js.vjs-fullscreen
	width: 100% !important
	height: 100% !important
	padding-top: 0 !important
	&.vjs-user-inactive
		cursor: none

.vjs-hidden
	display: none !important

.video-js .vjs-offscreen
	height: 1px
	left: -9999px
	position: absolute
	top: 0
	width: 1px

.vjs-lock-showing
	display: block !important
	opacity: 1
	visibility: visible

.vjs-no-js
	padding: 20px
	color: $videoplayer-controls-color
	background-color: black
	font-size: 18px
	font-family: Arial, Helvetica, sans-serif
	text-align: center
	width: 300px
	height: 150px
	margin: 0px auto
	a
		color: #66A8CC
		&:visited
			color: #66A8CC

.video-js .vjs-big-play-button
	font-size: 3em
	line-height: 1.5em
	height: 1.5em
	width: 3em
	display: block
	position: absolute
	padding: 0
	cursor: pointer
	opacity: 1
	background-color: $videoplayer-background-color
	-webkit-border-radius: 0.3em
	-moz-border-radius: 0.3em
	border-radius: 0.3em
	-webkit-transition: all 0.4s
	-moz-transition: all 0.4s
	-o-transition: all 0.4s
	transition: all 0.4s

	top: 50%
	left: 50%
	margin-top: -0.75em
	margin-left: -1.5em

.video-js
	&:hover .vjs-big-play-button, .vjs-big-play-button:focus
		outline: 0
		border-color: $videoplayer-controls-color
		background-color: #73859f
		background-color: rgba(115, 133, 159, 0.5)
		-webkit-transition: all 0s
		-moz-transition: all 0s
		-o-transition: all 0s
		transition: all 0s

.vjs-controls-disabled .vjs-big-play-button, .vjs-has-started .vjs-big-play-button, .vjs-using-native-controls .vjs-big-play-button, .vjs-error .vjs-big-play-button
	display: none

.video-js
	button
		background: none
		border: none
		color: inherit
		display: inline-block
		overflow: visible
		font-size: inherit
		line-height: inherit
		text-transform: none
		text-decoration: none
		transition: none
		-webkit-appearance: none
		-moz-appearance: none
		appearance: none
	.vjs-control.vjs-close-button
		cursor: pointer
		height: 3em
		position: absolute
		right: 0
		top: 0.5em
		z-index: 2

.vjs-menu-button
	cursor: pointer

.vjs-menu .vjs-menu-content
	display: block
	padding: 0
	margin: 0
	overflow: auto

.vjs-scrubbing .vjs-menu-button:hover .vjs-menu
	display: none

.vjs-menu li
	list-style: none
	margin: 0
	padding: 0.2em 0
	line-height: 1.4em
	font-size: 1.2em
	text-align: center
	text-transform: lowercase
	&:focus, &:hover
		outline: 0
		background-color: #73859f
		background-color: rgba(115, 133, 159, 0.5)
	&.vjs-selected
		background-color: $videoplayer-controls-color
		color: $videoplayer-background-color
		&:focus, &:hover
			background-color: $videoplayer-controls-color
			color: $videoplayer-background-color
	&.vjs-menu-title
		text-align: center
		text-transform: uppercase
		font-size: 1em
		line-height: 2em
		padding: 0
		margin: 0 0 0.3em 0
		font-weight: bold
		cursor: default

.vjs-menu-button-popup .vjs-menu
	display: none
	position: absolute
	bottom: 0
	width: 10em
	left: -3em
	height: 0em
	margin-bottom: 1.5em
	border-top-color: $videoplayer-background-color
	.vjs-menu-content
		background-color: $videoplayer-background-color
		position: absolute
		width: 100%
		bottom: 1.5em
		max-height: 15em

.vjs-workinghover .vjs-menu-button-popup:hover .vjs-menu, .vjs-menu-button-popup .vjs-menu.vjs-lock-showing
	display: block

.video-js
	.vjs-menu-button-inline
		-webkit-transition: all 0.4s
		-moz-transition: all 0.4s
		-o-transition: all 0.4s
		transition: all 0.4s
		overflow: hidden
		&:before
			width: 2.222222222em
		&:hover, &:focus, &.vjs-slider-active
			width: 12em
	&.vjs-no-flex .vjs-menu-button-inline
		width: 12em
	.vjs-menu-button-inline.vjs-slider-active
		-webkit-transition: none
		-moz-transition: none
		-o-transition: none
		transition: none

.vjs-menu-button-inline
	.vjs-menu
		opacity: 0
		height: 100%
		width: auto
		position: absolute
		left: 4em
		top: 0
		padding: 0
		margin: 0
		-webkit-transition: all 0.4s
		-moz-transition: all 0.4s
		-o-transition: all 0.4s
		transition: all 0.4s
	&:hover .vjs-menu, &:focus .vjs-menu, &.vjs-slider-active .vjs-menu
		display: block
		opacity: 1

.vjs-no-flex .vjs-menu-button-inline
	.vjs-menu
		display: block
		opacity: 1
		position: relative
		width: auto
	&:hover .vjs-menu, &:focus .vjs-menu, &.vjs-slider-active .vjs-menu
		width: auto

.vjs-menu-button-inline .vjs-menu-content
	width: auto
	height: 100%
	margin: 0
	overflow: hidden

.video-js
	.vjs-control-bar
		display: none
		width: 100%
		position: absolute
		bottom: 0
		left: 0
		right: 0
		height: 3.0em
		background-color: rgba($videoplayer-background-color, .6)
		transition: background-color 150ms ease-in-out

		&:hover
			background-color: $videoplayer-background-color

.vjs-has-started
	.vjs-control-bar
		display: -webkit-box
		display: -webkit-flex
		display: -ms-flexbox
		display: flex
		visibility: visible
		opacity: 1
		-webkit-transition: visibility 0.1s, opacity 0.1s
		-moz-transition: visibility 0.1s, opacity 0.1s
		-o-transition: visibility 0.1s, opacity 0.1s
		transition: visibility 0.1s, opacity 0.1s
	&.vjs-user-inactive.vjs-playing .vjs-control-bar
		visibility: hidden
		opacity: 0
		-webkit-transition: visibility 1s, opacity .5s
		-moz-transition: visibility 1s, opacity .5s
		-o-transition: visibility 1s, opacity .5s
		transition: visibility 1s, opacity .5s

.vjs-controls-disabled .vjs-control-bar, .vjs-using-native-controls .vjs-control-bar, .vjs-error .vjs-control-bar
	display: none !important

.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar
	opacity: 1
	visibility: visible

@media \0screen
	.vjs-user-inactive.vjs-playing .vjs-control-bar :before
		content: ""

.vjs-has-started.vjs-no-flex .vjs-control-bar
	display: table

.video-js
	.vjs-control
		font-weight: bold
		flex: none
		height: 100%
		margin: 0
		outline: none
		padding: 0
		position: relative
		text-align: center
		width: 4em

		&:before
			font-size: 1.8em
			line-height: 1.67

		&:focus:before, &:hover:before, &:focus
			box-shadow: inset 0 -3px $videoplayer-controls-color

	.vjs-control-text
		border: 0
		clip: rect(0 0 0 0)
		height: 1px
		margin: -1px
		overflow: hidden
		padding: 0
		position: absolute
		width: 1px

	.vjs-custom-control-spacer
		display: none

	.vjs-progress-control
		-webkit-box-flex: auto
		-moz-box-flex: auto
		-webkit-flex: auto
		-ms-flex: auto
		flex: auto
		display: -webkit-box
		display: -webkit-flex
		display: -ms-flexbox
		display: flex
		-webkit-box-align: center
		-webkit-align-items: center
		-ms-flex-align: center
		align-items: center
		min-width: 4em

	.vjs-progress-holder
		-webkit-box-flex: auto
		-moz-box-flex: auto
		-webkit-flex: auto
		-ms-flex: auto
		flex: auto
		-webkit-transition: all 0.2s
		-moz-transition: all 0.2s
		-o-transition: all 0.2s
		transition: all 0.2s
		height: $videoplayer-progress-bar-height

		.vjs-play-progress
			position: absolute
			display: block
			height: $videoplayer-progress-bar-height
			margin: 0
			padding: 0
			width: 0
			left: 0
			top: 0

		.vjs-load-progress
			position: absolute
			display: block
			height: $videoplayer-progress-bar-height
			margin: 0
			padding: 0
			width: 0
			left: 0
			top: 0

			div
				position: absolute
				display: block
				height: $videoplayer-progress-bar-height
				margin: 0
				padding: 0
				width: 0
				left: 0
				top: 0

	.vjs-mouse-display:before
		display: none

	.vjs-play-progress
		background-color: $videoplayer-controls-color
		border-radius: 999em

		&:before
			position: absolute
			top: -($videoplayer-progress-bar-height / 2) // halfway the height of the progress bar
			right: -0.5em

		&:after
			display: none
			position: absolute
			top: -3.4em
			right: -1.5em
			color: black
			content: attr(data-current-time)
			padding: 6px 8px 8px 8px
			background-color: $videoplayer-controls-color

		&:before, &:after
			z-index: 1

		.vjs-time-tooltip
			color: $videoplayer-controls-color
			background-color: $videoplayer-background-color
			z-index: 1

			&:after
				border-top-color: $videoplayer-background-color !important

	.vjs-load-progress
		background-color: darken($videoplayer-background-color, 10%)

		div
			background: rgba($videoplayer-controls-color, .33)

	&.vjs-no-flex .vjs-progress-control
		width: auto

	// Little marker when you mouse over
	.vjs-progress-control .vjs-mouse-display
		display: none
		position: absolute

.vjs-time-tooltip
	background-color: $videoplayer-controls-color
	border-radius: $border-radius
	color: $videoplayer-background-color
	font-family: $font-family-base
	font-size: 1.2em
	font-weight: bold
	padding: 5px 8px
	position: absolute
	top: -40px
	z-index: 2

	&:after
		border: thick solid transparent
		border-top-color: $videoplayer-controls-color
		bottom: -10px
		content: ' '
		height: 10px
		left: 50%
		position: absolute
		transform: translateX(-50%)
		width: 2px

.vjs-live .vjs-progress-control
	display: none

.vjs-no-flex .vjs-control
	display: table-cell
	vertical-align: middle

/* If we let the font size grow as much as everything else, the current time tooltip ends up
 *ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled
 *to avoid a weird hitch when you roll off the hover. */

.vjs-no-flex .vjs-progress-control .vjs-mouse-display
	z-index: 0

.video-js
	.vjs-progress-control:hover .vjs-mouse-display
		display: block
	&.vjs-user-inactive
		.vjs-progress-control .vjs-mouse-display
			visibility: hidden
			opacity: 0
			-webkit-transition: visibility 1s, opacity .5s
			-moz-transition: visibility 1s, opacity .5s
			-o-transition: visibility 1s, opacity .5s
			transition: visibility 1s, opacity .5s
			&:after
				visibility: hidden
				opacity: 0
				-webkit-transition: visibility 1s, opacity .5s
				-moz-transition: visibility 1s, opacity .5s
				-o-transition: visibility 1s, opacity .5s
				transition: visibility 1s, opacity .5s
		&.vjs-no-flex .vjs-progress-control .vjs-mouse-display
			display: none
			&:after
				display: none
	.vjs-progress-control .vjs-mouse-display:after
		color: $videoplayer-controls-color
		background-color: black
		background-color: rgba(0, 0, 0, 0.8)
	.vjs-slider
		outline: 0
		position: relative
		cursor: pointer
		padding: 0
		margin: 0 0.45em 0 0.45em
		background-color: rgba(darken($videoplayer-background-color, 10%), .5)

	.vjs-mute-control, .vjs-volume-menu-button
		cursor: pointer
		-webkit-box-flex: none
		-moz-box-flex: none
		-webkit-flex: none
		-ms-flex: none
		flex: none
	.vjs-volume-control
		width: 5em
		display: -webkit-box
		display: -webkit-flex
		display: -ms-flexbox
		display: flex
		-webkit-box-align: center
		-webkit-align-items: center
		-ms-flex-align: center
		align-items: center



	.vjs-volume-bar
		margin: 1.35em 0.45em

.vjs-volume-bar
	&.vjs-slider-vertical
		width: 0.3em
		height: 5em
		margin: 1.35em auto

		.vjs-volume-level
			height: 100%
			width: 0.3em

			&:before
				top: -0.5em
				left: -0.3em

.video-js .vjs-volume-level
	position: absolute
	bottom: 0
	left: 0
	background-color: $videoplayer-controls-color
	&:before
		position: absolute
		font-size: 0.9em

.vjs-slider-horizontal .vjs-volume-level
	height: $videoplayer-progress-bar-height
	&:before
		top: -$videoplayer-progress-bar-height
		right: -0.5em

.vjs-menu-button-popup
	&.vjs-volume-menu-button .vjs-menu
		display: block
		width: 0
		height: 0
		border-top-color: transparent
	&.vjs-volume-menu-button-vertical .vjs-menu
		left: 0.5em
		height: 8em
	&.vjs-volume-menu-button-horizontal .vjs-menu
		left: -2em
	&.vjs-volume-menu-button .vjs-menu-content
		height: 0
		width: 0
		overflow-x: hidden
		overflow-y: hidden

.vjs-volume-menu-button-vertical
	&:hover .vjs-menu-content, &:focus .vjs-menu-content, &.vjs-slider-active .vjs-menu-content, .vjs-lock-showing .vjs-menu-content
		height: 8em
		width: 2.9em

.vjs-volume-menu-button-horizontal
	&:hover .vjs-menu-content, &:focus .vjs-menu-content, .vjs-slider-active .vjs-menu-content, .vjs-lock-showing .vjs-menu-content
		height: 2.9em
		width: 8em

.vjs-volume-menu-button.vjs-menu-button-inline .vjs-menu-content
	background-color: transparent !important

.vjs-poster
	display: inline-block
	vertical-align: middle
	background-repeat: no-repeat
	background-position: 50% 50%
	background-size: contain
	cursor: pointer
	margin: 0
	padding: 0
	position: absolute
	top: 0
	right: 0
	bottom: 0
	left: 0
	height: 100%
	img
		display: block
		vertical-align: middle
		margin: 0 auto
		max-height: 100%
		padding: 0
		width: 100%

.vjs-has-started .vjs-poster
	display: none

.vjs-audio.vjs-has-started .vjs-poster
	display: block

.vjs-controls-disabled .vjs-poster, .vjs-using-native-controls .vjs-poster
	display: none

.video-js .vjs-live-control
	display: -webkit-box
	display: -webkit-flex
	display: -ms-flexbox
	display: flex
	-webkit-box-align: flex-start
	-webkit-align-items: flex-start
	-ms-flex-align: flex-start
	align-items: flex-start
	-webkit-box-flex: auto
	-moz-box-flex: auto
	-webkit-flex: auto
	-ms-flex: auto
	flex: auto
	font-size: 1em
	line-height: 3em

.vjs-no-flex .vjs-live-control
	display: table-cell
	width: auto
	text-align: left

.video-js .vjs-time-control
	-webkit-box-flex: none
	-moz-box-flex: none
	-webkit-flex: none
	-ms-flex: none
	flex: none
	font-size: 1em
	line-height: 3em
	min-width: 2em
	width: auto
	padding-left: 1em
	padding-right: 1em

.vjs-live .vjs-time-control, .video-js .vjs-current-time, .vjs-no-flex .vjs-current-time, .video-js .vjs-duration, .vjs-no-flex .vjs-duration
	display: none

.vjs-time-divider
	display: none
	line-height: 3em

.vjs-live .vjs-time-divider
	display: none

.video-js .vjs-play-control
	cursor: pointer
	-webkit-box-flex: none
	-moz-box-flex: none
	-webkit-flex: none
	-ms-flex: none
	flex: none

.vjs-text-track-display
	position: absolute
	bottom: 3em
	left: 0
	right: 0
	top: 0
	pointer-events: none

.video-js
	&.vjs-user-inactive.vjs-playing .vjs-text-track-display
		bottom: 1em
	.vjs-text-track
		font-size: 1.4em
		text-align: center
		margin-bottom: 0.1em
		background-color: black
		background-color: rgba(0, 0, 0, 0.5)

.vjs-subtitles
	color: $videoplayer-controls-color

.vjs-captions
	color: #fc6

.vjs-tt-cue
	display: block

video::-webkit-media-text-track-display
	-moz-transform: translateY(-3em)
	-ms-transform: translateY(-3em)
	-o-transform: translateY(-3em)
	-webkit-transform: translateY(-3em)
	transform: translateY(-3em)

.video-js
	&.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display
		-moz-transform: translateY(-1.5em)
		-ms-transform: translateY(-1.5em)
		-o-transform: translateY(-1.5em)
		-webkit-transform: translateY(-1.5em)
		transform: translateY(-1.5em)
	.vjs-fullscreen-control
		cursor: pointer
		-webkit-box-flex: none
		-moz-box-flex: none
		-webkit-flex: none
		-ms-flex: none
		flex: none

.vjs-playback-rate
	.vjs-playback-rate-value
		font-size: 1.5em
		line-height: 2
		position: absolute
		top: 0
		left: 0
		width: 100%
		height: 100%
		text-align: center
	.vjs-menu
		width: 4em
		left: 0em

.vjs-error .vjs-error-display
	.vjs-modal-dialog-content
		font-size: 1.4em
		text-align: center
	&:before
		color: $videoplayer-controls-color
		content: 'X'
		font-size: 4em
		left: 0
		line-height: 1
		margin-top: -0.5em
		position: absolute
		text-shadow: 0.05em 0.05em 0.1em black
		text-align: center
		top: 50%
		vertical-align: middle
		width: 100%

.vjs-loading-spinner
	display: none
	position: absolute
	top: 50%
	left: 50%
	margin: -25px 0 0 -25px
	opacity: 0.85
	text-align: left
	border: 6px solid rgba($videoplayer-background-color, .7)
	box-sizing: border-box
	background-clip: padding-box
	width: 50px
	height: 50px
	border-radius: 25px

.vjs-seeking .vjs-loading-spinner, .vjs-waiting .vjs-loading-spinner
	display: block

.vjs-loading-spinner
	&:before, &:after
		content: ""
		position: absolute
		margin: -6px
		box-sizing: inherit
		width: inherit
		height: inherit
		border-radius: inherit
		opacity: 1
		border: inherit
		border-color: transparent
		border-top-color: $videoplayer-controls-color

.vjs-seeking .vjs-loading-spinner
	&:before, &:after
		-webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite
		animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite

.vjs-waiting .vjs-loading-spinner
	&:before, &:after
		-webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite
		animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite

.vjs-seeking .vjs-loading-spinner:before, .vjs-waiting .vjs-loading-spinner:before
	border-top-color: $videoplayer-controls-color

.vjs-seeking .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:after
	border-top-color: $videoplayer-controls-color
	-webkit-animation-delay: 0.44s
	animation-delay: 0.44s

@keyframes vjs-spinner-spin
	100%
		transform: rotate(360deg)


@-webkit-keyframes vjs-spinner-spin
	100%
		-webkit-transform: rotate(360deg)


@keyframes vjs-spinner-fade
	0%
		border-top-color: #73859f

	20%
		border-top-color: #73859f

	35%
		border-top-color: $videoplayer-controls-color

	60%
		border-top-color: #73859f

	100%
		border-top-color: #73859f


@-webkit-keyframes vjs-spinner-fade
	0%
		border-top-color: #73859f

	20%
		border-top-color: #73859f

	35%
		border-top-color: $videoplayer-controls-color

	60%
		border-top-color: #73859f

	100%
		border-top-color: #73859f


.vjs-chapters-button .vjs-menu ul
	width: 24em

.video-js
	&.vjs-layout-tiny:not(.vjs-fullscreen)
		.vjs-custom-control-spacer
			-webkit-box-flex: auto
			-moz-box-flex: auto
			-webkit-flex: auto
			-ms-flex: auto
			flex: auto
		&.vjs-no-flex .vjs-custom-control-spacer
			width: auto
		.vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time, .vjs-playback-rate, .vjs-progress-control, .vjs-mute-control, .vjs-volume-control, .vjs-volume-menu-button, .vjs-chapters-button, .vjs-captions-button, .vjs-subtitles-button
			display: none
	&.vjs-layout-x-small:not(.vjs-fullscreen)
		.vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time, .vjs-playback-rate, .vjs-mute-control, .vjs-volume-control, .vjs-volume-menu-button, .vjs-chapters-button, .vjs-captions-button, .vjs-subtitles-button
			display: none
	&.vjs-layout-small:not(.vjs-fullscreen)
		.vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time, .vjs-playback-rate, .vjs-mute-control, .vjs-volume-control, .vjs-chapters-button, .vjs-captions-button, .vjs-subtitles-button
			display: none

.vjs-caption-settings
	position: relative
	top: 1em
	background-color: $videoplayer-background-color
	background-color: rgba(43, 51, 63, 0.75)
	color: $videoplayer-controls-color
	margin: 0 auto
	padding: 0.5em
	height: 15em
	font-size: 12px
	width: 40em
	.vjs-tracksettings
		top: 0
		bottom: 2em
		left: 0
		right: 0
		position: absolute
		overflow: auto
	.vjs-tracksettings-colors, .vjs-tracksettings-font
		float: left
	.vjs-tracksettings-colors:after, .vjs-tracksettings-font:after
		clear: both
	.vjs-tracksettings-controls
		&:after
			clear: both
		position: absolute
		bottom: 1em
		right: 1em
	.vjs-tracksetting
		margin: 5px
		padding: 3px
		min-height: 40px
		label
			display: block
			width: 100px
			margin-bottom: 5px
		span
			display: inline
			margin-left: 5px
		> div
			margin-bottom: 5px
			min-height: 20px
			&:last-child
				margin-bottom: 0
				padding-bottom: 0
				min-height: 0
	label > input
		margin-right: 10px
	input[type="button"]
		width: 40px
		height: 40px

.video-js .vjs-modal-dialog
	background: rgba(0, 0, 0, 0.8)
	background: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0))
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0))

.vjs-modal-dialog .vjs-modal-dialog-content
	font-size: 1.2em
	line-height: 1.5
	padding: 20px 24px
	z-index: 1



.video-js
	.vjs-volume-vertical
		width: 3em
		height: 8em
		bottom: 8em
		background-color: #2B333F
		background-color: $videoplayer-background-color

	.vjs-volume-panel
		display: -webkit-box
		display: -webkit-flex
		display: -ms-flexbox
		display: flex
		-webkit-transition: width .5s
		-moz-transition: width .5s
		-ms-transition: width .5s
		-o-transition: width .5s
		transition: width .5s

		&:hover .vjs-volume-control, &:active .vjs-volume-control, &:focus .vjs-volume-control
			visibility: visible
			opacity: 1
			position: relative
			-webkit-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
			-moz-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
			-ms-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
			-o-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
			transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s

		.vjs-volume-control
			visibility: visible
			opacity: 0
			width: 1px
			height: 1px
			margin-left: -1px

			&:hover, &:active, &:focus
				visibility: visible
				opacity: 1
				position: relative
				-webkit-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
				-moz-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
				-ms-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
				-o-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
				transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s

		.vjs-mute-control
			&:hover ~ .vjs-volume-control, &:active ~ .vjs-volume-control, &:focus ~ .vjs-volume-control
				visibility: visible
				opacity: 1
				position: relative
				-webkit-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
				-moz-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
				-ms-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
				-o-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
				transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s

		.vjs-volume-control.vjs-slider-active
			visibility: visible
			opacity: 1
			position: relative
			-webkit-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
			-moz-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
			-ms-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
			-o-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s
			transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s

		&:hover .vjs-volume-control.vjs-volume-horizontal, &:active .vjs-volume-control.vjs-volume-horizontal, &:focus .vjs-volume-control.vjs-volume-horizontal
			width: 5em
			height: 3em

		.vjs-volume-control
			&:hover.vjs-volume-horizontal, &:active.vjs-volume-horizontal, &:focus.vjs-volume-horizontal
				width: 5em
				height: 3em

		.vjs-mute-control
			&:hover ~ .vjs-volume-control.vjs-volume-horizontal, &:active ~ .vjs-volume-control.vjs-volume-horizontal, &:focus ~ .vjs-volume-control.vjs-volume-horizontal
				width: 5em
				height: 3em

		.vjs-volume-control.vjs-slider-active.vjs-volume-horizontal
			width: 5em
			height: 3em

		&.vjs-volume-panel-horizontal
			&:hover, &:focus, &:active, &.vjs-slider-active
				width: 9em
				-webkit-transition: width 0.1s
				-moz-transition: width 0.1s
				-ms-transition: width 0.1s
				-o-transition: width 0.1s
				transition: width 0.1s
		.vjs-volume-control
			&.vjs-volume-vertical
				height: 8em
				width: 3em
				left: -3.5em
				-webkit-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s
				-moz-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s
				-ms-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s
				-o-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s
				transition: visibility 1s, opacity .5s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s
			&.vjs-volume-horizontal
				-webkit-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s
				-moz-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s
				-ms-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s
				-o-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s
				transition: visibility 1s, opacity .5s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s

	&.vjs-no-flex
		.vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal
			width: 5em
			height: 3em
			visibility: visible
			opacity: 1
			position: relative
			-webkit-transition: none
			-moz-transition: none
			-ms-transition: none
			-o-transition: none
			transition: none

		.vjs-volume-control.vjs-volume-vertical, .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical
			position: absolute
			bottom: 3em
			left: 0.5em