@import '../variables';

.mdk-header-layout {
	height: 100%;
	position: relative;
	overflow: hidden;
	z-index: 0;

	&--fullbleed {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	> .mdk-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}
	
	&[data-fullbleed],
	&[data-has-scrolling-region] {
		> .mdk-header {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}
	}
}
.mdk-header-layout__content {
	position: relative;
	z-index: 0;

	// explicit CSS modifier
  // intended for use with .mdk-header-layout[has-scrolling-region]
	&--fullbleed {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	// explicit CSS modifier
  // intended for use with .mdk-header-layout[has-scrolling-region]
	&--scrollable {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}