// Sass for videojs-dvr

$colorButton:tomato;
$colorButtonOnAir:tomato;
//$colorButtonOutAir:darken(tomato,50%);
$colorButtonOutAir:gray;

@mixin no-seleccionable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.video-js {

  // This class is added to the video.js element by the plugin by default.
  &.vjs-dvr {
    display: block;

    & .vjs-live-control{
      display:none
    }

    &.vjs-live .vjs-progress-control {
      display: flex;
    }

    &.vjs-user-inactive .vjs-control-bar.vjs-dvr-control-bar .vjs-progress-control .vjs-slider .vjs-seek-handle:before {
      font-size: 0;
      transition-delay: 3s;
      -webkit-transition-delay: 3s;
      -moz-transition-delay: 3s;
      -ms-transition-delay: 3s;
      -o-transition-delay: 3s;
    }

    & .vjs-time-tooltip{
      z-index: 0;
    }

    & .vjs-mouse-display .vjs-time-tooltip{
      z-index: 1;
    }

    .vjs-control-bar.vjs-dvr-control-bar {
      display: flex;

      .vjs-dvr-progress-control {
        position: relative;
        height: 3em;
        background: 0 0;
        //padding: 0 1em;
        top: 0;
      }
      & .vjs-live-button {

        @include no-seleccionable;
        min-width: 50px;

        font-weight: bold;
        //font-size: 14px;

        position: relative;
        //bottom: calc(-50% + 5px);
        color: #8c8b8b;
        //border-radius: 3px;
        //background-color: $colorButtonOutAir;
        &.onair {
          color:#fff;
          //background-color: $colorButtonOnAir;
          & .liveCircle:after{
            background: $colorButtonOnAir;
          }
          &:focus .liveCircle:after {
            box-shadow: 0 0 1em $colorButtonOnAir;
          }

        }

        & .liveText{
          margin-left: 1.5em;
        }

        & .liveCircle:after {
          content: '';
          position: absolute;
          width: .9em;
          height: .9em;
          border-radius: 50%;
          background: $colorButtonOutAir;
          left: .5em;
        }
        &:focus .liveCircle:after {
          box-shadow: 0 0 1em $colorButtonOutAir;
        }

        &:hover{
          cursor: pointer;
        }
      }

      .vjs-load-progress {
        overflow: hidden
      }

    }

    .vjs-dvr-control-bar {
      .vjs-current-time, .vjs-duration, .vjs-remaining-time, .vjs-time-divider {
        display: none;
      }
      .vjs-live-display {
        display: none;
      }
      .vjs-progress-control.vjs-control .vjs-slider {
        .vjs-control-text {
          &:before {
            height: 0;
          }
          &:after {
            content: ' \25BC';
            color: #000;
            top: 1.25em;
            position: relative;
            left: -1.55em;
            font-size: 1.5em;
          }
        }
        .vjs-seek-handle.vjs-slider-handle {
          line-height: .2em;
          position: relative;
          top: -.21em;
          -webkit-top: -.3em;
          float: left;
        }
      }
      .vjs-progress-control .vjs-slider .vjs-seek-handle.vjs-slider-handle:before {
        content: ' \25CF';
        font-size: 2em;
        transition: font-size .2s;
        -webkit-transition: font-size .2s;
        -moz-transition: font-size .2s;
        -ms-transition: font-size .2s;
        -o-transition: font-size 0.2s;
      }
    }

  }
}