/* ====================================== */
/* CSS for control sap.ui.layout/FixFlex  */
/* Base theme                             */
/* ====================================== */

/* Class for vertical (default) layout
   ========================================================================== */
.sapUiFixFlex {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
}

/* Flexible child */
.sapUiFixFlexFlexible {
	box-sizing: border-box;

	/* Fixes bug in Chrome 48 where flexbox is broken
		https://github.com/angular/material/issues/6841 */
	min-height: 0;
	min-width: 0;

	flex: 1;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.sapUiFixFlexFlexibleContainer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	& > .sapUiFixFlex {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
}

/* Fixed child */
.sapUiFixFlexFixed {
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	width: 100%;
}

/* Class for horizontal layout
   ========================================================================== */

.sapUiFixFlexRow {
	flex-direction: row;

	& > .sapUiFixFlexFlexible,
	& > .sapUiFixFlexFixed {
		width: auto;
		height: 100%;
	}
}

/* Styles for scrolling
   ========================================================================== */
.sapUiFixFlexInnerScrolling {

	& > .sapUiFixFlexFlexible {
		-webkit-overflow-scrolling: touch;
		overflow: auto;

		.sapUiFixFlexFlexibleContainerGrowing {
			overflow-y: visible;
			width: 100%;
			position: static;
		}
	}

	&.sapUiFixFlexRow {

		& > .sapUiFixFlexFlexible {
			overflow-y: hidden;
		}
	}
}

.sapUiFixFlexScrolling {
	-webkit-overflow-scrolling: touch;
	display: block;

	& > .sapUiFixFlexFlexible {
		display: block;

		& > .sapUiFixFlexFlexibleContainer {
			position: static;
			height: 100%;
		}
	}

	&.sapUiFixFlexRow {
		white-space: nowrap;

		& > .sapUiFixFlexFlexible,
		& > .sapUiFixFlexFixed {
			display: inline-block;
		}
	}
}