/* ==========================================================================
   Caicedo Cleaning
   Thumbnail Gallery Styles
   ========================================================================== */

:root{

    --thumb-size:95px;
    --thumb-height:70px;

    --thumb-radius:10px;

    --thumb-gap:12px;

    --thumb-border:3px;

    --thumb-active:#fc780c;

    --thumb-shadow:0 8px 20px rgba(0,0,0,.15);

}


/* ==========================================================================
   Thumbnail Strip
   ========================================================================== */

.lightbox-thumbnails{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:var(--thumb-gap);

    overflow-x:auto;

    overflow-y:hidden;

    padding:12px 10px;

    margin-top:25px;

    scroll-behavior:smooth;

    scrollbar-width:thin;

}


/* Chrome */

.lightbox-thumbnails::-webkit-scrollbar{

    height:8px;

}

.lightbox-thumbnails::-webkit-scrollbar-track{

    background:rgba(255,255,255,.08);

    border-radius:999px;

}

.lightbox-thumbnails::-webkit-scrollbar-thumb{

    background:var(--thumb-active);

    border-radius:999px;

}


/* ==========================================================================
   Individual Thumbnail
   ========================================================================== */

.lightbox-thumb{

    width:var(--thumb-size);

    height:var(--thumb-height);

    object-fit:cover;

    border-radius:var(--thumb-radius);

    border:var(--thumb-border) solid transparent;

    cursor:pointer;

    opacity:.55;

    flex-shrink:0;

    transition:
        transform .25s ease,
        opacity .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

    user-select:none;

    -webkit-user-drag:none;

    box-shadow:var(--thumb-shadow);

}


/* ==========================================================================
   Hover
   ========================================================================== */

.lightbox-thumb:hover{

    opacity:1;

    transform:translateY(-3px) scale(1.05);

}


/* ==========================================================================
   Active
   ========================================================================== */

.lightbox-thumb.active{

    opacity:1;

    border-color:var(--thumb-active);

    transform:scale(1.08);

}


/* ==========================================================================
   Keyboard Accessibility
   ========================================================================== */

.lightbox-thumb:focus-visible{

    outline:none;

    border-color:var(--thumb-active);

    box-shadow:
        0 0 0 3px rgba(252,120,12,.25),
        var(--thumb-shadow);

}


/* ==========================================================================
   Disabled Images
   ========================================================================== */

.lightbox-thumb.loading{

    filter:blur(3px);

    opacity:.35;

}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media(max-width:900px){

    :root{

        --thumb-size:80px;

        --thumb-height:60px;

        --thumb-gap:10px;

    }

}


@media(max-width:600px){

    :root{

        --thumb-size:65px;

        --thumb-height:50px;

        --thumb-gap:8px;

    }

    .lightbox-thumbnails{

        justify-content:flex-start;

        padding-left:5px;

        padding-right:5px;

    }

}


@media(max-width:420px){

    :root{

        --thumb-size:58px;

        --thumb-height:45px;

    }

}


/* ==========================================================================
   Optional Fade at the Ends
   ========================================================================== */

.lightbox-thumbnails{

    position:relative;

}

.lightbox-thumbnails::before,
.lightbox-thumbnails::after{

    content:"";

    position:sticky;

    top:0;

    width:20px;

    height:100%;

    pointer-events:none;

    z-index:2;

}

.lightbox-thumbnails::before{

    left:0;

    background:linear-gradient(
        to right,
        rgba(0,0,0,.35),
        transparent
    );

}

.lightbox-thumbnails::after{

    right:0;

    background:linear-gradient(
        to left,
        rgba(0,0,0,.35),
        transparent
    );

}