/* =========================================================
   BACKGROUND SELECTOR
   ========================================================= */

#backgroundSelector {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 99999;
    font-family: 'Inter', sans-serif;
}


/* Bouton */

#backgroundToggle {

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;

    background: rgba(0,0,0,.65);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    color: rgba(255,255,255,.75);

    cursor: pointer;

    font-size: 18px;

    transition:
        .3s ease;

}


#backgroundToggle:hover {

    color: #fff;

    border-color:
        rgba(255,255,255,.4);

    box-shadow:
        0 0 15px rgba(255,255,255,.12);

    transform: rotate(30deg);

}


/* Panneau */

#backgroundPanel {

    position: absolute;

    left: 0;
    bottom: 52px;

    width: 210px;

    padding: 14px;

    background:
        rgba(15,15,15,.88);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 10px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.65);

    opacity: 0;

    transform:
        translateY(10px)
        scale(.96);

    pointer-events: none;

    transition:
        opacity .25s ease,
        transform .25s ease;

}


#backgroundPanel.show {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;

}


/* Titre */

.background-title {

    font-size: 9px;

    letter-spacing: .3em;

    color: #888;

    margin-bottom: 12px;

    text-transform: uppercase;

}


/* Grille */

#backgroundChoices {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 8px;

}


/* Miniatures */

.background-choice {

    height: 70px;

    border: 1px solid
        rgba(255,255,255,.12);

    border-radius: 5px;

    background-size: cover;

    background-position: center;

    cursor: pointer;

    transition:
        transform .3s ease,
        border-color .3s ease,
        filter .3s ease;

    filter:
        brightness(.7)
        saturate(.8);

}


.background-choice:hover {

    transform: scale(1.04);

    border-color:
        rgba(255,255,255,.5);

    filter:
        brightness(1)
        saturate(1);

}


/* Mobile */

@media(max-width:600px) {

    #backgroundSelector {

        left: 12px;
        bottom: 12px;

    }

    #backgroundPanel {

        width: 180px;

    }

}