/* zoom
--------------------------------------------------------------------------*/
.jgallery {
    .nav-prev-hidden() {
        top: 50%;
        left: -74px;
        opacity: 0;
        .transform( ~"scale( .5 )" );
    }

    .nav-next-hidden() {
        top: 50%;
        right: -74px;
        opacity: 0;
        .transform( ~"scale( .5 )" );
    }
    
    .zoom {        
        -webkit-perspective: 1200px;
        perspective: 1200px;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        z-index: 1;

        .pt-perspective.hide-overflow {
            overflow: hidden;
        }

        .jgallery-container {
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            position: absolute;
            z-index: 1;

            &.pt-page-ontop {
                z-index: 2;
            }

            &.pt-page-current.pt-page-prev {
                z-index: 1;
            }

            &.pt-page-current:not(.pt-page-prev) {
                z-index: 3;
            }
        }

        img {
            top: 50%;
            left: 50%;
            position: absolute;
            z-index: 1;
        }
        
        &.is-link {
            cursor: pointer;
        }

        &.hidden {
            .zoom-container {
                .nav {
                    top: -40px;
                    right: -100px;
                }

                .nav-bottom {
                    bottom: -40px;
                    left: -150px;
                }
            }
        }
    }
        
    .zoom-container {
        position: relative;
        
        .prev {
            .nav-prev-hidden();
        }

        .next {
            .nav-next-hidden();
        }
        
        .jgallery-btn-large {
            margin-top: -30px;
            position: absolute;
            z-index: 10002;
        }
        
        .nav {
            top: 0;
            right: 0;
            z-index: 10002;
            position: absolute;

            .jgallery-btn {
                display: inline-block;
            }
        }
        
        .nav-bottom {
            height: 40px;
            background: #111;
            .transition( ~"all 0.2s" );
            left: 0;
            bottom: -40px;
            right: 0;
            text-align: left;
            z-index: 10002;
            position: absolute;

            .icons {
                background: #111;
                .transition( ~"all 0.2s" );
                float: left;
                position: relative;
                z-index: 1;
                
                [class*="fa-"] {
                    background: #111;
                    .transition( ~"all 0.2s" );
                }
            }

            .jgallery-btn {
                margin-right: 8px;
                background: none;
                display: inline-block;
            }

            .change-album {
                position: relative; 

                .menu {
                    position: absolute;
                    display: none;
                }
                .title {
                    margin-left: -5px;
                    padding: 8px 29px 6px 0;
                    font-size: 14px;
                    background: #111;
                    .transition( ~"all 0.2s" );
                    right: auto;
                    top: 4px;
                    line-height: normal;
                    display: inline-block;
                }

                &.active .menu {
                    display: block;
                }
            }
        }
        
        .overlay .imageLoaderPositionAbsolute {
            top: 50% !important;
        }
        
        .drag-nav {
            top: 16px;
            left: 16px;
            -webkit-transition: all .3s;
            transition: all .3s;
            position: absolute;
            z-index: 2;
            
            img {
                max-width: 180px;
                max-height: 180px;
                display: block;
                
                &.bg {
                    opacity: .75;
                    -webkit-filter: blur( 1px );
                    filter: blur( 1px );
                }
            }
                
            .crop {
                max-width: 100%;
                max-height: 100%;
                overflow: hidden;
                position: absolute;
            }
            
            &.hide {
                top: -186px;
                left: -186px;
                -webkit-transform: scale( 0 );
                transform: scale( 0 );
                -webkit-filter: blur( 5px );
                filter: blur( 5px );
                opacity: 0;
            }
        }
    }

    &:hover {
        .zoom-container {
            .prev {
                left: 0;
                opacity: 1;
                .transform( ~"scale( 1 )" );
                
                &.hidden {
                    .nav-prev-hidden();
                }
            }

            .next {
                right: 0;
                opacity: 1;
                .transform( ~"scale( 1 )" );
                
                &.hidden {
                    .nav-next-hidden();
                }              
            }
        }
    }
}