.d102-video-embed-container {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.d102-video-embed-container .video-js {
    font-size: 16px;
    font-family: inherit;
    width: 100%;
}

.d102-video-embed-container video {
    max-width: 100%;
}


/* oEmbed (YouTube / Vimeo etc.) responsive wrapper */

.d102-video-embed-oembed {
    position: relative;
    width: 100%;
    aspect-ratio: var(--aspect-ratio, 16 / 9);
}

.d102-video-embed-oembed iframe,
.d102-video-embed-oembed embed,
.d102-video-embed-oembed object,
.d102-video-embed-oembed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* Transcript toggle */

.d102-video-embed-container summary.transcript-link-toggle {
    margin-block: 1rem;
    cursor: pointer;
    color: inherit;
}

.d102-video-embed-transcript {
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem;
}

.d102-video-embed-transcript > p:first-child {
    margin-top: 0;
}

.d102-video-embed-transcript > p:last-child {
    margin-bottom: 0;
}


/* Editor placeholder when no video is set */

.d102-video-embed-temp {
    background-color: #ccc;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Video.js play button hover */

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    transition: all 0.4s;
}

.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
    background-color: currentColor;
}