@import "TOKENS";
$color_highlight: #59c8ef;
.vplayer.skin_avanti{
  .controls{
    display: flex;
    height: 40px;
    align-content: center;
    align-items: center;


    .videoPlayer-controls--background{
      height: 100%;
      width: 100%;
      background-color: rgba(50,50,50,0.5);
    }
    .playcontrols{
      position: relative;
      top: 0;left:0;

      margin-left: 15px;

      height: 14px;
      width: 14px;
      .playSimple{
        width: 100%;
        height: 100%;
        background-image: none;
        svg{
          height: 100%;
        }
        path{
          fill: #ddd;
          $transition-property: fill;
          $transition-duration: 0.3s;
          $transition-timing: ease-out;
          @include apply_transition($transition-property, $transition-duration, $transition-timing);
        }

      }
      .playHover{
        display: none;
      }
      .pauseSimple{
      }
      .pauseHover{
        display: none;
      }
    }
    .playSimple, .playHover, .pauseSimple, .pauseHover{
      top:0;
      left:0;
      bottom: auto;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .timetext, .volumecontrols, .fscreencontrols{
      display:none;
    }
    .mutecontrols-con{
      top:0px;

      flex: 0 0 auto;
      position: relative;
      width: 16px; height: 16px;
      cursor: pointer;

      margin-right: 15px;



      $transition-property: opacity;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;

      .btn-mute, .btn-mute-hover, .btn-unmute, .btn-unmute-hover{
        position: absolute;
        background-position: center center;
        background-repeat: no-repeat;
        top:0; left:0;
        width: 100%; height: 100%;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);
      }





      .btn-mute{

      }
    }
    .mutecontrols-con{

      .btn-mute{

        svg{
          width: 100%;
          height: 100%;

          path,polygon{

            fill: #ddd;


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



        #only-if-mute{
          opacity: 1;
          $transition-property: opacity;
          $transition-duration: 0.3s;
          $transition-timing: ease-out;
          @include apply_transition($transition-property, $transition-duration, $transition-timing);
        }
      }
    }
    .mutecontrols-con.active{

      .btn-mute{
        #only-if-mute{
          opacity: 0;
        }
      }
    }


    .mutecontrols-con:hover .btn-mute svg path, .mutecontrols-con:hover .btn-mute svg polygon, .playcontrols:hover .playSimple svg path, .playcontrols:hover .pauseSimple svg path{
      fill: $color_highlight;
    }


  }
  .scrubbar{
    top: 0; left:0;
    flex: 1000;
    position: relative;
    height: 6px;

    margin-left: 15px;
    margin-right: 15px;
    .scrubBox{

      color: #111;
    }
    .scrub-bg, .scrub-buffer{
      background: #727272;
      bottom:auto;
      top:0;
      height: 100%;
    }
    .scrub{
      background: #59c8ef;
      opacity:1;
      height:100%;
    }
  }
}