/**
 * Fichier  : /ott/features/swiper/assets/css/controls.css
 * Fonction : contrôles du swiper
 */


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

#library .swiper-controls {
    position: absolute;
    inset: 0;
    z-index: 50;
}

#library .swiper-controls {
    pointer-events: none;
}

#library .swiper-controls {
    opacity: 0;
    visibility: hidden;
}

#library .swiper-controls {
    transition:
        opacity .25s ease,
        visibility .25s ease;
}

#library .swiper-section:hover .swiper-controls {
    opacity: 1;
    visibility: visible;
}


/* ==================================================
   CONTROL POSITIONS
================================================== */

#library .swiper-controls .prev,
#library .swiper-controls .next {
    position: absolute;
    top: 50%;
}

#library .swiper-controls .prev,
#library .swiper-controls .next {
    pointer-events: auto;
}

#library .swiper-controls .prev {
    left: 24px;
}

#library .swiper-controls .next {
    right: 24px;
}

#library .swiper-controls .prev,
#library .swiper-controls .next {
    opacity: 0;
}

#library .swiper-controls .prev,
#library .swiper-controls .next {
    transition:
        opacity .25s ease,
        transform .25s ease;
}

#library .swiper-controls .prev {
    transform: translateY(-50%) translateX(-8px);
}

#library .swiper-controls .next {
    transform: translateY(-50%) translateX(8px);
}

#library .swiper-section:hover .swiper-controls .prev,
#library .swiper-section:hover .swiper-controls .next {
    opacity: 1;
}

#library .swiper-section:hover .swiper-controls .prev {
    transform: translateY(-50%) translateX(0);
}

#library .swiper-section:hover .swiper-controls .next {
    transform: translateY(-50%) translateX(0);
}


/* ==================================================
   CONTROL BUTTON
================================================== */

#library .swiper-controls button {
    position: relative;
    overflow: hidden;
}

#library .swiper-controls button {
    width: 42px;
    height: 42px;
}

#library .swiper-controls button {
    display: flex;
    align-items: center;
    justify-content: center;
}

#library .swiper-controls button {
    cursor: pointer;
}

#library .swiper-controls button {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.04)
        );

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    backdrop-filter: blur(18px);
}

#library .swiper-controls button {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 10px 30px rgba(0,0,0,.35);
}

#library .swiper-controls button {
    transition:
        transform .2s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* ==================================================
   CONTROL BUTTON OVERLAY
================================================== */

#library .swiper-controls button::before {
    content: "";
}

#library .swiper-controls button::before {
    position: absolute;
    inset: 0;
    z-index: 1;
}

#library .swiper-controls button::before {
    background:
        linear-gradient(
            135deg,
            #8e0e00,
            #e9401b 60%,
            #ff7b00
        );
}

#library .swiper-controls button::before {
    opacity: 0;
    transition: opacity .25s ease;
}

#library .swiper-controls button:hover {
    transform: scale(1.04);
}

#library .swiper-controls button:hover::before {
    opacity: 1;
}

#library .swiper-controls button:hover {
    border-color: rgba(255,255,255,.16);
}

#library .swiper-controls button:hover {
    box-shadow:
        0 8px 24px rgba(233,64,27,.35),
        0 0 18px rgba(255,123,0,.18),
        inset 0 1px 0 rgba(255,255,255,.18);
}


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

#library .swiper-controls button svg {
    position: relative;
    z-index: 2;
}

#library .swiper-controls button svg {
    width: 20px;
    height: 20px;
}

#library .swiper-controls button svg path {
    fill: none;
    stroke: #fff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}