// NibblePoker CSS Theme - CC0 1.0 (Public Domain)

/* Site > Layouts > Generic */

/* Site > Layouts > Generic > Main Grid */

body.layout-generic {
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-template-rows: min-content 1fr min-content;
	gap: 0;
	
	& > nav {
		grid-column: 1;
		grid-row: 1 / span 2;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: #{$z-index-sidebar};
	}
	
	& > header {
		grid-column: 2;
		grid-row: 1;
		
		// Inner content
		display: grid;
		grid-template-columns: 1fr min-content;
		grid-template-rows: min-content;
		
		& > h1 {
			grid-column: 1;
		}
		
		& > #lang-selector {
			grid-column: 2;
		}
	}
	
	& > main {
		grid-column: 2;
		grid-row: 2;
		overflow-x: hidden;
		overflow-y: auto;
		position: relative; // Helps with some absolute alignments inside it
	}
	
	& > footer {
		grid-column: 1 / span 2;
		grid-row: 3;
	}
}


/* Site > Layouts > Generic > Mobile Fixes */

@media only screen and (max-width: 768px) {
	body.layout-generic {
		& > nav {
			//border-right: 1px solid #{$color-border-all};
			border-right: 1px solid #{$color-border-main};
		}
		
		& > header {
			grid-column: 1 / span 2;
		}
		
		& > main {
			grid-column: 1 / span 2;
			// TODO: Remove scrolling here
		}
	}
}


/* Site > Layouts > Generic > Sidebar */

body.layout-generic {
	.sidebar {
		width: #{$size-sidebar};
		max-width: #{$size-sidebar};
		min-height: 100%;
		
		&.retracted {
			width: 0;
			padding-left: 0;
			padding-right: 0;
			overflow: hidden;
		}
		
		.sidebar-entry {
			display: flex;
			align-items: center;
			justify-content: left;
		}
	}
}


/* Site > Layouts > Generic > Sidebar > Mobile Fixes */

// Inverting the sidebar's states for mobile devices
@media only screen and (max-width: 768px) {
	body.layout-generic {
		.sidebar {
			width: 0;
			padding-left: 0;
			padding-right: 0;
			overflow: hidden;
			
			&.retracted {
				width: #{$size-sidebar};
				max-width: #{$size-sidebar};
				min-height: 100%;
				overflow: auto;
				overflow-x: hidden;
				// Inherited from .p-m
				padding-left: 1rem;
				padding-right: 1rem;
			}
			
			.sidebar-entry {
				display: flex;
				align-items: center;
				justify-content: left;
			}
		}
	}
}


/* Site > Layouts > Generic > Main Extras */

@media only screen and (max-width: 768px) {
	body.layout-generic {
		main {
			border-left: 0 !important;
			border-radius: 0 !important;
		}
	}
}

@media only screen and (min-width: 768px) {
	body.layout-generic {
		main {
			&.expanded {
				border-left: 0;
				border-radius: 0;
			}
		}
	}
}


/* Site > Layouts > Generic > Transitions */

body.layout-generic {
	main, .sidebar {
		transition: width 0.4s, padding 0.4s, border-width 0.4s, border-radius 0.4s;
		transition-timing-function: cubic-bezier(.25, .8, .25, 1.1);
	}
}