/*
 * Video Popup widget.
 */
.ekl-vp__trigger {
    @apply relative block aspect-video w-full cursor-pointer overflow-hidden border-0 bg-ekl-neutral-900 p-0;

    img {
        @apply block h-full w-full object-cover;
    }

    &::after {
        content: '';
        @apply pointer-events-none absolute inset-0 bg-transparent;
    }
}

.ekl-vp__play {
    @apply absolute left-1/2 top-1/2 z-[1] flex h-[72px] w-[72px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-ekl-brand text-white transition-all duration-300;
}

.ekl-vp__trigger:hover .ekl-vp__play,
.ekl-vp__trigger:focus-visible .ekl-vp__play {
    @apply scale-110 bg-ekl-hover;
}

.ekl-vp__trigger:focus-visible {
    outline: 3px solid var(--color-ekl-brand);
    outline-offset: 3px;
}

/* The popup lives on <body>, outside the widget. */
.ekl-vp-modal {
    @apply fixed inset-0 z-[99999] flex items-center justify-center bg-black/85 p-[24px];
}

.ekl-vp-modal__stage {
    @apply aspect-video w-full max-w-[1000px] bg-black;

    iframe,
    video {
        @apply block h-full w-full border-0;
    }
}

.ekl-vp-modal__close {
    @apply absolute right-[16px] top-[12px] cursor-pointer border-0 bg-transparent p-[8px] text-[36px] leading-none text-white;
}

body.ekl-vp-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .ekl-vp__play {
        transition: none;
    }

    .ekl-vp__trigger:hover .ekl-vp__play,
    .ekl-vp__trigger:focus-visible .ekl-vp__play {
        transform: translate(-50%, -50%);
    }
}