/**
 * Fichier  : /ott/features/swiper/assets/css/badges.css
 * Fonction : badges du swiper
 */


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

#library .swiper-slide .live-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 30;
}

#library .swiper-slide .live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#library .swiper-slide .live-badge {
    padding: 8px 14px;
}

#library .swiper-slide .live-badge {
    background: rgba(0,0,0,.75);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    backdrop-filter: blur(12px);
}

#library .swiper-slide .live-badge {
    font-family: 'bold-font';
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

#library .swiper-slide .live-badge::before {
    content: "";
}

#library .swiper-slide .live-badge::before {
    width: 8px;
    height: 8px;
}

#library .swiper-slide .live-badge::before {
    background: #ff2d2d;
    border-radius: 50%;
}

#library .swiper-slide .live-badge::before {
    animation: live-pulse 1.5s infinite;
}


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

@keyframes live-pulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(255,45,45,.9);
    }

    70% {
        box-shadow:
            0 0 0 10px rgba(255,45,45,0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(255,45,45,0);
    }

}