/*
 *  Video
 *    Video Object, with general fallbacks and smarter controls for better
 *    cross-browser compatibility.
 *
 *    Also allows for better and more styled controls.
 *
 *  Dependencies:
 *
 *  Version:
 *    1.0.0 - 2018/05/07
 */
@import '~@styles/global';

%o-video__media-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit:cover;
}

$o-video__fallback-z: 0;
$o-video__video-z: 1;
$o-video__loader-z: 2;

.o-video {
  position: relative;

  &__video {
    width: 100%;
    display: block;
    position: relative;//Needed by some browser to allow the Z-Index to apply
    z-index: $o-video__video-z;

    &.is-full {
      @extend %o-video__media-cover;

    }
  }

  &__image {
    @extend %o-video__media-cover;
    z-index: $o-video__fallback-z;
  }

  &__loader {
    z-index: $o-video__loader-z;
  }
}