/* ======================================= */
/* CSS for control sap.f/DynamicPageTitle  */
/* Base theme                              */
/* ======================================= */

.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle,
.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleOnly > .sapFDynamicPageTitle {
	box-shadow: @sapUiShadowHeader;

	.sapFDynamicPageHeader {
		border-bottom: none;
	}
}

.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {
	.sapFDynamicPageTitleMain {
		.sapFDynamicPageTitleMainContent {
			padding-bottom: 0;
		}
	}
}

.sapFDynamicPageTitle {
	z-index: 4;
	position: relative;
	min-height: 3rem;
	padding: 0.5rem 2rem 0.5rem 3rem;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background: var(--sapObjectHeader_Background);

	.sapFDynamicPageToggleHeaderIndicator.sapUiHidden {
		display: none;
	}

	.sapFDynamicPageTitleExpanded.sapUiHidden *,
	.sapFDynamicPageTitleSnapped.sapUiHidden * {
		visibility: hidden;
	}

	.sapFDynamicPageTitleMain > .sapFDynamicPageTitleMainInner {

		.sapFDynamicPageTitleMainContent .sapMTB {
			padding-left: 0.5rem;
			padding-right: 0.5rem;
		}

		.sapFDynamicPageTitleMainActions {
			padding-left: 0.5rem;
		}
	}

	html.sap-desktop & {

		&.sapFDynamicPageTitleFocus {
			outline: 0.0625rem dotted var(--sapContent_FocusColor);
			outline-offset: -0.0625rem;
		}
	}

	.sapFDynamicPageTitleFocusSpan {
		outline: none;
	}

	.sapFDynamicPageTitleTop {
		display: flex;
		align-items: center;
		justify-content: space-between;

		& > .sapFDynamicPageTitleTopLeft {
			min-height: 1rem;
			width: 75%;

			& > :first-child {
				margin: 0;
			}
		}

		& > .sapFDynamicPageTitleTopRight {
			width: 25%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		&.sapFDynamicPageTitleTopBreadCrumbsOnly > .sapFDynamicPageTitleTopLeft {
			width: 100%;
		}

		&.sapFDynamicPageTitleTopNavActionsOnly > .sapFDynamicPageTitleTopRight {
			width: 100%;
		}
	}

	.sapFDynamicPageTitleMain {
		position: relative;
		display: flex;
		align-items: flex-start;
		flex-direction: row;
		box-sizing: border-box;

		&.sapUiHidden {
			position: absolute;
		}

		& > .sapFDynamicPageTitleMainNavigationArea,
		& > .sapFDynamicPageTitleMainNavigationArea > .sapFDynamicPageTitleMainNavigationAreaInner {
			display: flex;
			align-items: center;
		}
	}

	.sapFDynamicPageTitleActionsBar.sapMTB {
		justify-content: flex-end;
		overflow: visible;
	}
}

 .sapFDynamicPageTitleMainNavigationAreaInner .sapMIBar.sapMTB .sapMBarChild:first-child {
	 margin-left: 0.25rem;
 }

 .sapFDynamicPageTitleMainContent .sapMIBar.sapMTB .sapMBarChild:first-child {
	margin-left: 0;
}

/* Firefox fix due to focus cut out from top and left */
html[data-sap-ui-browser^='ff'].sap-desktop {

	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
		outline: none;
		position: relative;
	}

	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus::before {
		content: '';
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		border: 0.0625rem dotted var(--sapContent_FocusColor);
		pointer-events: none;
	}
}

/* =========== */
/* Title Main  */
/* =========== */

