/* Direct Vidstack/Bunny player support for FOLEO snap cards.
 * Activate per element by adding class="foleo-video-direct" to <media-player>.
 */

media-player.foleo-video-direct {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  background: #000 !important;
  --media-object-fit: cover;
  --media-object-position: center center;
}

media-player.foleo-video-direct media-provider,
media-player.foleo-video-direct video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

media-player.foleo-video-direct video {
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-width: 768px) {
  .foleo-snap-hero media-player.foleo-video-direct {
    position: relative;
  }

  /* Hide default center play affordance; JS enables single-tap play anywhere. */
  .foleo-snap-hero media-player.foleo-video-direct .vds-play-button {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* FOLEO-style mobile play affordance on direct players (before first play). */
  .foleo-snap-hero media-player.foleo-video-direct:not([data-started])::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    z-index: 6;
    pointer-events: none;
  }

  .foleo-snap-hero media-player.foleo-video-direct:not([data-started])::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(calc(-50% + 2px), -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #fff;
    z-index: 7;
    pointer-events: none;
  }
}