/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*-------------------------------------@DEFAULT-----------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------*/
/*---------------------------------------@POPUP-----------------------------------*/
/*--------------------------------------------------------------------------------*/

body:has( .lightbox ) {
    overflow:hidden
}

.lightbox {
    width:100vw;
    height:100vh;

    display:flex;
    justify-content: center;
    align-items: center;

    padding:0 var(--gap-s);

    position:fixed;
    top:0;
    left:0;
    z-index:9999999;

    opacity: 0;

    transition:all calc(1/3*1s) cubic-bezier(0.4, 0, 0.2, 1);
}

.lightbox .lightbox__button-close {
    width:2em;
    height:2em;

    display:flex;
    justify-content: center;
    align-items: center;
    
    padding:0;

    position:absolute;
    top:2.5vw;
    right:2.5vw;
    z-index:10;

    background-color:white;

    border:0;
    border-radius:100%; 

    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    cursor:pointer;

    transition:all calc(2/10*1s) cubic-bezier(0.4, 0, 0.2, 1);
}
.lightbox .lightbox__button-close:hover {
    background-color:#EBEBEB;
}


.lightbox .lightbox__button-close .button__close__icon {
    width:12px;
} 

.lightbox .lightbox__button-close path {
    stroke:black;
}

.lightbox .lightbox__content {
    max-width:100%;
    max-height:80vh;

    position:relative;
    z-index:9;

    transform: scale(.9);
    opacity: 0;

    overflow-y:scroll;

    transition: 
        transform calc(4/10*1s) cubic-bezier(0.4, 0, 0.2, 1),
        opacity calc(4/10*1s) cubic-bezier(0.4, 0, 0.2, 1);
}

.lightbox .lightbox__content::-webkit-scrollbar {
    width:8px;
    height:8px;
}

.lightbox .lightbox__content::-webkit-scrollbar-track {
    background-color:var(--color-gray-platinum);

    border-radius:8px;
}

.lightbox .lightbox__content::-webkit-scrollbar-thumb {
    background-color:var(--color-gray-battleship);
    border-radius:10px;
}

.lightbox .lightbox__content > img {
    max-width:80vw;
    max-height:80vh;

    object-fit: contain;
}

.lightbox .lightbox__overlay {
    width:100%; 
    height:100%; 

    position:absolute;
    z-index:1;

    background-color: rgba(0,0,0,.95);
}

@media ( min-width: 1025px ) {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------#DEFAULT-----------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

}

@media ( min-width:768px ) and ( max-width:1024px ) {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------$DEFAULT-----------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

}

@media ( max-width:767px ) {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------%DEFAULT-----------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    
    /*--------------------------------------------------------------------------------*/
    /*---------------------------------------%ITEM------------------------------------*/
    /*--------------------------------------------------------------------------------*/

    .lightboxed::before {
        opacity:1;
        visibility: visible;
    }
    
    .lightboxed::after {
        opacity:1;
        visibility: visible;
    } 

    /*--------------------------------------------------------------------------------*/
    /*---------------------------------------%POPUP-----------------------------------*/
    /*--------------------------------------------------------------------------------*/

    .lightbox .lightbox__button-close {
        top:5vw;
        right:5vw;
    }

    .lightbox .lightbox__content p,
    .lightbox .lightbox__content a,
    .lightbox .lightbox__content span,
    .lightbox .lightbox__content h1, 
    .lightbox .lightbox__content h2, 
    .lightbox .lightbox__content h3, 
    .lightbox .lightbox__content h4, 
    .lightbox .lightbox__content h5 {
        word-break: break-word;
    }

    .lightbox .lightbox__content table {
        overflow-x:scroll;
    }

    .lightbox .lightbox__content ul {
        margin-left:16px;
        padding:0;

        list-style-position: inside;
    }

}