@import "../mixins/all";

.video__youtube-player-mask {
  width: 100%;
  overflow: hidden;

  @include prefix-val(display, flex);
  @include prefix-prop(flex-direction, column);
  @include prefix-prop(align-items, center);
  @include prefix-prop(justify-content, center);

  @media #{$desktop} {
    max-height: 75vh;
  }
}

.video__youtube-player-container--centering {
  // This container is here just to vertically align the video.
  // The extra container is needed, because Firefox and Edge don't do
  // show to percetage padding-bottom right for flex items.
  // https://bugzilla.mozilla.org/show_bug.cgi?id=958714

  width: 100%;

  // Workaround for Safari bug:
  // https://github.com/philipwalton/flexbugs/tree/bba00a51c0ecc0e8afcd718f8757a3cbcb41cf56#1-minimum-content-sizing-of-flex-items-not-honored
  @include prefix-prop(flex-shrink, 0);
}

.video__youtube-player-container--aspect-ratio {
  // Dimensions are added in the ERB file

  position: relative;
}

.video__youtube-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video__youtube-controls {
  // Set pointer-events to none
  // This will the controls layer to ignore all mouse events and
  // that allows overlay element to have a hover effetc
  pointer-events: none;

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  display: none;

  // .videoautoplay class is added by Modernizr
  .videoautoplay & {
    @include prefix-val(display, flex);
    @include prefix-prop(flex-direction, column);
    @include prefix-prop(align-items, center);
    @include prefix-prop(justify-content, center);
  }
}

.video__youtube-overlay {

  // There seems to be a bit annoying issue in Safari: When the window
  // size is changed, every now and then a 1px gap appears in the top or bottom
  // of the video.
  //
  // I'm not sure what's the reason for this is. It might be a subpixel rendering
  // bug or something like that. It seems to only appear in Safari.
  //
  // The hacky solution for this is to make the overlay bigger, so that it covers
  // the missing gap. That's why -10px is added to the position.

  position: absolute;
  top: -10px;
  left: -10px;
  bottom: -10px;
  right: -10px;

  @include prefix-prop(user-select, none);

  display: none;

  // .videoautoplay class is added by Modernizr
  .videoautoplay & {
    display: block;
  }

  cursor: pointer;

  // Hover off
  background-color: rgba(0, 0, 0, 0.5);

  &:hover {
    background-color: rgba(0, 0, 0, 0.35);
  }

  @include prefix-prop(transition, (background-color 100ms ease-in-out, opacity 800ms ease-in-out));
}

.video__youtube-overlay--inactive {
  opacity: 1;
}

.video__youtube-overlay--active {
  opacity: 0;
}

.video__youtube-watch-video-text {
  @include typography__semibold;
  font-size: 12px;
  color: #FFFFFF;
  letter-spacing: 3px;
  line-height: 12px;

  text-transform: uppercase;

  margin-top: 24px;
}