// Styling JS Video plugin
$controls-color: scale-color($base, $lightness: -15%)

.video-js
  background-color: $base
  border-radius: 6px 6px 0 0
  // Otherwise you won't see controls in Fullscreen mode
  margin-top: -95px
  position: relative
  padding: 0
  font-size: 10px
  vertical-align: middle
  .vjs-tech
    border-radius: 6px 6px 0 0
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
  &:-moz-full-screen
    position: absolute

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

.video-js
  &.vjs-fullscreen
    position: fixed
    overflow: hidden
    z-index: 1000
    left: 0
    top: 0
    bottom: 0
    right: 0
    width: 100%!important
    height: 100%!important
    _position: absolute
  &:-webkit-full-screen
    width: 100%!important
    height: 100%!important

.vjs-poster
  margin: 0 auto
  padding: 0
  cursor: pointer
  position: relative
  width: 100%
  max-height: 100%

.video-js
  .vjs-text-track-display
    text-align: center
    position: absolute
    bottom: 4em
    left: 1em
    right: 1em
    font-family: $base-font-family
  .vjs-text-track
    display: none
    color: #fff
    font-size: 1.4em
    text-align: center
    margin-bottom: .1em
    background: #000
    background: rgba(0, 0, 0, 0.5)
  .vjs-subtitles
    color: #fff
  .vjs-captions
    color: #fc6

.vjs-tt-cue
  display: block

.vjs-fade-in
  visibility: visible!important
  opacity: 1!important
  +transition((visibility 0s linear 0s, opacity .3s linear))

.vjs-fade-out
  visibility: hidden!important
  opacity: 0!important
  +transition((visibility 0s linear 1.5s, opacity 1.5s linear))

.vjs-controls
  border-radius: 0 0 6px 6px
  position: absolute
  bottom: -47px
  left: 0
  right: 0
  margin: 0
  padding: 0
  height: 47px
  color: $inverse
  background: $controls-color
  &.vjs-fade-out
    visibility: visible!important
    opacity: 1!important

// Video player control general style
.vjs-control
  background-position: center center
  background-repeat: no-repeat
  position: relative
  float: left
  text-align: center
  margin: 0
  padding: 0
  height: 18px
  width: 18px
  &:focus
    outline: 0
  div
    background-position: center center
    background-repeat: no-repeat

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

.vjs-play-control
  cursor: pointer!important
  height: 47px
  left: 0
  position: absolute
  top: 0
  width: 58px

.vjs-paused .vjs-play-control
  background: url('../images/video/play.png') center -31px no-repeat
  background-size: 16px 64px
  &:hover
    div
      opacity: 0
  div
    background: url('../images/video/play.png') center 15px no-repeat
    background-size: 16px 64px
    height: 47px
    +transition(opacity .25s)

.vjs-playing .vjs-play-control
  background: url('../images/video/pause.png') center -31px no-repeat
  background-size: 15px 64px
  &:hover
    div
      opacity: 0

  div
    background: url('../images/video/pause.png') center 15px no-repeat
    background-size: 15px 64px
    height: 47px
    +transition(opacity .25s)

.vjs-rewind-control
  width: 5em
  cursor: pointer!important
  div
    width: 19px
    height: 16px
    background: url('video-js.png')
    margin: .5em auto 0

.vjs-mute-control
  background: url('../images/video/volume-full.png') center -48px no-repeat
  background-size: 16px 64px
  cursor: pointer!important
  position: absolute
  right: 51px
  top: 14px

  &:hover,
  &:focus
    div
      opacity: 0

  // Muted state
  &.vjs-vol-0
    &,
    div
      background-image: url('../images/video/volume-off.png')

  div
    background: $controls-color url('../images/video/volume-full.png') no-repeat center 2px
    background-size: 16px 64px
    height: 18px
    +transition(opacity .25s)

.vjs-volume-control,
.vjs-volume-level,
.vjs-volume-handle,
.vjs-volume-bar
  display: none

.vjs-progress-control
  border-radius: 32px
  position: absolute
  left: 60px
  right: 180px
  height: 12px
  width: auto
  top: 18px
  background: scale-color($base, $lightness: 93%)

.vjs-progress-holder
  position: relative
  cursor: pointer!important
  padding: 0
  margin: 0
  height: 12px

.vjs-play-progress, .vjs-load-progress
  border-radius: 32px
  position: absolute
  display: block
  height: 12px
  margin: 0
  padding: 0
  left: 0
  top: 0

.vjs-play-progress
  background: $firm
  left: -1px

.vjs-load-progress
  background: scale-color(desaturate($base, 15%), $lightness: 80%)
  border-radius: 32px 0 0 32px
  &[style*='100%'],
  &[style*='99%']
    border-radius: 32px

.vjs-seek-handle
  background-color: scale-color($firm, $lightness: -15%)
  border-radius: 50%
  position: absolute
  width: 18px
  height: 18px
  margin: -3px 0 0 1px
  left: 0
  top: 0
  +transition(background-color .25s)

  &[style*='95.']
    margin-left: 3px

  &[style='left: 0%;']
    margin-left: -2px

  &:hover,
  &:focus
    background-color: scale-color($firm, $lightness: -25%)
  &:active
    background-color: scale-color($firm, $lightness: -33%)

// Player time controls
.vjs-time-controls
  position: absolute
  height: 20px
  width: 50px
  top: 16px
  font: 300 13px $base-font-family

.vjs-current-time
  right: 128px
  text-align: right

.vjs-duration
  color: scale-color(desaturate($base, 15%), $lightness: 25%)
  right: 69px
  text-align: left

.vjs-remaining-time
  display: none

.vjs-time-divider
  color: scale-color(desaturate($base, 15%), $lightness: 25%)
  font-size: 14px
  position: absolute
  right: 121px
  top: 15px

.vjs-secondary-controls
  float: right

.vjs-fullscreen-control
  background-image: url('../images/video/fullscreen.png')
  background-position: center -47px
  background-size: 15px 64px
  cursor: pointer!important
  position: absolute
  right: 17px
  top: 13px

  &:hover,
  &:focus
    div
      opacity: 0

  div
    height: 18px
    background: url('../images/video/fullscreen.png') no-repeat center 2px
    background-size: 15px 64px
    +transition(opacity .25s)

// Subtitles menu. Hide for no need by design.
.vjs-menu-button
  display: none !important

// Video preloader
=sharp-keyframes
  0%
    background: #e74c3c
    border-radius: 10px
    +transform(rotate(0deg))

  50%
    background: #ebedee
    border-radius: 0
    +transform(rotate(180deg))

  100%
    background: #e74c3c
    border-radius: 10px
    +transform(rotate(360deg))

@-webkit-keyframes sharp
  +sharp-keyframes

@-moz-keyframes sharp
  +sharp-keyframes

@-o-keyframes sharp
  +sharp-keyframes

@keyframes sharp
  +sharp-keyframes

.vjs-loading-spinner
  background: #ebedee
  border-radius: 10px
  display: none
  height: 16px
  left: 50%
  margin: -8px 0 0 -8px
  position: absolute
  top: 50%
  width: 16px
  +animation(sharp 2s ease infinite)