// NibblePoker.lu CSS - (C) 2023 Bozet Herwin

/* Site > Base */

/* Site > Base > Layout */

/* Site > Base > Layout > Root */

html, body {
	// Do not use 100vh !
	// See: https://stackoverflow.com/a/59020698
	
	min-width: 100vw;
	min-height: 100%;
	width: 100vw !important;
	height: 100% !important;
	max-width: 100vw;
	max-height: 100%;
}

/* Site > Base > Layout > Main Grid */

body {
	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 > Base > Layout > Mobile Fixes */

@media only screen and (max-width: 768px) {
	body {
		& > 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 > Base > Coloring & Fonts */

body {
	background-color: #{$color-background-body};
	
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
	"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

// Overridden by a rule in background.scss !
header, nav, footer {
	background-color: #{$color-background-surround};
}

main {
	background-color: #{$color-background-main};
	// FIXME: Adapt when sidebar is closed !
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.375) inset;
}

/* Site > Base > Sidebar */

// FIXME: Might be easier to have it as absolute, shift it left when closing and using a blank spacing div tbh...
// Or nest content in div, and when retracted move it out at the same speed, idk...
.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;
	}
}

// Inverting the sidebar's states for mobile devices
@media only screen and (max-width: 768px) {
	.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 > Base > Main */


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

/* Site > Base > Transitions */

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);
}


/* // HTML Elements > Layout > Trash */

// FIXME: Move it out too !
.heading-main {
	> h2, > h3, > h4 {
		display: flex;
		align-items: center;
		justify-content: left;
	}
	&.heading-dyn-width-1 {
		min-width: 75%;
	}
}