/* 
VIDEO
*/
#video_p-video {
    width: 100%;
    height: 100%;
    z-index: 5;
    transition: opacity 1000ms;
}
#video_p-video.--dim {opacity: .6;}

#video-page[data-view="cover"] #video_p-video {object-fit: cover;}
#video-page[data-view="contain"] #video_p-video {object-fit: contain;}



/* 
CONTROLS
*/
#video_p-controls {
    margin-top: var(--size);
    column-gap: var(--size-m);
}
@media only screen and (min-width: 768px) {
    #video_p-controls {
        left: 50%;
        margin-top: 0;
        transform: translateX(-50%);
    }
}

/* 
TECHNICAL
*/
#video_p-technical {
    right: 0;
    bottom: 0;
    left: 0;
    max-height: calc(100dvh - 4rem);
    overflow-y: auto !important;
    z-index: 10;
}


/* INFO */
/* #video-page[data-controls="collapse"] #video_p-info {height: 0;} */

#video_p-info .--details {
    margin: var(--size) 0 var(--size-m);
    column-gap: var(--size);
}

@media only screen and (min-width: 768px) {
    #video_p-technical {max-height: 100dvh;}
    #video_p-info .--details {margin: var(--size-m) 0;}
}


/* PROGRESS */
#video_p-progress {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, .4);
    backdrop-filter: blur(1rem);
}

#video_p-progress .--progress {
    top: 0;
    bottom: 0;
    left: 0;
    width: 0px;
    background: var(--c-red);
}




/* DETAILS */
#video-page[data-controls="collapse"] #video_p-details {height: 0;}
#video-page[data-controls="expand"] #video_p-details {overflow-y: auto !important;}

#video_p-details-toggle {
    top: 2rem;
    right: 0;
    width: var(--size-m);
    height: var(--size-m);
    transition: rotate 1000ms;
}
#video-page[data-details="show"] #video_p-details-toggle {rotate: 45deg;}

#video_p-details-toggle svg {
    width: 100%;
    height: 100%;
    fill: white;
}

#video_p-details-container {margin-top: var(--size-m);}
#video-page[data-details="hide"] #video_p-details-container {height: 0;}

#video_p-credits dt {grid-column: 1/2;}
#video_p-credits dd {grid-column: 2/-1;}

#video_p-description {margin: var(--size-m) 0;}

#video_p-director .--director {margin-top: var(--size-s);}

#video_p-bottom {margin-top: var(--size-m);}

@media only screen and (min-width: 1096px) {
    #video_p-description {
        margin: 0;
        max-width: 44rem;
    }
}


@media (hover: hover) {
    #video_p-controls button,
    #video_p-details-toggle {transition: opacity 500ms;}

    #video_p-controls:hover button,
    #video_p-details-toggle:hover {opacity: .4;}

    #video_p-controls button:hover {opacity: 1;}
}