/**
 * Fichier  : /ott/player/css/loader.css
 * Fonction : style du loader du player HTML5
 */


/* ==================================================
   LOADER
================================================== */

.player-loader {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.player-loader {
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-loader {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.52),
            rgba(0,0,0,0.72)
        );
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.player-loader {
    opacity: 1;
    pointer-events: auto;
    transition: opacity .25s ease;
}

.video_player:not(.is-loading) .player-loader {
    opacity: 0;
    pointer-events: none;
}


/* ==================================================
   CONTENT
================================================== */

.player-loader-content {
    position: relative;
    overflow: hidden;
}

.player-loader-content {
    padding: 14px 22px;
}

.player-loader-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-loader-content {
    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: 999px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 10px 30px rgba(0,0,0,0.35),
        0 0 25px rgba(255,120,0,0.10);
}


/* ==================================================
   ICON
================================================== */

.player-loader-icon {
    width: 18px;
    height: 18px;
}

.player-loader-icon {
    border: 2px solid rgba(255,255,255,0.28);
    border-top-color: #ff7b00;
    border-radius: 999px;
}

.player-loader-icon {
    animation: playerLoaderSpin .8s linear infinite;
}


/* ==================================================
   TEXT
================================================== */

.player-loader-text {
    color: rgba(255,255,255,0.88);
}

.player-loader-text {
    font-family: 'content-font';
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .2px;
}


/* ==================================================
   ANIMATIONS
================================================== */

@keyframes playerLoaderSpin {

    to {
        transform: rotate(360deg);
    }

}