@import '../settings/variables';
@import '../tools/mixins/breakpoints';

.c-video-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  z-index: $layer-overlay;

  &__video-wrapper {
    position: relative;
    top: 2.5vh;
    left: 2.5vw;
    width: 95vw;
    height: 95vh;

    @include media-breakpoint-up(md) {
      top: 12.5vh;
      left: 12.5vw;
      width: 75vw;
      height: 75vh;
    }
  }

  &__video {
    width: 100%;
    height: 100%;
  }

  &__close-icon {
    font-size: 1.1em;
    color: white;
    cursor: pointer;
    position: fixed;
    right: 2.5vw;
    top: 5vh;
    margin: 0;

    @include media-breakpoint-up(md) {
      right: 5vw;
    }
  }
}