@use '../global/globalCssVariables.module.scss' as global;

.mini-viewer {
    cursor: grab;
    position: absolute;
    right: 10px;
    top: 10px;
    opacity: 0.1;
    transition: all 0.4s;
    color: white;
}

.videoBox {
    transform-origin: top left;
    width: 100%;
    height: 100%;
    position: relative;

    .videoBox-viewer {
        display: flex;
        flex-direction: column;
        height: 100%;
        border-radius: inherit;
        opacity: 0.99; // hack!  overcomes some kind of Chrome weirdness where buttons (e.g., snapshot) disappear at some point as the video is resized larger
        background: global.$dark-gray;
    }

    .inkingCanvas-paths-markers {
        opacity: 0.4; // we shouldn't have to do this, but since chrome crawls to a halt with z-index unset in videoBox-content, this is a workaround
    }

    .videoBox-stackPanel {
        z-index: -1;
        width: 100%;
        position: relative;
    }

    .videoBox-annotationLayer {
        position: relative;
        transform-origin: left top;
        top: 0px;
        width: 100%;
        pointer-events: none;
        mix-blend-mode: multiply; // bcz: makes text fuzzy!
        overflow: hidden;
    }
}

.videoBox-content-YouTube,
.videoBox-content-YouTube-fullScreen,
.videoBox-content,
.videoBox-content-interactive,
.videoBox-cont-fullScreen {
    width: 100%;
    z-index: -1; // 0;  // logically this should be 0 (or unset) which would give us transparent brush strokes over videos.  However, this makes Chrome crawl to a halt
    position: absolute;

    video {
        width: auto;
        height: 100%;
        display: flex;
        margin: auto;
    }
}

.videoBox-content,
.videoBox-content-interactive,
.videoBox-content-fullScreen {
    width: 100%;
    height: 100%;
    left: 0px;
}

.videoBox-content-YouTube,
.videoBox-content-YouTube-fullScreen {
    height: 100%;
}

// .videoBox-content-interactive, .videoBox-content-fullScreen, .videoBox-content-YouTube-fullScreen  {
//     pointer-events: all;
// }

.videoBox-ui-wrapper {
    width: 0px;
    height: 0px;
    position: relative;
    z-index: 2000;
}

.videoBox-ui {
    position: absolute;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    display: flex;
    background-color: global.$dark-gray;
    color: white;
    border-radius: 100px;
    height: 40px;
    padding: 0 10px 0 7px;
    transition: opacity 0.3s;
    z-index: 10001;
    transform-origin: top left;

    .timecode-controls {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        flex-grow: 2;
        font-size: 14px;

        .timeline-slider {
            margin: 5px;
            flex-grow: 2;
        }
    }

    .toolbar-slider.volume,
    .toolbar-slider.zoom {
        width: 50px;
    }

    .videobox-button {
        margin: 2px;
        cursor: pointer;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: global.$dark-gray;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
            background: global.$black;
        }

        svg {
            width: 15px;
            height: 15px;
        }
    }
}

.videoBox-time,
.videoBox-snapshot,
.videoBox-timelineButton,
.videoBox-play,
.videoBox-full {
    color: white;
    position: relative;
    transform-origin: left top;
    pointer-events: all;
    padding-right: 5px;
    cursor: pointer;

    &:hover {
        background-color: global.$medium-gray;
    }
}

.videoBox-content-fullScreen,
.videoBox-content-fullScreen-interactive {
    display: flex;
    justify-content: center;
    align-items: flex-end;

    .videoBox-ui {
        left: 50%;
        top: 90%;
        transform: translate(-50%, -50%);
        width: 80%;
        transition:
            top 0s,
            width 0s,
            opacity 0.3s,
            visibility 0.3s;
    }
}

// video::-webkit-media-controls {
//     display: none !important;
// }

input[type='range'] {
    -webkit-appearance: none;
    background: none;
}

input[type='range']:focus {
    outline: none;
}

input[type='range']::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    box-shadow: 0;
    background: global.$light-gray;
    border-radius: 10px;
}

input[type='range']::-webkit-slider-thumb {
    box-shadow: 0;
    border: 0;
    height: 12px;
    width: 12px;
    border-radius: 10px;
    background: global.$medium-blue;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -1px;
}