/*
 * Click-to-play facade for embedded videos.
 *
 * Sites are expected to restyle the play button via the settings or the
 * per-plugin fields rather than by overriding these rules; what is here is a
 * neutral default that works without any site CSS.
 */
.djangocms-video-facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #000;
    cursor: pointer;
}

/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 16 / 9) {
    .djangocms-video-facade {
        height: 0;
        padding-bottom: 56.25%;
    }
}

.djangocms-video-facade iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.djangocms-video-facade__poster {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    transition: filter 0.4s;
}

.djangocms-video-facade:hover .djangocms-video-facade__poster {
    filter: brightness(75%);
}

/* No thumbnail could be loaded; show the plain background instead of the
   browser's broken image icon. */
.djangocms-video-facade__poster.is-unavailable {
    display: none;
}

.djangocms-video-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
}

.djangocms-video-facade__play:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

.djangocms-video-facade__play img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Used when neither a play button image nor an icon is configured. */
.djangocms-video-facade__play--default {
    width: 68px;
    height: 48px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.6);
}

.djangocms-video-facade__play--default::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 17px solid currentColor;
}

.djangocms-video-facade.is-playing {
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .djangocms-video-facade__poster {
        transition: none;
    }
}