//# general variables
$main-color: #f00
$background-color-dark: #212121
$control-background-light: #eee
$control-border: #212121
$shadow-color: #000
$text-color-dark: #212121
$text-color-white: #fff
//# slider variables
$slider-track-color: #808080
$slider-progress-color: $main-color
$slider-thumb-color: $main-color
$slider-thumb-height: calc(100% + 8px)
$slider-thumb-width: 15px
$slider-thumb-border-radius: 15px

//# styles
.mup-video
  vertical-align: top
  width: 100%
  margin: 0
  padding: 0
  &:focus,
  &:active
    outline: none

.mup-controls
  vertical-align: top
  white-space: nowrap
  padding: 5px
  background: $background-color-dark
  overflow: auto

  input:focus
    outline: none

  button::-moz-focus-inner
    border: none

  .mup-controls-left
    float: left
    margin: 0
    padding: 0
  
  .mup-controls-right
    float: right
    margin: 0
    padding: 0

  .mup-control
    display: inline-block
    color: $text-color-white
    &:not(:last-child)
      margin-right: 10px

  .mup-progress-bar, .mup-progress-fill
    margin: 0
    padding: 0
    border: 0

  .mup-control.mup-progress-bar
    display: block
    height: 8px
    margin: 0 0 5px
    padding: 0
    background: $slider-track-color

  .mup-progress-fill
    display: block
    width: 0
    height: 100%
    margin: 0
    padding: 0
    background: $main-color

  button.mup-control
    margin: 0
    padding: 7px 12px
    background: $control-background-light
    border: none
    color: $text-color-dark
    font-size: 16px
    font-weight: bold
    transition: all 200ms ease-in-out
    &:hover
      background: lighten($control-background-light, 10%)
      color: $text-color-dark
      cursor: pointer
  
  .mup-volume-slider
    display: inline-block
    width: 120px
    height: 10px
    margin: 10px 0 0
    padding: 0
    background: none
    border: none
    //# Chromium-based and Safari browser styles
    &::-webkit-slider-runnable-track
      width: 100%
      height: 10px
      cursor: pointer
      animate: 0.2s
      box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
      background: $slider-track-color
      border-radius: 25px
      border: 0px solid $control-border
      overflow: hidden
    &::-webkit-slider-thumb
      box-shadow: -100px 0 0 90px $main-color
      border: 0px solid $shadow-color
      width: $slider-thumb-width
      height: $slider-thumb-height
      border-radius: $slider-thumb-border-radius
      background: $main-color
      cursor: pointer
      -webkit-appearance: none
      margin-top: -2.4px
    &:focus::-webkit-slider-runnable-track
      background: $slider-track-color
    //# Mozilla browser styles for range
    &::-moz-range-track
      width: 100%
      height: 10px
      cursor: pointer
      animate: 0.2s
      box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
      background: $slider-track-color
      border-radius: 25px
      border: 0px solid $control-border
    &::-moz-range-progress
      height: 100%
      background: $main-color
      border-radius: $slider-thumb-border-radius
    &::-moz-range-thumb
      box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
      border: 0px solid $control-border
      width: $slider-thumb-width
      height: $slider-thumb-height
      border-radius: $slider-thumb-border-radius
      background: $main-color
      cursor: pointer
    //# Microsoft browser styles for range
    &::-ms-track
      width: 100%
      height: 10px
      cursor: pointer
      animate: 0.2s
      background: transparent
      border-color: transparent
      border-width: 39px 0
      color: transparent
    &::-ms-fill-lower,
    &::-ms-fill-upper
      background: $slider-track-color
      border: 0px solid $control-border
      border-radius: 50px
      box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
    &::-ms-fill-lower
      background: $slider-thumb-color
    &::-ms-thumb
      box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
      border: 0px solid $control-border
      width: $slider-thumb-width
      height: $slider-thumb-height
      border-radius: $slider-thumb-border-radius
      background: $main-color
      cursor: pointer
    &:focus
      &::-ms-fill-lower, &::-ms-fill-upper
        background: $main-color