/* natUIve – Modal */

@import 'natuive-setup';

.n-ovrl {

	z-index: 999999;
	background: #fff;
	background: rgba(255,255,255,.97);
	overflow: hidden;
	overflow-y: scroll;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-top: none;
    -webkit-overflow-scrolling: touch;
    padding-top: 0;

}
	
	.n-ovrl > .content {
		
		overflow-y: scroll;
		position: relative;
		background: transparent;
		height: 100%; // For Android Browser, which doesn't understand the bottom line
// 		height: calc(100% - #{$line-height-em*2});
// 		height: calc(100% - var(--line-height-em)*2);
		padding-top: $line-height-em*2;
		overflow: auto;

	}
	
	.n-ovrl.limited > .content, /* .no-touch */ .n-ovrl.limited > .content {

		background: #666;
    	color: #eee;
    	padding: 0;
    	height: 50vh;
   	    margin-top: 25vh;
	    width: 50vw;
	    margin-left: 25vw;

	}
	
	.n-ovrl .close {

		color: #fff;
		cursor: pointer;
		padding: .75em;
		font-weight: bold;
		background: #000;
		background: rgba(0,0,0,.7);
		width: 100%;
		z-index: 99999;
		top: 0;
		overflow: hidden;
		height: 3em;
	    overflow-x: auto;
	    white-space: nowrap;
		position: fixed;

	}

/* 	.no-touch */ .n-ovrl.headless {
		
		padding-top: 0;

	}

	.n-ovrl > * {
		
		background: #fff;
		position: relative;
		
	}
	
	.overlay-bg {
		
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		cursor: crosshair;
		background: transparent;

	}

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

	.n-ovrl {
		
		&.limited > .content {
		
	    	height: 69vh;
	   	    margin-top: 1vh;
		    width: 80vw;
		    margin-left: 10vw;
		
		}
	
		> .content {
			
			padding-top: $line-height-em;
// 			height: 100%;
	
		}
	
		.close {
			
			height: 1.5em;
			padding: 0 .75em;			
			
		}

	}
	
}

@media (max-height: 512px) and (orientation: landscape) { // Move the close bar to the side, because it's inaccessible with certain toolbar configurations
	
	html.can-touch.nooverflow, html.can-touch.nooverflow body {
	
		height: calc(100% + 1px); // iOS Safari workaround for toolbars
	
	}
	
	.n-ovrl > .content {
		
		padding: 0;

	}

	.n-ovrl .close {
	
		top: calc(50% - 20px);
		left: 2px;
		right: auto;
		bottom: 0;
		width: 40px;
		height: 40px;
		border-radius: 50%;	
		font-size: 0;
		display: flex;
		justify-content: center;
		flex-direction: column;
		
	}

	.n-ovrl .close:after {
		
		content: '╳';
		font-size: 1rem;
		display: inline-block;
		width: 40px;
		text-align: center;

	}
	
	.n-ovrl .n-sldr {
		
		margin: 0;
		height: calc(100% + 1px) !important;

	}

}
