/**
 * CONTENTS
 *
 * CONTAINER............(()).
 * BASE.................(()).
 *
 * ALV-HEADER
 * alv-header...........(()).
 *
 */

html {
	// displays a scrollbar, so the width of the page is not changing when the lenght of the page is changing
	overflow-y:scroll;
}

html, body {
	height: 100%;
	margin: 0;
}

/*------------------------------------*\
  #CONTAINER
\*------------------------------------*/

.container--landingpage {

	@media screen and (min-width: 480px) {
		padding-top: $margin-x-general;
		padding-bottom: $margin-x-general;
	}

	&:first-child {
		padding-top: 0;
	}
}

.container--light {
	background-color: rgba($main-color-gray-50, 1.0);
}

/*------------------------------------*\
  #BASE
\*------------------------------------*/

/**
 * Common page Layout:	| subnavbar:1/5 | content:3/5 | related:1/5 | OR
 						| subnavbar:1/5 | content-wide:4/5 |
 */

// todo
.base {
	margin-bottom: $margin-x-general;

	@media screen and (min-width: 480px){

		@include make-row();

		// todo: margin-bottom?!

		.base__subnavbar,
		.base__content,
		.base__content--wide,
		.base__content--amstat,
		.base__related	{
			position: relative;
			width: 100%;
			min-height: 1px; // Prevent columns from collapsing when empty

			padding-right: ($grid-gutter-width / 2);
			padding-left:  ($grid-gutter-width / 2);
		}

		.base__subnavbar,
		.base__related {
			@include make-col(1, 5);
		}

		.base__content {
			@include make-col(3, 5);
		}
		.base__content--wide {
			@include make-col(4, 5);
		}

		.base--margin-top {
			margin-top: (2*$breadcrumb-padding-x + $spacer);
		}
	}

	@media screen and (min-width: 480px) and (max-width: 1024px){
		.base__subnavbar,
		.base__related {
			@include make-col(1, 4);
		}

		.base__content {
			@include make-col(2, 4);
		}
		.base__content--wide {
			@include make-col(3, 4);
		}
	}

	@media screen and (min-width: 480px) and (max-width: 768px){
		.base__subnavbar,
		.base__related {
			@include make-col(1, 2);
			order: 1;
		}

		.base__content {
			@include make-col(2, 2);
			order: 2;
		}
		.base__content--wide {
			@include make-col(2, 2);
			order: 2;
		}
	}

	@media screen and (max-width: 479px) {
		display: flex;
		flex-direction: column;
	}

	.base__content--amstat {
		overflow-y: hidden;
	}
}

/**
 * Landingpage Layout: regular: 1/3 and wide: 2/3
 */

.landing-page {

	.landing-page__regular,
	.landing-page__wide,
	.landing-page__half {
		min-height: 1px; // Prevent columns from collapsing when empty
		margin-bottom: $margin-x-general;
	}

	@media screen and (max-width: 479px) {
		.landing-page__content {
			display: none;
		}

		:not(.landing-page__regular--media) .md-whiteframe-1dp:not(.process-container) {
			box-shadow: none;
		}

		.landing-page__regular--media .landing-page--container {
			@include alv-border-radius($alv-box-radius);
		}
	}

	@media screen and (min-width: 480px) {
		@include make-row();

		// todo: margin-bottom?!

		.landing-page__regular,
		.landing-page__wide,
		.landing-page__half {
			position: relative;
			width: 100%;
			min-height: 1px; // Prevent columns from collapsing when empty
			margin-bottom: $margin-x-general;

			padding-right: ($grid-gutter-width / 2);
			padding-left:  ($grid-gutter-width / 2);
		}

		.landing-page__regular {
			@include make-col(1, 3);
		}

		.landing-page__wide {
			@include make-col(2, 3);
		}

		.landing-page__half {
			@include make-col(1, 2);
		}

		.landing-page--container {
			@include alv-border-radius($alv-box-radius);
			background: $main-color-gray-100;

			padding: $alv-box-radius;

			min-height: $landingpages-min-height;
			height: $landingpages-min-height;
		}

		.landing-page--content {
			text-align: center;
			padding: $alv-box-radius;

			//todo or bootstrap?!
			height: 250px;

			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}

	@media screen and (min-width: 480px) and (max-width: 1024px){
		.landing-page__regular:not(.landing-page__regular--third) {
			@include make-col(1, 2);
		}

		.landing-page__wide {
			@include make-col(2, 2);
		}

		.landing-page__half {
			@include make-col(1, 1);
		}
	}
}

/*------------------------------------*\
  #LIST
\*------------------------------------*/
.related-list li {
	margin-bottom: $margin-x-narrow;
}
.related {
	list-style: none;
	padding: 0;

	li {
		padding-left: 1.3em;
		margin-bottom: $margin-x-narrow;

		&:before {
			content: "\f1c1"; /* FontAwesome Unicode */
			font-family: FontAwesome;
			display: inline-block;
			margin-left: -1.3em; /* same as padding-left set on li */
			width: 1.3em; /* same as padding-left set on li */
			vertical-align: center;
		}
	}
}

/*------------------------------------*\
  #HELPER
\*------------------------------------*/

@each $breakpoint in map-keys($grid-breakpoints) {
	@include media-breakpoint-up($breakpoint) {
		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

		.container-#{$infix}-w25 	{ width:  25% !important; }
		.container-#{$infix}-w33  	{ width:  33% !important; }
		.container-#{$infix}-w50  	{ width:  50% !important; }
		.container-#{$infix}-w66  	{ width:  66% !important; }
		.container-#{$infix}-w75  	{ width:  75% !important; }
		.container-#{$infix}-w100  	{ width: 100% !important; }
	}
}