/* Heading area */
.sapFDynamicPageTitleMain > .sapFDynamicPageTitleMainInner {
	display: flex;
	align-items: flex-start;
	flex-grow: 1;
	width: 100%; /* to make Edge work */

	.sapFDynamicPageTitleMainHeading {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		justify-content: space-between;
		min-width: 0;

		.sapFDynamicPageTitleMainHeadingInner,
		.sapFDynamicPageTitleMainHeadingSnappedExpandContent {
			text-overflow: ellipsis;
			white-space: nowrap;
			box-sizing: border-box;
			vertical-align: middle;
		}

		.sapFDynamicPageTitleMainHeadingInner {
			min-width: 1px;
			max-width: 100%;
			color: var(--sapGroup_TitleTextColor);
			margin-top: 0.1875rem;

			/* Override Title styles, required by VD */
			.sapMTitle {
				font-size: var(--sapFontHeader3Size);
			}
		}

		.sapFDynamicPageTitleMainHeadingSnappedExpandContent {
			color: var(--sapContent_LabelColor);
			font-size: @sapMFontMediumSize;
		}

		.sapFDynamicPageTitleMainHeadingSnappedExpandContent.sapFDynamicPageTitleMainSnapContentVisible,
		.sapFDynamicPageTitleMainHeadingSnappedExpandContent.sapFDynamicPageTitleMainExpandContentVisible {
			min-width: 4rem;
			max-width: 100%;
		}
	}

	.sapFDynamicPageTitleMainContent {
		min-width: 0.0625rem;
		padding: 0 0 0 0.5rem;

		&.sapFDynamicPageTitleMainContentHasContent {
			min-width: 3rem;
			flex-grow: 1;
		}
	}

	.sapFDynamicPageTitleMainActions {
		margin-left: auto;
		min-width: 0.0625rem;
		flex-grow: 1;

		&.sapFDynamicPageTitleMainActionsHasContent {
			min-width: 3rem;
		}

	.sapFDynamicPageTitleActionsBar .sapMLabel.sapMLabelMaxWidth,
	.sapFDynamicPageTitleActionsBar .sapMLnk.sapMLnkMaxWidth {
		/* overwriting the existing max-width constraint of sapMLabel and sapMLnk
		because in this context the label/link parent should instead adjust its flex-basis with respect to its content width */
		max-width: none;
	}
  }
}

.sapFDynamicPageTitleMain.sapFDynamicPageTitleMainNoContent > .sapFDynamicPageTitleMainInner {
	width: 60%;
}
.sapFDynamicPageTitleMain.sapFDynamicPageTitleMainNoContent > .sapFDynamicPageTitleMainRight {
	width: 40%;
}

/* Tablet Size */
.sapFDynamicPage-Std-Tablet {

	/* Needed because on some high-end phones in landscape mode,
	the width of the viewport is bigger than 600 (Tablet breakpoint). */
	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnappedTitleOnMobile > .sapFDynamicPageTitle {
		padding: 0 0.25rem 0 2rem;
		min-height: 2rem;
		height: 2rem;
	}

	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {
		padding: 0.5rem 1rem 1rem 2rem;
	}

	.sapFDynamicPageTitle {
		padding: 0.5rem 1rem 0.5rem 2rem;

		.sapFDynamicPageTitleTop > .sapFDynamicPageTitleTopLeft {
			width: 65%;
		}

		.sapFDynamicPageTitleTop > .sapFDynamicPageTitleTopRight {
			width: 35%;
		}

		.sapFDynamicPageTitleTop.sapFDynamicPageTitleTopBreadCrumbsOnly > .sapFDynamicPageTitleTopLeft {
			width: 100%;
		}

		.sapFDynamicPageTitleTop.sapFDynamicPageTitleTopNavActionsOnly > .sapFDynamicPageTitleTopRight {
			width: 100%;
		}
	}
}

.sapFDynamicPageTitle .sapFDynamicPageTitleSnappedTitleOnMobile {
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 1 auto;

	.sapUiIcon {
		flex: 0 0 2rem;
	}
}


.sapFDynamicPageTitleMainSnapContentVisible .sapFDynamicPageTitleSnapped .sapMText {
	overflow: hidden;
}

/* Phone Size */
.sapFDynamicPage-Std-Phone {

	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {

		.sapFDynamicPageTitleMain {

			.sapFDynamicPageTitleMainContent {
				padding-bottom: 0;
			}
		}
	}

	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnappedTitleOnMobile > .sapFDynamicPageTitle {
		padding: 0 0.25rem 0 1rem;
		min-height: 2rem;
		height: 2rem;
	}

	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {
		padding: 0.5rem 0rem 1rem 1rem;
	}

	.sapFDynamicPageTitle,
	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleOnly > .sapFDynamicPageTitle {
		padding: 0.5rem 0rem 0.5rem 1rem;

		.sapFDynamicPageTitleTop > .sapFDynamicPageTitleTopLeft {
			width: 60%;
		}

		.sapFDynamicPageTitleTop > .sapFDynamicPageTitleTopRight {
			width: 40%;
		}

		.sapFDynamicPageTitleTop.sapFDynamicPageTitleTopBreadCrumbsOnly > .sapFDynamicPageTitleTopLeft {
			width: 100%;
		}

		.sapFDynamicPageTitleTop.sapFDynamicPageTitleTopNavActionsOnly > .sapFDynamicPageTitleTopRight {
			width: 100%;
		}
	}
}