/* Player feel layer: the progress line under the top bar and the follow control
   under the creator's picture. media.css keeps the player's base layout. */

.mtv-reels__progress {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .24);
    overflow: hidden;
    pointer-events: none;
}
.mtv-reels__progress-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: rgba(255, 255, 255, .94);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

/* A long press stops the clip, so the browser must not offer its own menu first. */
.mtv-reel__video {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.mtv-reel__follow {
    max-width: 64px;
    margin-top: -6px;
    padding: 4px 9px;
    border: 0;
    border-radius: 999px;
    background: var(--mtv-magenta);
    color: #fff;
    font: 700 10px/1 var(--mtv-font-ui);
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: pointer;
}
.mtv-reel__follow.is-on {
    background: rgba(8, 27, 44, .52);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
    color: rgba(255, 255, 255, .88);
}
.mtv-reel__follow[data-busy="1"] { opacity: .6; }