/**
 * Fichier  : /ott/player/css/controls.css
 * Fonction : style des éléments de control du player HTML5
 */


/* ==================================================
   CONTROLS
================================================== */

.player-controls {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 5;
}

.player-controls {
    padding: 10px 14px;
}

.player-controls {
    display: grid;
    align-items: center;
    gap: 14px;
}

.player-controls {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.03)
        );
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    backdrop-filter: blur(18px);
}

/*** mode VOD ***/

.video_player[data-mode="vod"] .player-controls {
    grid-template-columns: auto 1fr auto;
}

/*** mode LIVE ***/

.video_player[data-mode="live"] .player-controls {
    grid-template-columns: auto auto;
    justify-content: space-between;
}

.video_player[data-mode="live"] .controls-right {
    justify-self: end;
}


/* ==================================================
   GROUPS
================================================== */

.controls-left,
.controls-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.controls-center {
    width: 100%;
}

.controls-center {
    display: flex;
    align-items: center;
}


/* ==================================================
   BUTTONS
================================================== */

.player-controls .control-btn {
    width: 42px;
    height: 42px;
}

.player-controls .control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-controls .control-btn {
    cursor: pointer;
}

.player-controls .control-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
}

.player-controls .control-btn {
    transition:
        background .15s ease-in-out,
        transform .15s ease-in-out;
}

/* ==================================================
   CAST / AIRPLAY
================================================== */

/* Desktop */

#castBtn,
#airplayBtn {
    display: none !important;
}

/* Mobile */

@media screen and (max-width: 768px) {

    #castBtn,
    #airplayBtn {
        display: flex !important;
    }

}

/* ==================================================
   ICONS
================================================== */

.player-controls .control-btn svg {
    width: 22px;
    height: 22px;
}

.player-controls .control-btn svg {
    fill: rgba(255,255,255,0.78);
}

.player-controls .control-btn svg {
    transition: fill .15s ease-in-out;
}


/* ==================================================
   HOVER
================================================== */

.player-controls .control-btn:hover {
    background:
        linear-gradient(
            135deg,
            rgba(255,95,45,0.16),
            rgba(255,145,0,0.08)
        );
}

.player-controls .control-btn:hover svg {
    fill: #fff;
}


/* ==================================================
   ACTIVE
================================================== */

.player-controls .control-btn:active {
    transform: scale(0.96);
}


/* ==================================================
   RANGES
================================================== */

#timelineRange,
#volumeRange {
    appearance: none;
}

#timelineRange,
#volumeRange {
    height: 4px;
}

#timelineRange,
#volumeRange {
    cursor: pointer;
}

#timelineRange,
#volumeRange {
    border-radius: 999px;
}


/* ==================================================
   TIMELINE
================================================== */

#timelineRange {
    --timeline-progress: 0%;
}

#timelineRange {
    width: 100%;
}

#timelineRange {
    background:
        linear-gradient(
            135deg,
            #8e0e00,
            #e9401b 60%,
            #ff7b00
        ) 0 / var(--timeline-progress) 100% no-repeat,
        rgba(255,255,255,0.14);
}


/* ==================================================
   VOLUME
================================================== */

#volumeRange {
    --volume-progress: 100%;
}

#volumeRange {
    width: 90px;
}

#volumeRange {
    background:
        linear-gradient(
            135deg,
            #8e0e00,
            #e9401b 60%,
            #ff7b00
        ) 0 / var(--volume-progress) 100% no-repeat,
        rgba(255,255,255,0.14);
}

/*** Mute ***/
.player-controls .control-btn svg path {
    stroke: rgba(255,255,255,0.78);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.player-controls .control-btn svg path:first-child {
    fill: rgba(255,255,255,0.78);
    stroke: none;
}


/* ==================================================
   THUMBS
================================================== */

#timelineRange::-webkit-slider-thumb,
#volumeRange::-webkit-slider-thumb {
    appearance: none;
}

#timelineRange::-webkit-slider-thumb,
#volumeRange::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
}

#timelineRange::-webkit-slider-thumb,
#volumeRange::-webkit-slider-thumb {
    background: #fff;
    border: 0;
    border-radius: 999px;
}

#timelineRange::-moz-range-thumb,
#volumeRange::-moz-range-thumb {
    width: 14px;
    height: 14px;
}

#timelineRange::-moz-range-thumb,
#volumeRange::-moz-range-thumb {
    background: #fff;
    border: 0;
    border-radius: 999px;
}


/* ==================================================
   LIVE BADGE
================================================== */

.live-badge {
    position: relative;
}

.live-badge {
    padding: 7px 12px 7px 28px;
}

.live-badge {
    background:
        linear-gradient(
            135deg,
            #8e0e00,
            #e9401b 60%,
            #ff7b00
        );
    border-radius: 999px;
}

.live-badge {
    color: #fff;
}

.live-badge {
    font-family: 'content-font';
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}


/* ==================================================
   LIVE DOT
================================================== */

.live-badge::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
}

.live-badge::before {
    width: 8px;
    height: 8px;
}

.live-badge::before {
    background: #fff;
    border-radius: 999px;
}

.live-badge::before {
    box-shadow:
        0 0 0 rgba(255,255,255,0.70);
}

.live-badge::before {
    animation: livePulse 1.8s infinite;
}


/* ==================================================
   LIVE ANIMATION
================================================== */

@keyframes livePulse {

    0% {
        transform: translateY(-50%) scale(1);
        box-shadow:
            0 0 0 0 rgba(255,255,255,0.60);
    }

    70% {
        transform: translateY(-50%) scale(1.15);
        box-shadow:
            0 0 0 10px rgba(255,255,255,0);
    }

    100% {
        transform: translateY(-50%) scale(1);
        box-shadow:
            0 0 0 0 rgba(255,255,255,0);
    }

}


/* ==================================================
   AUTO HIDE
================================================== */

.player-controls {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.player-controls {
    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;
}

.video_player.controls-hidden .player-controls {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
}

.video_player:not(.controls-hidden) .player-controls {
    pointer-events: auto;
}


/* ==================================================
   POSTER PAUSE
================================================== */

.video_player::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
}

.video_player::before {
    background-image: var(--player-poster);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.video_player::before {
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.video_player.is-paused-poster::before {
    opacity: 1;
}


/* ==================================================
   LIVE PLAY DISABLED
================================================== */

.video_player.live-play-disabled #playPauseBtn {
    display: none;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media screen and (max-width: 768px) {

    .player-controls {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .player-controls {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
    }

    .player-controls {
        padding: 8px;
        border-radius: 18px;
    }

    .controls-left,
    .controls-right {
        gap: 4px;
    }

    .player-controls .control-btn {
        width: 34px;
        height: 34px;
    }

    .player-controls .control-btn svg {
        width: 18px;
        height: 18px;
    }


    /*** HIDE MOBILE ***/

    #backwardBtn,
    #forwardBtn {
        display: none;
    }

    /**
     * ==========================================================================
     * MOBILE VOLUME
     * ==========================================================================
     */

    #volumeRange {
        display: none;
    }

}

@media screen and (max-width: 480px) {

    .player-controls {
        grid-template-columns: auto 1fr auto;
        gap: 6px;
    }

    .controls-left,
    .controls-right {
        gap: 2px;
    }

    .player-controls .control-btn {
        width: 30px;
        height: 30px;
    }

    .player-controls .control-btn svg {
        width: 16px;
        height: 16px;
    }

}