// Dependencies
$icon-font-path: '../fonts' !default;

// Video.js overrides
@import 'variables';

// Import Video.js style
@import '~video.js/src/css/vjs.scss';
@import 'mixins/skin';
@import 'icons';
@import 'ads-label';
@import 'videojs-ima';

// control bar control size
.video-js .vjs-control:before {
  font-size: 2.0em;
  line-height: 1.5em;
}
.video-js .vjs-control {
  width: 3em;
}

// focus and hover states
.video-js .vjs-control,
.vjs-big-play-button,
.vjs-icon-close,
.vjs-volume-bar {
  &:focus {
    outline: none;
  }

  &:hover {
    opacity: 0.95;
  }
}

.vjs-cloudinary-button:focus {
  opacity: 0.8;
}

.vjs-big-play-button:focus {
  .cld-video-player.cld-video-player-skin-dark & {
    background-color: rgba(40, 40, 40, 0.8);
  }

  .cld-video-player.cld-video-player-skin-light & {
    background-color: rgba(223, 234, 252, 0.8);
  }
}

// light skin focus glow effect
.cld-video-player-skin-light {
  .vjs-control:focus {
    text-shadow: 0em 0em 1em #0E2F5A;
  }
}

// IE11 does some weird shenanigans with font-size on :before elements.
.cld-ie11.video-js .vjs-control:before {
  font-size: 0.6em;
}

.cld-video-player {
  font-family: $text-font-family;

  &:focus {
    outline: none;
  }

  &.cld-fluid {
    .vjs-poster {
      // Work-around for poster having slightly wrong proportions in fluid players.
      background: #000;
      background-size: cover;
    }
  }

  // The base font size controls the size of everything, not just text.
  // All dimensions use em-based sizes so that the scale along with the font size.
  // Try increasing it to 15px and see what happens.
  font-size: 12px;
  font-weight: 300;

  .vjs-time-control {
    padding-left: 0;
    padding-right: 0;
  }

  .vjs-time-divider {
    min-width: 1em;
    display: block;
  }

  .vjs-current-time {
    display: block;
  }

  .vjs-remaining-time {
    display: none;
  }

  .vjs-duration {
    display: block;
  }

  .vjs-big-play-button {
    // The font size is what makes the big play button...big.
    // All width/height values use ems, which are a multiple of the font size.
    // If the .video-js font-size is 10px, then 3em equals 30px.*/
    font-size: 5em;

    // We're using SCSS vars here because the values are used in multiple places.
    // Now that font size is set, the following em values will be a multiple of the
    // new font size. If the font-size is 3em (30px), then setting any of
    // the following values to 3em would equal 30px. 3 * font-size. */
    $big-play-width: 1.5em;

    // 1.5em = 45px default
    $big-play-height: 1.5em;

    line-height: $big-play-height;
    height: $big-play-height;
    width: $big-play-width;

    // 0.06666em = 2px default
    border: 0;

    // 0.3em = 9px default
    // border-radius: 0.3em;
    border-radius: 50%;

    left: 50%;
    top: 50%;
    margin-left: -($big-play-width / 2);
    margin-top: -($big-play-height / 2);
  }

  &.vjs-paused .vjs-big-play-button,
  &.vjs-paused.vjs-has-started .vjs-big-play-button {
    opacity: 1;
    visibility: visible;

    &:hover {
      // opacity: 0.8;
    }
  }

  &.vjs-controls-disabled .vjs-big-play-button,
  &.vjs-has-started .vjs-big-play-button,
  &.vjs-using-native-controls .vjs-big-play-button,
  &.vjs-error .vjs-big-play-button {
    transition: visibility 0.2s, opacity 0.2s;
    display: block;
    visibility: hidden;
    opacity: 0;
  }

  .vjs-control-bar {
    .vjs-volume-panel {
      margin-right: 1em;
    }

   .vjs-menu-button-inline:hover,
   .vjs-menu-button-inline:focus,
   .vjs-menu-button-inline.vjs-slider-active,
   .vjs-no-flex .vjs-menu-button-inline {
      // This width is currently specific to the inline volume bar.
      width: 10em;
    }

    .vjs-menu-button-inline:before {
      width: 1.6em;
    }

    .vjs-menu-button-inline .vjs-menu {
      left: 3em;
    }

    .vjs-progress-control {
      position: absolute;
      left: 0px;
      width: 100%;
      background-color: inherit;
      height: 1.0em;
      padding: 0.7em 0.2em 0 0.2em;
      bottom: 3.0em;
    }

    .vjs-progress-holder {
      height: 0.25em;
    }
    .vjs-progress-control:hover {
      .vjs-progress-holder {
        font-size: 1.2em;
        transition: none;
      }
      .vjs-time-tooltip {
        font-size: 0.8em;
      }
    }

    .vjs-play-progress {
      &::before {
        top: -0.25em;
      }
    }


    .vjs-progress-control-events-blocker {
      background-color: transparent;
      @extend .vjs-progress-control
    }
  }

  .vjs-spacer {
    flex: auto;
  }
}