$video-total-margin: 96px;
$overlay-bg-color: #000;
$close-button-bg-color: #333;

.video-overlay {
  background-color: $overlay-bg-color;
  display: flex;
  height: 100%;
  left: 0;
  opacity: 0;
  padding: 0 48px;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: scale(.94);
  width: 100%;
  z-index: 101;

  &.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    transition: transform .3s ease, opacity .3s ease;
  }
}

.video-wrapper {
  height: calc((9 / 16) * 100vw - #{$video-total-margin});
  margin: auto;
  position: relative;
  width: calc(100vw - #{$video-total-margin});

  iframe {
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    width: 100%;
  }

  @media (min-aspect-ratio: 16 / 9) {
    height: calc(100vh - #{$video-total-margin});
    width: calc((16 / 9) * 100vh - #{$video-total-margin});
  }
}

.video-close {
  align-items: center;
  background-color: $close-button-bg-color;
  border: 0;
  display: flex;
  height: 48px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 48px;

  .h-c-icon {
    fill: white;
  }
}