/* natUIve – Slider – JS-enhanced */

@import 'natuive-setup';

.overlay .slider, .overlay .slider-wrap {
	
	height: 100% !important;
	
}

.overlay .slider-wrap, .overlay .slider-wrap.vertical {
			
	margin-top: $line-height-em*2;
// 		margin-top: calc(var(--line-height-em)*2);
	height: calc(100% - #{$line-height-em*2}) !important;
// 		height: calc(100% - var(--line-height-em)*2);

}		

// To do: move all .slider-wrap (enhanced slider) behind a @supports for modern browsers. Leave the basic CSS-only version for old browsers.

.slider-wrap {
	
	position: relative;
	overflow: hidden;
	max-height: 100%;
	z-index: 1;
	// Fix Safari, Chrome bug where 1px of previous slide is visible during slide
//     padding: 0 .5px;

}

.slider-wrap.vertical.tabs > .slider { // Floats, because flex version is glitching when tab stack is taller than the slider. To do: fix flex version.

	width: 75%;
    float: right;

}

.slider-wrap.vertical.tabs > .slider-nav.row {
	
	width: 25%;
	float: left;
	display: flex;
	flex-direction: column;

}

.slider-wrap.vertical.tabs.right > .slider {

    float: left;

}

.slider-wrap.vertical.tabs.right > .slider-nav.row {
	
	float: right;

}

.slider-wrap.vertical.tabs > .slider-nav a {
	
	display: block;
	box-sizing: border-box;
	padding: $line-height-em .5em;

}

.overlay .slider-wrap {
	
	top: 0px;
	bottom: 0px;
	height: 100%;
	right: 0px;
	left: 0px;
	width: 100%;
	z-index: 1;
// 	background: #fff;
	position: absolute;

}

.aspect > .slider-wrap {
	
	height: 100%;
	position: absolute;

}

.aspect > .slider-wrap.outside {
	
	padding-bottom: 4em;	

}

.aspect > .slider-wrap .slider {
	
	height: 100%;

}

*:-webkit-full-screen  .slider-wrap {

	background: #000;

}
	
*:-moz-full-screen  .slider-wrap {

	background: #000;

}
	
*:fullscreen  .slider-wrap {

	background: #000;

}
	
.slider-wrap .slider {
	
	overflow: visible;
	// Fix Safari bug where 1px of previous slide is visible during slide
// 	margin-left: -.5px;
//     width: calc(100% + 1px); // Eliminate unwanted pixels on the sides
    width: 100%;
    padding: 0; // Because .slider.pad breaks the slider layout

}

/*
.slider-wrap .slider > * {
	
	contain: strict;
	
}

.slider-wrap .slider > .active {
	
	contain: none;
	
}
*/

.overlay .slider-wrap.vertical, .overlay .slider, .overlay .slider > * {
	
	height: 100%;

}

.overlay .slider:not(.vertical) > * {
	
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	
}

.slider-wrap .slider.vertical {
	
	overflow: hidden;
	overflow-y: scroll;

}

.slider-wrap .slider.vertical {
	
	overflow: visible;
	flex-direction: column;

}

.slider-wrap .slider.vertical > *, .slider-wrap .slider.sliding > *:not(.active), .slider-wrap.tabs > .slider-arrow {

	height: auto;
	display: none;

}

.slider-wrap .slider::-webkit-scrollbar {

	height: auto;
	display: none;

}

.slider-wrap > .pad {
	
    padding: 0;
    margin: $line-height-em*2;
    overflow-x: hidden;
	
}

.slider-wrap .slider > * {

// 	display: none; // Only display .active slides. Because if slider has transforms (showing only current slide while others are still in the flow), there are problems with its children of position fixed etc. Breaks non-auto height sliders, can't set to height to the tallest slide. Make it with margin-left after the animation is done.
	display: inline-block;

}

.overlay .slider > * {
	
	padding: 0;

}

.no-flex .slider > * + * { // Fallback
	
	margin-left: -.3em;
	
}

.overlay .slider.vertical > * {
	
	height: 100%;

}

.slider > *.active, .overlay .lightbox.slider > *.active > img {

	display: inline-block;

}

.overlay .slider > img {
	
	padding: 0 !important;
	height: auto;
	
}

.slider-arrow {
	
	position: absolute;
	top: 50%;
	left: $line-height-em/2;
	z-index: 3; /* Stay on top of slider-nav if they are aligned vertically */
	transform: translateY(-50%);
	
}

	.slider-arrow:before {
	
		content: '←';
	
	}

	.vertical > .slider-arrow:before {
	
		content: '↑';
	
	}

	.vertical > .slider-arrow {
		
		top: 1em;
		left: 48%;
		left: calc(50% - 1em);
		text-align: center;
		transform: none;
	
	}

	.slider-arrow.right {
	
		left: auto;
		right: $line-height-em/2;
	
	}

	.slider-arrow.right:before {
	
		content: '→';
	
	}

	.vertical > .slider-arrow.right:before {
	
		content: '↓';
	
	}

	.vertical > .slider-arrow.right {
		
		left: 48%;
		left: calc(50% - 1em);
		right: auto;
		bottom: 1em;
		top: auto;
	
	}
	
	.slider-arrow, .slider-nav a {
		
		cursor: pointer;
		padding: .6em;
		width: 1em;
		height: 1em;
		-webkit-border-radius: 50px;
		border-radius: 50%;
		background: rgba(0, 0, 0, .1);
		color: #fff;
		transition: background-color .2s linear;
		line-height: 1em;
		box-sizing: content-box;
	
	}

.slider-arrow, .slider-nav {

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;

}

.slider-nav {
	
	text-align: center;
	position: absolute;
	bottom: 0;
	white-space: nowrap;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	max-width: 100%;
	max-height: 100%;
	overflow: auto;
	box-sizing: content-box; // For hard scrollbars (mouse without trackpad)
	
}

.top .slider-nav {
	
	bottom: auto;
	top: 0;
	
}

	.slider-nav {
		
		text-align: start;
		justify-content: flex-start;

	}

	.slider-wrap.tabs > .slider-nav a {
		
		-webkit-flex: 0 1 auto;
		flex: 0 1 auto;

	}

	.vertical > .slider-nav {
		
		width: auto;
		display: flex;
		flex-direction: column;
		bottom: auto;
		left: .5em;
		padding: 1em 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
		
	}

	.right.vertical > .slider-nav {
		
	    right: .5em;
	    left: auto;

	}
	
	.slider-nav a {
		
		display: inline-block;
		margin: .5em;
		line-height: 2em;
		padding: 0;
		width: 2em;
		height: 2em;
		text-align: center;
		
	}
	
	.slider-wrap:not(.vertical) .slider-nav a:first-child {
		
		margin-left: 0;
		
	}
	
	.slider-nav a:last-child {
		
		margin-right: 0;
		
	}
	
	.thumbnails .slider-nav a {
		
		line-height: 4em;
		width: 4em;
		height: 4em;
		background-size: cover;
		border-radius: 0;
		
	}
	
	.thumbnails.outside .slider-nav {
		
		position: static;
		transform: none;
		
	}
	
	.slider-wrap.thumbnails.outside:not(.inline) {
		
		padding-bottom: 4em;
		
	}

	.slider-wrap .slider.vertical > .active, .vertical > .slider-nav a {
		
		display: block;
		overflow: visible;
		
	}
		
	.slider-nav a.active {
	
		background-color: rgba(0, 0, 0, .2);
		color: inherit;
	
	}

	.slider-wrap.tabs > .slider-nav {
		
		right: auto;
		position: static;
		transform: none;
		
	}

	.slider-wrap.tabs > .slider-nav.row {
		
		padding: 0;
		margin: 0;
		width: auto;

	}
	
	.full-window .slider-wrap.tabs > .slider-nav {
		
		position: absolute;
		bottom: 0;
		padding: 0;
	
	}
	
	.slider-wrap.tabs > .slider-nav a {
		
		text-indent: 0;
		width: auto;
		height: auto;
		display: table-cell;
		text-align: start;
		border-radius: 0;
		line-height: $line-height;
// 		line-height: var(--line-height);
		padding: 0 .5em;
		-webkit-flex: 1;
		flex: 1;
		margin: 0;
		white-space: normal;
	
	}

