@use "../../../010-settings/"as *;
@use "../../../050-layout/basics"as *;
@use "../../../050-layout/layout_breakpoints" as *;
@use "../../../050-layout/standardpage" as *;
@use "../../../050-layout/layout_container-query" as container-query;
@use "../../../070-components/UI-framework/MainControls/_ui-component_metabar.scss" as metabar;

//== Standard Page
$il-standard-page-small-mainbar-height-w-bottom-safe-area: calc($il-standard-page-small-mainbar-height + 1.2 * env(safe-area-inset-bottom));

/*
*********************
grid-based layout
*********************
*/

// main grid without slates
.il-layout-page {
	background: $il-page-bg;
	display: grid;
	grid-gap: 0px;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto $il-standard-page-header-height 1fr;
    height: 100%;
	overflow: hidden;
	width: 100%;
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	.il-maincontrols-mainbar {
		.il-mainbar-close-slates {
			display: none;
		}
	}

	// main grid with active slates
	&.with-mainbar-slates-engaged {
		grid-template-columns: auto 1fr;

		.il-maincontrols-mainbar {
			width: $il-standard-page-slate-width + $il-mainbar-width;

			// slate
			.il-mainbar-slates {
				display: flex;
				flex-direction: column;
				z-index: $il-standard-page-zindex-mainbar-slates;
				.il-maincontrols-slate {
					overflow-y: auto;
					-webkit-overflow-scrolling: touch;
					min-height: 0;
				}
			}
			// show slate remove btn
			.il-mainbar-close-slates {
				display: flex;
			}
		}
	}
}

// metabar
header {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row: 2;
	z-index: $il-standard-page-zindex-header;
	box-shadow: $il-standard-page-header-shadow-bottom;
}

//Breadcrumbs
.breadcrumbs {
	position: sticky;
	top: 0;
	min-height: $il-standard-page-breadcrumbs-height;
	align-items: center;
	background-color: $il-standard-page-breadcrumbs-bg-color;
	display: flex;
	flex-direction: row;
	z-index: $il-standard-page-zindex-breadcrumbs;
	box-shadow: $il-standard-page-header-shadow-bottom;
}

// system-infos
div.il-system-infos {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row: 1;
	z-index: $il-standard-page-zindex-systeminfo
}

// head-container with logo pagetitle and metabar
.header-inner {
    align-items: center;
    background: $il-standard-page-header-bg-color;
    display: flex;
    flex-direction: row;
    height: $il-standard-page-header-height;
    padding: 0 $il-padding-xlarge-horizontal;
    position: fixed;
    width: 100%;
    justify-content: space-between;
}

// logo-container
.il-logo {
	height: $il-standard-page-logo-height;
	overflow: hidden;
	justify-self: start;
	display: flex;
  	align-items: center;
	a {
		display: block; // so keyboard focus surrounds logo
	}
}

.il-pagetitle {
	font-weight: $il-font-weight-bold;
	display: flex;
	font-size: $il-font-size-large;
	align-items: center;
	min-height: 100%;
	padding-left: 35px; // dynamic value desirable
	color: $il-standard-page-header-page-title-color;
}

.il-header-locator{
	display: none;
}
// mainbar
nav.il-maincontrols {
	grid-column: 1;
	grid-row: 4;
	z-index: $il-standard-page-zindex-maincontrols;
}

// Subgrid mainbar
.il-maincontrols-mainbar {
	display: grid;
	height: 100%;
	grid-template-columns: $il-mainbar-btn-width $il-standard-page-slate-width;
	grid-template-rows: 1fr;
	width: $il-mainbar-width;
	&.engaged {

	}
}

// mainbar
.il-mainbar {
	grid-column: 1;
	grid-row: 1;
	z-index: $il-standard-page-zindex-mainbar;
}

// mainbar slates
.il-mainbar-slates {
	grid-column: 2;
	grid-row: 1;
}

// content
main {
	display: block;
}

