.watch-screen-html-body {
  /* overflow-y: hidden; */
  /* height: var(--window-vh); */
}

/**
 * .watch-screen
 */
.watch-screen {
  display: flex;
  flex-direction: column;
  height: var(--window-vh);
  width: 100vw;
  overflow: hidden;
}

@media (min-width: 640px) {
  .watch-screen {
    position: relative;
    flex-direction: initial;
  }
}

/**
 * .watch-screen-video
 */

.watch-screen-video {
  flex-shrink: 0;
  position: relative;
  width: 100%;
}

@media (min-width: 640px) {
  .watch-screen-video {
    flex-shrink: 1;
    padding-bottom: 0;
    width: 100%;
    transition: 200ms all ease;
  }

  .watch-screen-video.is-chat-open {
    width: calc(100% - var(--player-chat-pane-width-portrait));
  }
}

@media (min-width: 992px) {
  .watch-screen-video {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .watch-screen-video.is-chat-open {
    width: calc(100% - var(--player-chat-pane-width-desktop));
  }
}

.watch-screen-video > .container {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
  background-color: var(--color-black);
  background-size: cover;
  /* @see https://github.com/facebook/react/issues/2055 */
  cursor: pointer;
}

.watch-screen-video > .container > video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

@media (min-width: 640px) {
  .watch-screen-video > .container > video {
    position: static;
  }
}

.watch-screen-video-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(0,0,0,0.75);
}

/**
 * .watch-screen-message
 */
@keyframes watch-screen-message-animation {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }

  15% {
    opacity: 1;
    transform: translateY(0);
  }

  85% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(4px);
  }
}

.watch-screen-message {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(0,0,0,0.5);
}

.watch-screen-message > .content {
  position: relative;
  animation-name: watch-screen-message-animation;
  animation-duration: 4s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
}

.watch-screen-message > .content > .status {
  opacity: 0.75;
  margin-bottom: 4px;
}