/* natUIve – Lightbox */

@import 'natuive-setup';

.n-sldr > .slider.vertical.lightbox > * {

	height: 100%;

}

.slider.lightbox > * {

	text-align: center;
	position: relative;
	
}

.slider.lightbox.inline > .active {

	display: flex;
	flex-direction: column;
	justify-content: center;
	
}

.n-ovrl .slider.lightbox > * {

	height: 100%;
	overflow: hidden;
	
}

.n-ovrl .slider.lightbox.vertical > * { // Firefox fix

	display: none;

}

.n-ovrl .slider.lightbox.vertical > .active { // Firefox fix

	display: block;

}

.slider.lightbox video {

	display: inline-block;
	width: 100%;
	max-height: 100%;
	vertical-align: middle;
	
}

.slider.lightbox > *:before {

	display: none;

}

.n-ovrl .slider.lightbox > *:before {

	content: ' ';
    display: inline-block;
    vertical-align: middle;  // vertical alignment of the inline element
	height: 100%;
	position: static;
	width: 0;

}

.slider.lightbox > * p { /* Image captions */

	position: absolute;
	bottom: 57px;
	text-align: center;
	color: #fff;
	left: 50%;
	transform: translateX(-50%);
	padding: .2em .5em;
	background: rgba(0, 0, 0, .4);

}

.slider.lightbox.detached-nav > * p, .n-sldr.outside .slider.lightbox > * p {
	
	bottom: 0;
	margin-bottom: .5em;

}

.n-ovrl .lightbox.slider img, .lightbox.inline img {

	cursor: zoom-in;

}

.n-ovrl .lightbox.slider > * > img {
	
	display: none;

}

.lightbox.slider > * > iframe {

	width: 100%;
	height: 100%;
	background: #fff;

}

.can-touch .lightbox.slider > * > iframe {

	pointer-events: none; // Restore lightbox swiping on touch. To do: also allow iframe scrolling.

}

.n-ovrl .lightbox.slider > .active > img.zoom {

	width: auto;
	height: auto;
	max-height: none;
	max-width: none;
	position: absolute;
	top: 50%;
	bottom: 50%;
	left: 50%;
	right: 50%;
	transform: translate3d(-50%, -50%, 0) scale(2);
	zoom: 0.5; // scale(2) + zoom: 0.5 restores fixes the blur imposed by transform. Great in Safari, not so much in Chrome.
	transition: transfrom .2s linear;
	cursor: zoom-out;

}

.n-ovrl .lightbox.slider > .active > img.zoom {

/*
	top: 0;
	bottom: auto;
	left: 0;
	right: auto;
*/
	zoom: 0;
	transform: translate3d(var(--x), var(--y), 0);
// 	transition: none;

}

/*
	@-moz-document url-prefix() {
	
		.n-ovrl .lightbox.slider > .active > img.zoom {
	
			transform: translate3d(-50%, -50%, 0);
			
		}
	
	}
*/


.lightbox.slider > .active:not(.loaded):after { // Loading spinner

	content: '';
	position: absolute;
	display: block;
	top: calc(50% - 20px);
	left: calc(50% - 20px);
	width: 40px;
	height: 40px;
	background-color: #999;
	border-radius: 100%;  
	animation: sk-scaleout 1.0s infinite ease-in-out;

}

@keyframes sk-scaleout { // Loading spinner animation. Thanks to SpinKit

  0% { 

    transform: scale(0);

  } 
  
  100% {

    transform: scale(1.0);
    opacity: 0;

  }

}

.lightbox:not(.slider) a {
	
	display: inline-block;
	vertical-align: middle;
	margin: $line-height-em/2 $line-height-em/4;
// 	margin: var(--line-height-em) calc(var(--line-height-em)/4);
	position: relative;
	
}

	.lightbox a img {
		
		display: block;
		padding-bottom: 0 !important;
		margin: 0 auto;
	
	}
	
	@supports (--a: 1) {
	
		.lightbox a.video:before {
			
			content: '▸';
			border: 1px solid #999;
			position: absolute;
		    min-width: 1.5em;
		    text-align: center;
		    font-size: 2em;
		    line-height: 1em;
		    background: rgba(255,255,255,.8);
		    top: 50%;
		    transform: translate3d(-50%,-50%,0);
		    left: 50%;
	    
		}
	
	}

.lightbox.slider a.button.copy {
	
	position: absolute;
	top: $line-height-em/2;
	right: $line-height-em/2;
	margin: 0;

}

	.lightbox.slider a.button.copy:before {
		
		content: 'Link';
	
	}

.thumbnails {
	
	.slider-nav a {
	
		line-height: 4em;
		width: 4em;
		height: 4em;
		background-size: cover;
		border-radius: 0;
		cursor: zoom-in;
		
	}
	
	&.outside .slider-nav {
		
		position: static;
		transform: none;
		width: calc(100% + 1em);
		max-width: none;
		margin: .5em 0 0 -.5em;
		
	}
	
	&.n-sldr.outside:not(.inline) {
		
		padding-bottom: 4em;
		
	}
	
	&.n-sldr .slider-nav a.active {
	
		text-shadow: 1px 1px 0px #fff, -1px -1px 0px #fff, 0px 1px 0px #fff, 1px 0px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff;
	
	}
	
}

@media (max-height: $screen-narrow-max) {

	.thumbnails.n-sldr {
		
		.slider-nav {
			
			a, a.active {
		
				line-height: 1.5;
				width: 1.5em;
				height: 1.5em;
				color: transparent;
				text-shadow: none;
				
			}
		
		}
		
		.slider.lightbox > * p {
			
			bottom: auto;
		    top: -1.5em;
			
		}

		.slider.lightbox.vertical > * p {
			
			bottom: -1.5em;
			top: auto;
			
		}

	}

}
