import {css} from 'lit';

export default css`
	:host {
		display: block;
		width: 100vw;
		height: 100vh;
		position: relative;
	}

	.egw_fw__layout-default {
		display: grid;
		gap: 0.5em 0.1em;
		border: 1px dotted;

		width: 100%;
		height: 100%;
	}

	.egw_fw__layout-default > * {
		position: relative;
		display: flex;
	}

	.egw_fw__layout-default .egw_fw__banner {
		grid-area: banner;
		grid-column-start: banner-start;
		grid-column-end: banner-end;
	}

	.egw_fw__layout-default .egw_fw__header {
		grid-area: header;
		align-items: center;
	}

	/* To use the sl-split-panel, we need it to have its own space & nest stuff inside */

	.egw_fw__layout-default .egw_fw__divider {
		grid-column-start: sidemenu-start;
		grid-column-end: status-start;
		grid-row-start: main-header;
		grid-row-end: footer;
		display: flex;
		justify-content: stretch;
	}

	.egw_fw__layout-default sl-split-panel {
		width: 100%;
	}

	.egw_fw__layout-default sl-split-panel::part(divider) {
		color: var(--sl-color-primary-500);
	}

	.egw_fw__layout-default .egw_fw__sidemenu {
		overflow-x: hidden;
		overflow-y: auto;
	}

	.egw_fw__layout-default .egw_fw__status {
		overflow-x: hidden;
		overflow-y: auto;
	}

	.egw_fw__layout-default .egw_fw__main-wrapper {
		width: 100%;
		display: grid;
		grid-template-columns: [start] 1fr [end];
		grid-template-rows: [top main-header] fit-content(2em) [main] 1fr [main-footer] fit-content(0px) [ bottom]
	}

	.egw_fw__layout-default .egw_fw__main {
		grid-column-start: start;
		grid-column-end: end;
		grid-row-start: main;
		grid-row-end: main;
		overflow: hidden;
		overflow-x: auto;
	}

	.egw_fw__layout-default .egw_fw__main-header {
		grid-column-start: start;
		grid-column-end: end;
		grid-row-start: main-header;
		grid-row-end: main-header
	}

	.egw_fw__layout-default .egw_fw__main-footer {
		grid-column-start: start;
		grid-column-end: end;
		grid-row-start: main-footer;
		grid-row-end: main-footer
	}

	.egw_fw__layout-default .egw_fw__footer {
		grid-area: footer;
	}


	@media (min-width: 500px) {
		.egw_fw__layout-default {
			grid-template-columns: [start sidemenu-start banner-start header-start footer-start] 200px [sidemenu-end main-start] 1fr [main-end] fit-content(2em) [header-end banner-end end];
			grid-template-rows: [top banner] fit-content(2em) [header] fit-content(2em) [ main-header] fit-content(2em) [main] 1fr [main-footer] fit-content(2em) [footer bottom] fit-content(2em);
		}
	}

	/* Actual styles */

	.egw_fw__header sl-icon-button {
		color: inherit;
	}
`