@import "TOKENS";

$color_main: #a34861;
$controlsHeight: 37px;
$responsiveBreakpoint: 600px;


.vplayer.skin_pro{

  text-align: left;

  line-height: 1;

  .playcontrols{
    width: 16px;
    height: 15px;    min-width: 16px;

    >*{

    }
  }

  .playSimple{
  }

  .timetext{
    position: relative;
    display: inline-block;
    font-size: 13px;
    white-space: nowrap;

    flex: 1000;

    color: #FFFFFF;
    pointer-events: none;
    .total-timetext{
      opacity: 0.5;
    }
  }


  .hdbutton-con{
    width:30px;
    text-align: center;
    height:auto;
    position:relative;

    cursor:pointer;
    display: block;
    font-size: 11px;
    line-height: 1;
  }

  .hdbutton-con .hdbutton-normal{

    position: relative;
    background-image: none;
    background-color: transparent ;
    color: $color_main;




    $transition-property: color;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }
  .hdbutton-con .hdbutton-normal:hover,.hdbutton-con.active .hdbutton-normal{
    color: $color_highlight;


  }
  .hdbutton-con .hdbutton-hover{
    display: none;

  }

  .scrub-bg{
    width: 100%!important;;
  }
  $color_main: #aaaaaa;
  $color_main_hover: #dddddd;
  $color_highlight: #db4343;

  .playcontrols{
    position: relative;
  }

  $transition-property: bottom,opacity,visibility;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;
  .controls{
    height:$controlsHeight;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }



  .controls{
    bottom:0;
    display: flex;
    align-items: center;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }
  &.mouse-is-out .controls{
    bottom: -$controlsHeight;
    opacity: 1;
    visibility: visible;

  }
  &.mouse-is-out .scrubbar{
    bottom: -10px;

  }
  $transition-property: background, border-color;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;

  .pauseSimple{

  }
  .videoPlayer-controls--background{
    height: 100%;
    width: 100%;
    bottom:0;
    background: #333;
    border-top:1px solid rgba(0,0,0,0.5);
  }

  .scrubbar{
    bottom: $controlsHeight;
    left: 0;
    height: 15px;
    position: absolute;
    width: 100%;


    $transition-property: bottom;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  .scrub-bg{
    position: absolute;
    left: 0px;
    bottom:0px;
    background: #333;
    box-shadow: 0 0 0px 0 rgba(0,0,0,1) inset;
    height: 100%;
  }

  .scrub-buffer{
    background: #555;
  }
  .scrub{
    background: $color_highlight;
  }












  .scrubBox {
    position: absolute;
    background: #464849;
    border: 1px solid #000000;
    color: #eee;
    width:40px;
    bottom:19px;
    left:-15px;
    text-align:center;
    padding:0px 0px;
    font-size:10px;
    height: auto;
    opacity:0.9;
    pointer-events:none;
    font-family: Helvetica, Arial , sans-serif;
  }
  .scrubBox:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #464849;
    border-width: 3px;
    left: 15px;
    margin-left: -3px;
  }
  .scrubBox:before {
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #111;
    border-width: 4px;
    left: 15px;
    margin-left: -4px;
  }


  .scrubBox-prog:empty {
    display:none;
  }
  .scrubBox-prog {
    position: absolute;
    background: #ffffff;
    color: #111;
    border: 1px solid #000000;
    width:50px;
    bottom:19px;
    left:-15px;
    text-align:center;
    padding:0px 0px;
    font-size:10px;
    height:auto;
    opacity:0.9;
    pointer-events:none;
  }
  .scrubBox-prog:after,  .scrubBox-prog:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  .scrubBox-prog:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #ffffff;
    border-width: 5px;
    left: 15px;
    margin-left: -5px;
  }
  .scrubBox-prog:before {
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #000000;
    border-width: 6px;
    left: 15px;
    margin-left: -6px;
  }



  .volumeicon{
    position: absolute;
    top:0;
    left:0px;
    background: $color_main;
    background-position: center center;
    background-repeat: no-repeat;
    width:7px;
    height:7px;
  }



  .volumeicon:before{
    position: absolute;
    left: -4px;
    bottom: -3px;
    background: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    width:0px;
    height:0px;

    content: " ";
    border: solid transparent;
    border-color: rgba(136, 183, 213, 0);
    border-right-color: $color_main;
    border-width: 7px;
    margin-left: 0px;
    outline: 1px solid transparent;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }


  .volumeicon:hover{
    background: $color_main_hover;
  }



  .volumeicon:hover:before{
    border-right-color: $color_main_hover;
  }

  .volumecontrols{
    width: 50px;
    height: 6px;
  }
  .volume_static{
    position:absolute;
    top:0;
    left:16px;
    background: $color_main;
    background-position: center center;
    background-repeat: repeat-x;
    width:26px;
    height:6px;
  }



  .controls > *:not(.videoPlayer-controls--background){
    margin-left: 10px;
  }
  .controls > *:last-child{
    margin-right: 10px;
  }
  .volume_active{
    top:0;
    left:16px;
    background: $color_highlight;
    background-position: center center;
    background-repeat: repeat-x;
    width:24px;
    height:6px;
  }
  .volume_cut{
    display: none;
  }

  .fscreencontrols{

    width:23px;
    height:15px;
  }
  .full{
  }



  .hdbutton-con.active .hdbutton-hover{
    opacity:1;
  }
  .hdbutton-con:hover > .hdbutton-hover{
    opacity:1;
  }


  .dzsvg-player-button{

    width: 18px;
    height: 18px;

    .the-icon{
      path{

        fill: $color_main;
      }

    }
  }
}


@media all and (max-width: $responsiveBreakpoint){
  body .vplayer.skin_pro{
    margin-bottom: 30px;
  }

  .vplayer.skin_pro {

    .the-video{
      max-height: 100%;
      object-fit: cover;
      $transition-property: max-height;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);

    }
    &.mouse-is-over{

      .the-video{
        max-height: calc(100% - #{$controlsHeight});
      }
    }
  }


}
.no-mouse-out .vplayer.skin_pro.mouse-is-out .controls {
  bottom: 0;
}