/**
  * @prop --vm-poster-z-index: The position in the UI z-axis stack inside the player.
  */
:host {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--vm-poster-z-index);
}

.poster {
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--vm-fade-transition);
}

.poster.hidden {
  display: none;
}

.poster.active {
  opacity: 1;
  visibility: visible;
}

img {
  width: 100%;
  height: 100%;
  pointer-events: none;
}