/** Datei: themes/default/assets/scss/templates/_default.scss **/
.template {
	$parent: &;
	
	&__ {
		&wrapper {
			display: grid;
			grid-template-rows: $header-height 1fr; // Navbar oben
			grid-template-columns: $sidebar-width 1fr; // Sidebar links
			grid-template-areas:
				"sidebar header"
				"sidebar main";
			height: 100vh;
			width: 100vw;
		}
		
		&header {
			grid-area: header;
			height: $header-height;
			background-color: getThemeColor( content );
			border-bottom: 1px solid getThemeColor( border  );
			display: flex;
			align-items: center;
			padding: 0 1rem;
		}
		
		&sidebar {
			grid-area: sidebar;
			width: $sidebar-width;
			background-color: getThemeColor( content );
			border-right: 1px solid getThemeColor( border  );
			padding: $gap-default;
		}
		
		&logo {
			margin: $gap-wide;
			max-height: #{$gap-wide * 1.5};
			object-fit: contain;
			object-position: left;
		}
		
		&aside {
			grid-area: aside;
			padding: 1rem;
		}
		
		&content {
			grid-area: main;
			padding: $gap-wide;
			overflow-y: auto;
		}
		
		&headline {
		}
		
		&inner {
			display: flex;
			padding: 1.5rem;
			flex-direction: column;
			gap: $gap-default;
			
			.paragraph {
				margin: 0;
			}
		}
	}
	
	&-- {
		@import 'login';
	}
}



/** Datei: themes/default/assets/scss/templates/_login.scss **/
&login {
	gap: 0;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 'main aside';
	
	@container ( orientation: portrait ) {
		grid-template-rows: 1fr 1fr;
		grid-template-columns: 1fr;
		grid-template-areas:
			'main'
			'aside';
	}

	#{$parent} {
		&__ {
			&content {
				justify-content: center;
				align-items: center;
				display: flex;
			}
			
			&inner {
				min-width: 50%;
				background-color: getThemeColor( content );
				border: 1px solid getThemeColor( border  );
				padding: $gap-wide;
			}
			
			&aside {
				background-color: getThemeColor( secondary );
				border-left: 1px solid getThemeColor( secondary, 1, -15 );
				
				display: grid;
				
				img {
					max-width : 50%;
					max-height: 100%;
					margin: auto
				}
			}
		}
	}
}