/* ============================================================================
   video.js seek bar - touch-friendly sizing.

   Linked immediately AFTER the video.js skin on every page that loads a
   player (learner course view, learner home, instructor home, course builder,
   instructor-staff home, admin approvals). Order matters: these rules match
   the skin's own specificity and win by coming later, so keep this <link>
   directly under the ~/vendor/video/*.css one wherever it is added.

   What the stock skin does, and why it fails on a phone:

       .vjs-progress-holder        height: 0.3em    -> ~3px at the player's
                                                       10px base font size
       .vjs-play-progress:before   font-size: 0.9em -> a ~9px dot

   and it only grows them on :hover (the skin bumps the holder's font-size to
   1.667em, which scales both). A touch screen never fires :hover, so on a
   phone the bar stayed a 3px hairline with a 9px scrubber dot - far under the
   ~44px a fingertip can reliably land on, which is why the dot could not be
   grabbed and dragged.

   Everything below makes the resting state roughly what the hover state used
   to be, and larger again on a coarse pointer. Note the skin already sets
   touch-action:none on .vjs-progress-control, so the drag handling itself was
   never the broken part - only the size of the thing to aim at.
   ========================================================================= */

/* The whole strip is the grab area, not just the painted bar. */
.video-js .vjs-progress-control {
    min-height: 2.4em;
    touch-action: none;
    -ms-touch-action: none;
}

/* ---- 1. the bar -------------------------------------------------------- */

.video-js .vjs-progress-holder {
    height: 0.75em;
    border-radius: 0.375em;
}

/* The skin's hover rule scales the holder's FONT-SIZE, which would drag the
   dot up with it. Pin the type scale and grow only the bar, so hover stays a
   visible cue on a mouse without changing anything else. */
.video-js .vjs-progress-control:hover .vjs-progress-holder {
    font-size: 1em;
    height: 0.9em;
}

.video-js .vjs-progress-holder .vjs-play-progress,
.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-load-progress div {
    border-radius: 0.375em;
}

/* ---- 2. the scrubber dot ----------------------------------------------- */

/* The skin draws the dot as a glyph from the VideoJS icon font, and the glyph
   metrics differ between the v5 and the v7 stylesheet in wwwroot/vendor/video.
   Blanking the glyph and drawing a real circle gives one rule that behaves
   identically under both, and lets the size be stated in px - which is what a
   touch target should be measured in anyway. */
.video-js .vjs-play-progress:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: -9px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .45);
    font-size: 0;
    line-height: 0;
    text-shadow: none;
    z-index: 1;
}

/* ---- 3. coarse pointers (phones, tablets) --------------------------------

   Two changes here, and the second one matters more than the sizing above.

   The seek bar is a flex item sharing one 3em row with skip-back, play,
   skip-forward, mute, time, playback rate and fullscreen. On a 375px phone
   that left it about 40px wide - a bar you cannot aim at however thick it is.
   So on a touch device the progress control comes out of that row and becomes
   a full-width strip along the top of the control bar, which is where every
   native mobile player puts it. The buttons keep the row below.               */

@media (hover: none), (pointer: coarse) {
    .video-js .vjs-control-bar {
        height: 5.6em;
        padding-top: 2.4em;   /* the strip below sits in this space */
    }

    .video-js .vjs-progress-control {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 2.4em;
        min-height: 0;
    }

    /* wider gutters so the dot at 0% and at 100% is not clipped by the edge */
    .video-js .vjs-progress-control .vjs-progress-holder {
        margin: 0 14px;
    }

    .video-js .vjs-progress-holder,
    .video-js .vjs-progress-control:hover .vjs-progress-holder {
        height: 0.9em;
    }

    .video-js .vjs-play-progress:before {
        right: -11px;
        width: 22px;
        height: 22px;
        margin-top: -11px;
    }

    /* With the seek bar lifted out of this row there is no flex:auto item left
       to take up the slack, so every button bunched against the left edge and
       the right half of the bar sat empty. An auto left margin on the expand
       control pushes it - and nothing else - to the far right, where a phone
       player is expected to keep it. The stock control and the two
       rotate-to-landscape toggles that the chapter and intro players
       substitute for it all carry .vjs-fullscreen-control, so one rule covers
       all three, and a hidden stock control (display:none) contributes no
       margin and cannot claim the slot from the visible one. */
    .video-js .vjs-control-bar .vjs-fullscreen-control {
        margin-left: auto;
    }
}

/* ---- 4. narrow players -------------------------------------------------- */

/* The skin hides the seek bar outright once the player is under ~320px wide
   (.vjs-layout-x-small), which on a small phone in portrait leaves no way to
   scrub at all. Seeking is the one control a learner cannot do without, so
   keep it and let the skin drop the time display and volume as it already
   does. */
.video-js.vjs-layout-x-small .vjs-progress-control {
    display: flex;
    align-items: center;
    min-width: 4em;
}