/* natUIve – Fold */

@import 'natuive-setup';

.fold {

	position: relative;
	padding: 0 .5em 0 1em;
	margin: 0;
	max-width: 100%;
	z-index: 1;
	
}

	.fold > .label {
		
		margin: 0;
		float: none;
// 		line-height: $line-height * 2;
	// 	line-height: calc(var(--line-height) * 2);
// 		min-height: $line-height-em * 2;
	// 	min-height: calc(var(--line-height-em) * 2);
		text-align: left;
		text-align: start;
		width: 100%;
		cursor: pointer;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		user-select: none;
		cursor: pointer;
		position: relative;
		padding: .75em 0;
		padding-right: 1.5em;
		
	}
	
	.fold > .label:after {
		
		content: '▼';
		position: absolute;
		right: 1em;
		font-size: .5em;
		top: 50%;
		transform: translateY(-50%);
		
	}
	
	.fold.open > .label:after {
		
		content: '▲';
		
	}
	
	.fold.mobile {
		
		padding: 0;
		width: auto;

	}
	
	.fold.mobile > .label:after {
		
		display: none;

	}
	
	.fold.mobile > .label, .fold.mobile > input.trigger {
		
		display: none;
		width: auto;
		line-height: $line-height;
		min-height: $line-height-em;
		height: $line-height-em*2;

	}

	.fold .content { /* hidden fold item */

	    overflow: hidden;
	    cursor: auto;
	    will-change: transform;
// 	    margin-top: - .375*$line-height-em; // Weird offset

	}

	.fold.mobile .content { /* hidden fold item */
		
		overflow: visible;

	}
	
	.fold:not(.open):not(.mobile) > .content, .fold.open input.trigger:checked ~ .content /* also for CSS-only open by default */ {

	    max-height: 0;
	    max-height: var(--height, 0); // Fallback to 0

	}

	.fold:first-of-type .content {

	    padding-top: 0;

	}

	.fold:first-of-type {

	    margin-bottom: 0;

	}

	.fold .content > * {
		
		margin-top: 0;

	}

	.fold > input.trigger:checked ~ .content, .fold.mobile .content/* , .fold > .open input.trigger:not(:checked) ~ div */ {
		
		max-height: none;

	}
	
	.fold.open > input.trigger + .content {
		
		display: inline-block;
		
	}
	
	span.burger {
		
		width: $line-height-em;
		height: $line-height-em;
		line-height: $line-height-em;
		font-size: 2em;
		display: inline-block;
		text-align: center;
		position: relative;
		background: #fff;

	}
	
	span.burger:after {
		
		content: '=';

	}
	
	@supports (--a: 1) { // Newer browsers than Android Browser get 3-lines burger via box-shadow. Lame check if they support CSS variables.

		span.burger:before {
			
			content: '';
			position: absolute;
			left: $line-height-em/6;
			width: $line-height-em/1.5;
			top: $line-height-em/10;
			box-shadow: 0 $line-height-em/6 0 1px #333, 0 $line-height-em/2.4 0 1px #333, 0 $line-height-em/1.5 0 1px #333;
	
		}

		span.burger:after {
			
			display: none;
	
		}

	}	

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

	.fold.mobile > .label, .fold.mobile > input.trigger {
		
		display: inline-block; // Android Browser doesn't support the below version (flex)
		display: flex;
		width: 3em;
		padding: 0;

	}

	.fold.mobile:not(.open) .content {
	
		max-height: 0;
	
	}
	
	.fold.mobile > input.trigger:checked ~ .content, .fold.mobile > input.trigger:checked + .content { // Android Browser doesn't support "~", only "+"
		
		max-height: none;
		
	}
	
	.fold.mobile .content { /* hidden fold item */
		
		overflow: hidden;

	}

	@supports (--a: 1) {

		header.fixed-mobile .fold.mobile {
			
			position: fixed;
		    top: 0;
	   		z-index: 2;
	
		}
	
		header.fixed-mobile .fold.mobile.open {
			
		    bottom: 0;
	
		}
	
		header.fixed-mobile .fold.mobile .content {
			
	// 		overflow: hidden;
			padding: 0 $line-height-em/4;
		    background: #fff;
	
		}
		
		header.fixed-mobile .fold.mobile.open .content {
			
			overflow: auto;
			-webkit-overflow-scrolling: touch;
			position: fixed;
			top: 3em; // header height, shouldn't be hardcoded
			bottom: 0;		
	
		}
	
	}
	
}