.il-layout-page-content {
	&:focus-visible {
		outline: none;
	}
	display: flex;
	flex-flow: column;
	overflow: auto;
	#mainspacekeeper {
	    flex-grow: 1; // stretches content from top to footer
    	width: 100%;
	}
}
#il_center_col {
	.panel-viewcontrols {
		@include container-query.set-container-context(wide-content);
		@include container-query.style-in-context(wide-content) {
			.il-viewcontrol-sortation .label {
				display: none;
			}
		}
	}
}

/*
**************************************************************
       mobile Layout
**************************************************************
*/


@media only screen and (max-width: ($screen-lg-desktop - 1px)) {
	#il_center_col.col-sm-9,
	#il_right_col.col-sm-3 {
		float: none !important;
		width: 100% !important;
	}
}

@media only screen and (max-width: $il-grid-float-breakpoint-max) {
	// main grid without slates
	.il-layout-page {
		background: $il-page-bg;
		display: block;
		overflow: initial;
		width: 100%;
		.nav.il-maincontrols {
			position: fixed;
			bottom: 0;
			z-index: $il-standard-page-zindex-maincontrols;
			width: 100%;
			.il-maincontrols-mainbar {
				display: grid;
				display: -ms-grid;
				-ms-grid-columns: 1fr;
				grid-template-columns: 1fr;
				-ms-grid-rows: 0 $il-standard-page-small-mainbar-height;
				grid-template-rows: 0 $il-standard-page-small-mainbar-height; // for browsers not supporting env()
				grid-template-rows: 0 $il-standard-page-small-mainbar-height-w-bottom-safe-area;

				.il-mainbar-close-slates {
					display: none;
				}
				.il-mainbar {
					-ms-grid-column: 1;
					-ms-grid-row: 2;
					grid-column: 1;
					grid-row: 2;
					box-shadow: $il-mainbar-shadow-top;
				}
				.il-mainbar-slates {
					-ms-grid-column: 1;
					-ms-grid-row: 1;
					grid-column: 1;
					grid-row: 1;
				}
			}
		}
		&.with-mainbar-slates-engaged {
			-ms-grid-columns: 1fr;
			grid-template-columns: 1fr;
			.nav.il-maincontrols {
				-ms-grid-column: 1;
				-ms-grid-row: 3;
				grid-column: 1;
				grid-row: 3;
				height: calc(100% - $il-standard-page-small-header-height);
				.il-maincontrols-mainbar {
					-ms-grid-columns: 1fr;
				    grid-template-columns: 1fr;
					-ms-grid-rows: 1fr $il-standard-page-small-mainbar-height;
					grid-template-rows: 1fr $il-standard-page-small-mainbar-height; // for browsers not supporting env()
					grid-template-rows: 1fr $il-standard-page-small-mainbar-height-w-bottom-safe-area;
					width: 100%;
					.il-mainbar {
						box-shadow: $il-mainbar-shadow-top;
					}
					// slate
					.il-mainbar-slates {
						-ms-grid-column: 1;
						-ms-grid-row: 1;
						grid-column: 1;
						grid-row: 1;
						display: -ms-flexbox;
						display: flex;
						-ms-flex-direction: column;
						flex-direction: column;
						width: 100%;
						z-index: $il-standard-page-zindex-mainbar-slates;
						.il-maincontrols-slate {
							overflow-y: auto;
						}
					}
					// show slate remove btn
					.il-mainbar-close-slates {
						// display: -ms-flexbox;
						display: none;
					}
				}
			}
		}
	}

	// metabar
	header {
		position: -webkit-sticky;
		position: sticky;
		width: 100%;
		top: 0;
	}

	// head-container with logo and metabar
	.header-inner {
		position: relative;
	    height: $il-standard-page-small-header-height;
	    width: 100%;
		box-shadow: $il-standard-page-header-shadow-bottom;
	}

	// mobile logo
	.il-logo {
		width: $il-standard-page-small-logo-width;
	}

	// pagetitle
	.il-pagetitle {
		display: none;
	}

	// breadcrumbs
	.breadcrumbs {
		display: none;
	}

	.il-header-locator {
		display: block;

		.dropdown {
			position: static;
			width: 100%;
			display: flex;
			justify-content: center;
		}
		.dropdown-menu {
			top: $il-standard-page-small-header-height - 1;
			width: 100%;
		}

		.dropdown-toggle {
			display: block;
			max-width: calc(100vw - metabar.$il-metabar-entry-width - $il-standard-page-small-logo-width - 40px);
			background-color: transparent;
			border: none;
			color: $il-neutral-color;
			font-size: $il-font-size-large;
			max-width: 220px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: center;
			&:before {
			    content: " \e606";
			    font-family: "il-icons";
			    font-size: $il-font-size-large;
			    margin-right: $il-padding-base-horizontal;
			}
		}

		.open .dropdown-toggle:before {
			content: " \e604";
		}
		.btn-default:active:hover,
		.btn-default:active:focus,
		.dropdown-toggle.btn-default:focus,
		.open>.dropdown-toggle.btn-default,
		.open>.dropdown-toggle.btn-default:hover
		.open>.dropdown-toggle.btn-default:active,
		.open>.dropdown-toggle.btn-default:active:hover,
		.open>.dropdown-toggle.btn-default:active:focus {
			background: $il-standard-page-header-bg-color;
			border-color: $il-standard-page-header-bg-color;
			color: $il-neutral-color;
			outline: none;
		}

		span.caret {
			display: none;
		}
	}

	// Subgrid mainbar
	.il-maincontrols-mainbar {
		display: block;
		width: 100%;
	}

	// mainbar
	.il-mainbar {
		box-shadow: none;
		display: -ms-flexbox;
		display: flex;
		max-height: $il-standard-page-small-mainbar-height; // for browsers not supporting env()
		max-height: $il-standard-page-small-mainbar-height-w-bottom-safe-area;
		overflow: hidden;
		z-index: $il-standard-page-zindex-mainbar;
	}

	// tools section
	.il-mainbar-tools-button {
		display: -ms-flexbox;
	    display: flex;
		-ms-flex-direction: row;
	    flex-direction: row;
	}

	.il-mainbar-tools-button button {
		height:$il-mainbar-small-btn-height;
		width: $il-mainbar-small-btn-width;
	}

	.il-mainbar-tools-entries {
		button {
			height:$il-mainbar-small-btn-height;
			width: $il-mainbar-small-btn-width;
		}
		&.engaged {
			display: -ms-flexbox;
			display: flex;
			-ms-flex-direction: row;
			flex-direction: row;
		}

		.il-mainbar-tools-entries-bg {
		    height: $il-mainbar-small-btn-height;
		}
	}



	// mainbar triggers
	.il-mainbar-triggers {
	}

	// mainbar slates
	.il-mainbar-slates {
		-ms-grid-column: 2;
		-ms-grid-row: 1;
		grid-column: 2;
		grid-row: 1;
	}

	// mainbar close slates
	.il-mainbar-close-slates {
	}

	// remove tools
	.il-mainbar-remove-tool {
		display: none;
		.il-mainbar-tools-entries.engaged & {
			display: block;
		}
	}

	// content
	main {
		display: block;
	}

	.il-layout-page-content {
		display: flex;
		flex-direction: column;
		min-height: calc(100vh -  $il-standard-page-small-header-height);
		padding-bottom: $il-standard-page-small-mainbar-height;
		> div {
			flex-grow: 1;
		}
	}

	footer {
		margin-bottom: $il-footer-margin-bottom;
	}
}

/*
**************************************************************
       print styles
**************************************************************
*/

@media print {
	html body {
		overflow: visible;
		background: none;

		.il-layout-page {
			display: block;
			overflow: visible;
			background: none;

			header,
			.il-maincontrols,
			.breadcrumbs,
			footer,
			.ilFileDropTargetOverlay {
				display: none !important;
			}
		}
		.il-layout-page-content {
			display: block;
		}
	}
}