@import url("theme.css");

#video-player {
    max-width: 100vw;
    max-height: 75vh;
    display: flex;
    justify-content: center;
    position: relative;
    cursor: none;
    @media (pointer: coarse) {
        cursor: unset;
    }
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#video-player[controls-expanded] {
    cursor: unset;
}

#video-bg {
    background-color: black;
    forced-color-adjust: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

#video-elem {
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    pointer-events: none; /* Having the video register pointer events directly caused incompatibilities with Chromium. */
}

#video-controls {
    z-index: 2;
    position: absolute;
    bottom: 0;
}

#video-controls, #video-control-buttons {
    width: 100%;
}

#progress-bar-outer {
    width: 100%;
    height: .5em;
    cursor: pointer;
    transition: background-color .25s, height .25s;
}

#progress-bar-inner {
    width: 0;
    height: 100%;
    opacity: .5;
    background-color: var(--color-primary-light, #F0F);
    pointer-events: none; /* seeking must be handled by #progress-bar-outer */
    transition: opacity .25s;
}

#video-player[controls-expanded] #progress-bar-inner {
    opacity: 1;
    transition: opacity .25s;
}

#video-player[controls-expanded] #progress-bar-outer {
    background-color: color-mix(in srgb, var(--color-primary-dark) 50%, transparent 50%);
}

#progress-bar-outer:hover {
    height: .75em;
}

@media(pointer: coarse) {
    #video-player[controls-expanded] #progress-bar-outer {
        height: .75em;
        min-height: 24px;
    }
}

#video-control-buttons {
    display: flex;
    flex-direction: row;
    background: linear-gradient(to top, black, #0006 80%, transparent);
    max-height: fit-content;
    height: 0;
    overflow: hidden;
    transition: height .25s;
}

#video-player[controls-expanded] #video-control-buttons {
    height: 2.5em;
    transition: height .25s;
    @media (pointer: coarse) {
        min-width: 48px;
        min-height: 48px;
    }
}

#video-control-buttons > * {
    height: 1.5em;
    margin: .5em;
    color: white;
}

.video-control-btn {
    cursor: pointer;
}

#playpause-btn {
    content: url("icons/play.svg");
    width: 1.5em;
}

#video-player[playing] #playpause-btn {
    content: url("icons/pause.svg");
}

#fullscreen-btn {
    content: url("icons/expand.svg");
    margin-left: auto;
}

#video-player[fullscreen] #fullscreen-btn {
    content: url("icons/collapse.svg");
}

#video-timestamp {
    forced-color-adjust: none;
}

math.big {
    font-size: 1.5em;
}