@openui5/sap.m/src/sap/m/themes/base/GenericTile.less

OpenUI5 UI Library sap.m

/* ================================== */
/* CSS for control sap.m/GenericTile  */
/* Base theme                         */
/* ================================== */

.sapMGT {
	display: inline-block;
	text-decoration: none;
	border-radius: var(--sapTile_BorderCornerRadius);
	position: relative;
	outline: none;
	box-sizing: border-box;
	background-position: 0;
	background: var(--sapTile_Background);
	border: 1px solid var(--sapTile_BorderColor);
	box-shadow: @sapUiShadowLevel0;
	vertical-align: top;

		& .sapMNCValue {
				justify-content: flex-start;
		}

		& .sapMNCValue.WithoutMargin {
			justify-content: flex-start;
		}
	}

.sapMGTCriticalBorder {
	height: 100%;
	width: 0.25rem;
	position: absolute;
	left: -1px;
	top: -1px;
	border-radius: 0.25rem 0 0 0.25rem;
	border: 1px solid;
}

.sapMGTCriticalBorder.Neutral {
	background-color: var(--sapNeutralTextColor);
	border-color: var(--sapNeutralTextColor);
}

.sapMGTCriticalBorder.Good {
	background-color: var(--sapPositiveTextColor);
	border-color: var(--sapPositiveTextColor);
}

.sapMGTCriticalBorder.Critical {
	background-color: var(--sapCriticalTextColor);
	border-color: var(--sapCriticalTextColor);
}

.sapMGTCriticalBorder.Error {
	background-color: var(--sapNegativeTextColor);
	border-color: var(--sapNegativeTextColor);
}

.sapMGTContentPlaceholder {
	outline: none;
	width: 300px;
	height: 100px;
	box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.10);
	border-radius: 4px;
}

.sapMGTContentPlaceholder:focus::before {
	content: '';
	display: block;
	position: absolute;
	left: 1px;
	bottom: 1px;
	right: 1px;
	top: 1px;
	border: 1px dotted var(--sapContent_FocusColor);
	pointer-events: none;
}

.sapMGTContentShimmerPlaceholderItem,
.sapMTileCntContentShimmerPlaceholderItem {
	padding: 1rem 1rem 0 1rem;
	box-sizing: border-box;
	display: flex;
	position: relative;
	align-items: center;
	flex: 1 1 auto;

	&.sapMGTContentShimmerPlaceholderWithChart.sapMGTContentShimmerPlaceholderWithDescription,
	.sapMTileCntContentShimmerPlaceholderWithDescription {
		height: 6rem;
	}

	.sapMGTContentShimmerPlaceholderImg {
		margin: 0 0.75rem 0 0;
		height: 2rem;
		width: 2rem;
		display: inline-block;
	}

	.sapMGTContentShimmerPlaceholderRows,
	.sapMTileCntContentShimmerPlaceholderRows {
		flex-grow: 1;

		.sapMGTContentShimmerPlaceholderItemText {
			height: 0.5rem;
			margin-bottom: 0.5rem;
			width: 80%;
		}

		.sapMGTContentShimmerPlaceholderItemTextFooter,
		.sapMTileCntContentShimmerPlaceholderItemTextFooter {
			height: 0.5rem;
			margin-bottom: 0.5rem;
			margin-top: 0.5rem;
			width: 80%;
			top: 3rem;
		}

		.sapMGTContentShimmerPlaceholderItemBox,
		.sapMTileCntContentShimmerPlaceholderItemBox {
			height: 2rem;
			margin-bottom: 0.5rem;
			margin-top: 0.5rem;
			width: 20%;
			top: 3rem;
		}

		.sapMGTContentShimmerPlaceholderItemBoxSmall {
			height: 3.75rem;
			margin-bottom: 0.5rem;
			margin-top: 0.5rem;
		}

		.sapMGTContentShimmerPlaceholderItemHeader {
			height: 1rem;
			margin-bottom: 0.5rem;
			margin-top: 0.5rem;
		}
	}
}

.sapMGT.OneByOne.sapMTileSmallPhone.sapMGTStateLoading {

	.sapMGTContentShimmerPlaceholderItem {

		.sapMGTContentShimmerPlaceholderItemHeader {
			width: 7.25rem;
		}

		.sapMGTContentShimmerPlaceholderItemText {
			width: 5.875rem;
		}
	}
}

.sapMGTContentShimmerPlaceholderItemOneByOne {
	padding: 1rem 1rem 0 1rem;
	box-sizing: border-box;
	display: flex;
	position: relative;
	align-items: center;
	flex: 1 1 auto;

	&.sapMGTContentShimmerPlaceholderWithChart.sapMGTContentShimmerPlaceholderWithDescriptionOneByOne {
		height: 6rem;
	}

	.sapMGTContentShimmerPlaceholderImg {
		margin: 0 0.75rem 0 0;
		height: 2rem;
		width: 2rem;
		display: inline-block;
	}

	.sapMGTContentShimmerPlaceholderRowsOneByOne {
		flex-grow: 1;

		.sapMGTContentShimmerPlaceholderIconOneByOne {
			height: 2rem;
			width: 2rem;
			margin: auto;
			margin-bottom: 0.5rem;
			margin-top: 0.5rem;
		}

		.sapMGTContentShimmerPlaceholderItemTextOneByOne {
			height: 0.5rem;
			margin-bottom: 0.5rem;
		}
	}
}

.sapMGTContentShimmerPlaceholderItemTwoByHalf {
	padding: 0 1rem 0 0;
	box-sizing: border-box;
	display: flex;
	position: relative;
	align-items: center;
	flex: 1 1 auto;

	.sapMGTContentShimmerPlaceholderWithDescriptionTwoByHalfIconLoaded {
		padding: 0;
		flex: none;
	}

	&.sapMGTContentShimmerPlaceholderWithChart.sapMGTContentShimmerPlaceholderWithDescriptionTwoByHalf {
		height: 6rem;
	}

	.sapMGTContentShimmerPlaceholderImg {
		margin: 0 0.75rem 0 0;
		height: 2rem;
		width: 2rem;
		display: inline-block;
	}

	.sapMGTContentShimmerPlaceholderRowsTwoByHalf {
		flex-grow: 1;
		display: flex;
		align-items: center;

		.sapMGTContentShimmerPlaceholderIconTwoByHalf {
			height: 2rem;
			width: 2rem;
			margin-bottom: 0.5rem;
			margin-top: 0.5rem;
		}

		.sapMGTContentShimmerPlaceholderItemTextTwoByHalf {
			height: 0.5rem;
			width: 80%;
			margin-left: 0.75rem
		}
	}
}

.sapMGTContentShimmerPlaceholderItemTwoByHalf.sapMGTContentShimmerPlaceholderWithDescriptionTwoByHalfIconLoaded {
	padding: 0;
	flex: none;
}

.sapMGTLoadingShimmer,
.sapMTileCntLoadingShimmer{
	.sapMGTLoadingShimmerMixin();
}

.sapMGTLoadingShimmerMixin() {
	background-color: var(--sapContent_Placeholderloading_Background);
	background-image: var(--sapContent_Placeholderloading_Gradient);
	background-repeat: no-repeat;
	background-size: 800px 144px;
	position: relative;
	border-radius: 0.25rem;

	[data-sap-ui-animation-mode='full'] & {
		animation-duration: 2.5s;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		animation-name: placeHolderShimmer;
		animation-timing-function: linear;
	}

	[data-sap-ui-animation-mode='basic'] &,
	[data-sap-ui-animation-mode='minimal'] & {
		animation-duration: 8s;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		animation-name: placeHolderShimmer;
		animation-timing-function: linear;
	}
}

@keyframes placeHolderShimmer {

	0% {
		background-position: -468px 0;
	}

	100% {
		background-position: 468px 0;
	}
}

@keyframes placeHolderShimmer {

	0% {
		background-position: -468px 0;
	}

	100% {
		background-position: 468px 0;
	}
}

.sapMGTBackgroundImage {
	background-clip: padding-box;
	background-color: inherit;
	background-position: inherit;
	background-size: cover;
}

.sapMGT.sapMPointer * {
	cursor: pointer;
}

.sapMGT:focus {
	outline: none;
}

.sapMGT.OneByOne {
	width: 11rem;
	height: 11rem;
}

.sapMGT.TwoByOne {
	width: 22.5rem;
	height: 11rem;
}

.sapMGT.OneByHalf {
	width: 11rem;
	height: 5.25rem;
}

.sapMGT.TwoByHalf {
	width: 22.5rem;
	height: 5.25rem;
}

.sapMGT.sapMGTGridContainerOneRemGap.TwoByOne {
	width: 23rem;
}

.sapMGT.sapMGTGridContainerOneRemGap.TwoByHalf {
	width: 23rem;
	height: 5rem;

	.sapMGTHdrContent.TwoByHalf {
		line-height: normal;
	}

	.sapMGTContent {
		height: 2.6875rem;

		.sapMTileCnt {

			.sapMTileCntContent {
				margin-top: 0.125rem;

				.sapMImageContentImageIcon {
					font-size: 1.625rem;
					max-height: 1.625rem;
				}
			}

			.sapMTileCntFtrTxt {
				bottom: 0.75rem;
			}
		}
	}
}

.sapMGT.sapMGTGridContainerOneRemGap.OneByHalf {
	height: 5rem;

	.sapMGTContent {
		height: 2.6875rem;

		.sapMTileCnt {

			.sapMTileCntContent {
				margin-top: 0.125rem;

				.sapMImageContentImageIcon {
					font-size: 1.625rem;
					max-height: 1.625rem;
				}
			}

			.sapMTileCntFtrTxt {
				bottom: 0.75rem;
			}
		}
	}
}

.sapMTileSmallPhone.sapMGT.sapMGTGridContainerOneRemGap.TwoByOne {
	width: 19.5rem;
}

.sapMTileSmallPhone.sapMGT.sapMGTGridContainerOneRemGap.TwoByHalf {
	width: 19rem;
	height: 4.125rem;

	.sapMGTContent {
		height: 2.375rem;

		.sapMTileCnt {

			.sapMTileCntContent {
				margin-top: 0.25rem;

				.sapMImageContentImageIcon {
					max-height: 1.625rem;
				}
			}
		}
	}
}

.sapMTileSmallPhone.sapMGT.sapMGTGridContainerOneRemGap.OneByHalf {
	width: 9.25rem;
	height: 4.125rem;

	.sapMGTContent {
		height: 2.375rem;

		.sapMTileCntContent {
			margin-top: 0.25rem;
		}
	}
}

.tileWithAppInfo {

	.sapMGTTInfoContainer {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		min-width: 0;
	}

	.sapMGTTInfo {
		padding: 0.125rem 1rem 0.125rem 0.25rem;
		text-transform: uppercase;
		margin-bottom: 0.5rem;
		border-radius: 0.125rem 0 0 0.125rem;
		background-color: var(--sapInfobar_NonInteractive_Background);
		width: fit-content;

		.sapMText{
			font-size: var(--sapFontSmallSize) ;
			text-align: right !important;
		}

		.sapMGTSystemInfoText{
			display: flex;
			justify-content: flex-end;

			.sapMText {
				color: var(--sapTile_TitleTextColor);
				padding-left: 0.15rem;
			}
		}

		.sapMGTAppAndSystemInfoDivider{
			height: 0.25rem;
		}

		.sapMGTAppShortcutText {
			display: flex;
			justify-content: flex-end;

			.sapMText {
				color: var(--sapTile_TextColor);
			}
		}
	}
}

.OneByOne.tileWithAppInfo {

	.sapMGTTInfo {
		margin-bottom: 0.4rem;
		max-width: 7rem;
	}

	.sapMGTContent.appInfoWithFooter {

		.sapMTileCnt {
			height: 3.5rem;
			width: 100%;

			.sapMTileCntContent {

				.sapMNC {
					height: 1.75rem;

					.sapMNCLargeFontSize {
						font-size: 1.75rem;
						height: 1.75rem;

						&::before {
							padding-bottom: 0;
							margin-top: 0.5rem;
						}
					}

					.sapMNCIndScale {
						padding: 0;
						padding-left: 0.5rem;
					}
				}

				.sapMImageContent {
					height: 1.75rem;

					.sapMImageContentImageIcon {
						padding-bottom: 0;
						height: inherit;
						top: 0.1rem;
					}

					.sapMImg.sapMImageContentImageIcon {
						top: 0.2rem;
					}
				}
			}

			.sapMTileCntFtrTxt {
				bottom: -0.15rem;
			}
		}
	}

	.sapMGTContent.appInfoWithoutFooter {

		.sapMTileCnt {
			height: 3.5rem;
			width: 100%;

			.sapMTileCntContent {
				height: 3.25rem;

				.sapMNC {
					height: 3.25rem;
				}

				.sapMImageContent {
					height: 3.25rem;

					.sapMImageContentImageIcon.sapUiIcon {
						font-size: 1.75rem;
						padding-bottom: 0;
						top: 0;
					}

					.sapMImg {
						top: 0.3rem;
					}
				}
			}
		}
	}

	.sapMGTTInfoContainer {
		height: 2.75rem;
	}

	.appInfoWithoutTileCnt {
		display: flex;
		flex-direction: column-reverse;

		.sapMGTTInfo {
			margin-bottom: 0.3rem;
		}
	}
}

.OneByOne.sapMTileSmallPhone.tileWithAppInfo {

	.sapMGTHdrContent.OneByOne {
		height: 3rem;
	}

	.sapMGTContent {

		.sapMGTTInfoContainer{

			.sapMGTTInfo {
				margin-bottom: 0.5rem;
				padding-right: 0.5rem;
			}
		}
	}

	.sapMGTContent.appInfoWithFooter {

		.sapMTileCnt {
			height: 3rem;

			.sapMTileCntContent {

				.sapMImageContent {

					.sapMImageContentImageIcon {
						top: -0.1rem;
					}
				}
			}
		}

		.sapMNCValue {
			margin-bottom: 0.3rem;

			.sapMNCLargeFontSize {
				padding: 0;
			}

			.sapMNCLargeFontSize.sapMNCIconImage {
				padding-right: 0.375rem;
			}
		}
	}

	.sapMGTContent.appInfoWithoutFooter {

		.sapMTileCnt {
			height: 3rem;
		}

		.sapUiIcon {
			top: 0;
		}

		.sapMNCInner.WithoutMargin {
			top: 0;
		}
	}

	.appInfoWithoutTileCnt {

		.sapMGTTInfoContainer {

			.sapMGTTInfo {
				margin-bottom: 0.3rem;
			}
		}
	}

	.sapUiIcon.sapUiIconMirrorInRTL.sapMImageContentImageIcon {
		margin-bottom: 0.25rem;
	}
}

.TwoByHalf.tileWithAppInfo {

	.sapMGTWrapper {
		height: inherit;
		display: flex;
		justify-content: space-between;
		gap: 0.25rem;

		.sapMGTWrapperCnt {

			.sapMGTHdrContent {
				max-width: 13.5rem;
				padding-right: 0;
			}

			.sapMGTContent {

				.sapMTileCnt {

					.sapMTileCntContent {
						padding-right: 0;
					}
				}
			}
		}
	}

	.sapMGTTInfoContainer {
		max-width: 13.5rem;

		.sapMGTTInfo {

			.sapMGTAppShortcutText {

				.sapMText {
					max-width: 13ch;
				}
			}
			.sapMGTSystemInfoText {

				.sapMText {
					max-width: 13ch;
					padding-left: 0.2rem;
				}
			}
		}
	}
}

.TwoByOne.tileWithAppInfo {

	.sapMGTContent {

		.sapMGTTInfoContainer {

			.sapMGTTInfo {
				max-width: 10.875rem;
			}
		}
	}

	.sapMGTContent {
		display: flex;
		justify-content: space-between;
		margin-top: 0.5rem;

		.sapMTileCnt {

			.sapMTileCntContent {
				padding-right: 0;
			}

			.sapMTileCntFtrTxt {
				margin-right: 0;
			}
		}
	}

	.appInfoWithoutTileCnt {
		flex-direction: row-reverse;
	}

	.sapMGTTInfoContainer {
		max-width: 10.875rem;
		margin-left: 0.25rem;
		margin-bottom: 0.5rem;

		.sapMGTTInfo {

			.sapMGTAppShortcutText {
				text-align: right;
			}
		}
	}
}

.OneByHalf {

	.sapMGTHdrContent {
		height: 1.25rem;

		.sapMGTHdrTxt {

			.sapMText {
				display: block;
			}
		}
	}

	.sapMGTContent {
		height: 3rem;

		.sapMTileCnt {
			height: 100%;

			.sapMTileCntContent {
				height: 2.5rem;

				.sapMNCLargeFontSize {
					font-size: 1.5rem;
					padding-bottom: 0.55rem;
					height: auto;
					align-self: flex-end;
				}

				.sapMNCIndScale.sapMNCLargeFontSize {
					padding: 0.375rem 0 0.65rem 0.25rem;
				}

				.sapMImageContent {
					display: none;
				}
			}

			.sapMTileCntContent > div:first-child {
				height: 100%;
			}
		}
	}
}

.TwoByHalf {

	.sapMGTHdrContent {
		height: 1.25rem;

		.sapMGTHdrTxt {

			.sapMText {
				display: block;
			}
		}
	}

	.sapMGTContent {
		height: 3rem;

		.sapMTileCnt {
			height: 100%;

			.sapMTileCntContent {
				height: 2.5rem;

				.sapMNCLargeFontSize {
					font-size: 1.5rem;
					padding-bottom: 0.55rem;
					height: auto;
					align-self: flex-end;
				}

				.sapMNCIndScale.sapMNCLargeFontSize {
					padding: 0.375rem 0 0.65rem 0.25rem;
				}

				.sapMImageContentImageIcon {
					max-height: 1.75rem;
					bottom: auto;
				}
			}

			.sapMTileCntContent > div:first-child {
				height: 100%;
			}
		}
	}
}

.sapMGTHdrTxt,
.sapMGTHdrTxt > .sapMGTTitle,
.sapMGTSubHdrTxt,
.sapMGT .sapMGTContent {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
}

.sapMGTHdrTxt > .sapMGTTitle,
.sapMGenericTileFtrFldTxt>.sapMGTFailed,
.sapMTileCntFtrFldTxt>.sapMGTFailed {
	cursor: inherit;
}

.sapMGTInnrCnt {
	display: inline-block;
}

.sapMGTContent {
	height: 6.375rem;
	display: inline-block;
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
}

.sapMGTHdrTxt {
	overflow: hidden;

	.sapMText {
		display: inline;
	}
}

/* added line height so that it is not overridden by other controls. */
.sapMGT {

	.sapMText {
		line-height: normal;
	}
}

.sapMGTHdrTxt > .sapMText {
	color: var(--sapTile_TitleTextColor);
	font-weight: normal;
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontHeader5Size);
}

.sapMGTSubHdrTxt > .sapMText,
.sapMGTSubHdrTxt {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--sapFontFamily);
	font-size: @sapMFontMediumSize;
	font-weight: normal;
	color: var(--sapTile_TextColor);
}

.sapMGTHdrContent {
	height: 3.625rem;
	padding-top: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.OneByOne.tileWithAppInfo {

	.sapMGTHdrContent.OneByOne {
		height: 3.4rem;
	}
}

.sapMGTHdrContent.Stretch {
	height: 42%;
	padding-top: 0;
}

.sapMGT.sapMGTBackgroundImage.Stretch {

	.sapMGTContent {
		height: 58%;
		margin-top: 1px;
	}
}

.sapMGTHdrIconImage {
	float: right;
	width: 2.5rem;
	min-height: 2.5rem;
	font-size: 2.5rem;
	font-family: var(--sapFontHeaderFamily);
	font-weight: @sapUiFontHeaderWeight;
	color: var(--sapTile_IconColor);
}

.sapMGenericTileFtrFldTxt,
.sapMTileCntFtrFldTxt {
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontSmallSize);
	color: var(--sapTile_TextColor);
}

.sapMGenericTileFtrFldIcn,
.sapMTileCntFtrFldIcn {
	color: var(--sapTile_TextColor);
}

.sapMGT:focus:not([tabindex]) {
	border-color: transparent;
}

.sapMGTOverlay {
	background-color: var(--sapTile_Background);
	border-radius: var(--sapTile_BorderCornerRadius);
}

.sapMGTOverlayMixin(@offset: 0px, @z-index: 0) {
	position: absolute !important;
	pointer-events: none;
	left: @offset;
	top: @offset;
	right: @offset;
	bottom: @offset;

	& when not (@z-index = 0) {
		z-index: @z-index;
	}
}

.sapMGT.sapMGTScopeActions,
.sapMGT.sapMGTScopeSingleAction {

	.sapMTileCntContent {
		position: relative;

		&::after {
			.sapMGTOverlayMixin();
			display: block;
			content: '';
			background-color: var(--sapTile_Background);
			opacity: 0.7;
		}
	}

	.sapMGTMoreIcon {
		height: 1rem;
		position: absolute;
		right: 0.75rem;
		bottom: 0.563rem;
		z-index: 1; /* Remark: If increased, this will break FLP footer visualization. */
		color: var(--sapButton_IconColor);

		&:focus {
			outline: none;
		}
	}

	.sapMGTMoreIcon {
		background-color: transparent;
		border: 0;

		.sapMBtnIcon {
			bottom: 1rem;
			left: 0.4rem;
			border: 0;
		}
	}

	.sapMGTRemoveButton {
		width: 1.375rem;
		height: 1.375rem;
		border-radius: 50%;
		padding: 0;
		position: absolute;
		top: -0.375rem;
		right: -0.375rem;
		z-index: 3; /* Remark: If increased, this will break FLP footer visualization. */
		background-color: var(--sapButton_Background);
		color: var(--sapButton_TextColor);
		overflow: visible;

		.sapMBtnFocusDiv {
			display: none;
		}

		.sapMBtnInner,
		.sapMBtnActive.sapMBtnInner {
			width: 100%;
			height: 100%;
			min-width: 0;
			outline-offset: -2px;

			&,
			&:hover,
			&:active,
			&:focus {
				border-color: var(--sapTile_Interactive_BorderColor); /* Explicitly needed here, because the border would otherwise be transparent in HCB on press */
				border-radius: 50% !important; /* Made important because the style is not to be overridden in any way */
			}
		}

		.sapMBtnIcon {
			font-size: 0.75rem;
			margin: 0;
			width: 100%;

			&::before {
				position: relative;
				top: -0.15rem;
				left: 0;
			}
		}

		&:focus > .sapMFocusable {
			outline: none;
			border-radius: 50%;
		}

		/* The touch area has a different size and is slightly moved to the left and bottom */
		&::before {
			content: '';
			color: var(--sapButton_IconColor);
			position: absolute;
			top: -1px;
			bottom: -0.6875rem;
			left: -0.6875rem;
			right: -0.0625rem;
		}
	}
}

.sapUiSizeCompact {

	.sapMGT.sapMGTScopeActions,
	.sapMGT.sapMGTScopeSingleAction {

		.sapMGTMoreIcon {

			.sapMBtnIcon {
				left: -0.3rem;
				bottom: 0.5rem
			}
		}
	}
}

.sapMGT.sapMGTIconMode {

	.sapUiIcon.sapMGTTileIcon {
		text-shadow: var(--sapContent_ContrastTextShadow);
	}
}

.sapMGT.sapMGTScopeActions.sapMGTIconMode {

	.sapMBtn.sapMGTMoreIcon {
		padding: 0;
		height: 0;
		bottom: auto;
		right: 0.5rem;

		&::before {
			content: '';
			position: absolute;
			top: -0.25rem;
			bottom: -2.5rem;
			left: -0.0125rem;
			right: -0.0125rem;
		}

		.sapMBtnIcon {
			bottom: 0;
			left: 0;
			padding-left: 0.625rem;
			padding-right: 0.625rem;
			width: 1rem;
		}
	}
}

.sapUiSizeCompact {

	.sapMGT.sapMGTScopeActions.sapMGTIconMode.TwoByHalf.sapMTileSmallPhone {

		.sapMBtn.sapMGTMoreIcon {

			&::before {
				content: '';
				position: absolute;
				top: -0.1975rem;
				bottom: -1.8875rem;
				left: -0.0125rem;
				right: -0.0125rem
			}

			.sapMBtnInner {
				padding: 0;
				min-width: 0;
			}
		}
	}
}

.sapUiSizeCompact {

	.sapMGT.sapMGTScopeActions.sapMGTIconMode.TwoByHalf {

		.sapMBtn.sapMGTMoreIcon {
			bottom: 0.8rem;

			.sapMBtnIcon {
				padding-left: 0.5rem;
				padding-right: 0.5rem;
			}
		}
	}
}

.sapMGT.sapMGTScopeActions.sapMGTIconMode.TwoByHalf {

	.sapMBtn.sapMGTMoreIcon {
		position: relative;
		bottom: 1rem;
		padding-left: 0.5rem;

		.sapMBtnInner {
			left: 0.2rem;
			padding: 0;
		}
	}
}

.sapMGT.sapMGTScopeActions.sapMGTIconMode.TwoByHalf.sapMTileSmallPhone {

	.sapMBtn.sapMGTMoreIcon {
		.sapMBtnInner {
			left: 0;
		}
	}
}


.sapMGT.sapMGTScopeActions.sapMGTBackgroundImage,
.sapMGT.sapMGTScopeSingleActions.sapMGTBackgroundImage {

	.sapMTileCntContent {

		&::after {
			content: none;
		}
	}

	.sapMGTContent {

		&::before {
			.sapMGTOverlayMixin();
			display: block;
			content: '';
			background-color: var(--sapTile_Background);
			opacity: 0.7;
			border-radius: 0.125rem;
		}
	}
}

/* mixin for flex-box entries */
.sapMGTFlexEntry(@resizable: 0) {
	display: flex;
	align-items: center;
	-webkit-box-flex: @resizable;
	flex: @resizable @resizable auto;
	-webkit-flex: @resizable @resizable auto;
}

/* LINE MODE LIST VIEW */

.sapMGTLineModeListContainer {
	background-color: var(--sapGroup_ContentBackground);
	border: var(--sapTile_BorderColor);
	border-radius: 0.25rem;
	box-shadow: @sapUiShadowLevel0;
}

/* COZY */
.sapUiMedia-GenericTileDeviceSet-small {

	.sapMGTLineMode.sapMGT {
		align-items: center;
		padding: 0.5rem;
		min-height: 2rem;
		max-width: 100%;
		border-radius: 0.25rem;
		transition: background-color 0.2s;
		pointer-events: none;
	}

	.sapMGTLineMode .sapMGTTouchArea {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		pointer-events: auto;
		padding: 0;
		margin: -0.1875rem 0;
		box-sizing: border-box;
	}

	.sapMGTLineMode .sapMGTLineModeHelpContainer {
		.sapMGTFlexEntry(1);
		flex-wrap: wrap;
		overflow: hidden;
	}

	.sapMGTLineMode .sapMGTHdrTxt {
		position: relative;
		font-size: @sapMFontMediumSize;
		display: inline-block;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 100%;
		line-height: 1.375rem;
	}

	.sapMGTLineMode .sapMGTHdrTxt::after {
		content: ' ';
		margin-right: 0.5rem;
	}

	.sapMGTLineMode .sapMGTSubHdrTxt {
		display: inline-block;
		font-size: @sapMFontMediumSize;
		line-height: 1.375rem;
		margin-top: 0;
		max-width: 100%;
	}

	.sapMGTLineMode .sapMGTLineModeFailedIcon {
		align-self: baseline;
		line-height: 1.375rem;
		padding-right: 0.375rem;
		text-align: left;
		font-size: 1.375rem !important;
	}
}

.sapMGTLineMode .sapMGTActionsContainer:not(.sapMGTScopeSingleActionContainer) {
	width: 2rem;

	.sapMGTMoreIcon {
		position: static;
		padding-right: 0.5rem;
	}

	.sapMGTRemoveButton {
		position: absolute;
		top: -1rem;
		left: 1.5rem;
	}
}

.sapMGTLineMode .sapMGTTouchArea .sapMGTScopeSingleActionContainer {

	.sapMGTMoreIcon {
		position: static;
	}

	.sapMGTRemoveButton {
		position: absolute;
		top: -1rem;
		left: 1.5rem;
	}
}

/* ActionsContainer Styles commonly shared with all screen sizes in compact and cozy */
.sapMGTLineMode .sapMGTActionsContainer,
.sapMGTLineMode .sapMGTScopeSingleActionContainer {
	.sapMGTFlexEntry;
	display: flex;
	flex-direction: row;
	align-items: center;
	line-height: 1.375rem;

	&,
	* {
		pointer-events: auto;
	}

	.sapMGTMoreIcon {
		display: block;
		right: -1.5rem;
		bottom: 0.25rem;
		width: 2rem;
	}

	.sapMGTRemoveButton {
		display: block;
		margin: 0 0.3125rem;
		top: -1rem;
		left: -0.5rem;
		z-index: 0; /* Remark: If increased, this will break FLP footer visualization. */

		&::before {
			content: none;
		}

		.sapMBtnIcon::before {
			width: 1.25rem;
			height: 1.5rem;
			padding: 0.75rem 0.3125rem;
			margin-top: -0.75rem;
			left: -0.3rem;
			display: inline-block;
		}
	}
}

.sapMGTLineMode.sapMGTScopeSingleAction {

	.sapMGTMoreIcon.sapMBtnBase {

		.sapMBtnIcon {
			left: 0;
			bottom: 0.6rem;
		}
	}
}

.sapUiSizeCompact {

	.sapMGTLineMode.sapMGTScopeSingleAction {

		.sapMGTMoreIcon.sapMBtnBase {

			.sapMBtnIcon {
				left: 0.5rem;
				bottom: 0.3rem;
			}
		}
	}
}

.sapMGTLineMode.sapMGTScopeActions {

	.sapMGTMoreIcon.sapMBtnBase {

		.sapMBtnIcon {
			bottom: 0.6rem;
			left: -1rem;
		}
	}
}

.sapUiSizeCompact {

	.sapMGTLineMode.sapMGTScopeActions {

		.sapMGTMoreIcon.sapMBtnBase {

			.sapMBtnIcon {
				bottom: 0.3rem;
				left: -0.5rem;
			}
		}
	}
}

.sapUiSizeCompact {

	.sapMGTLineMode .sapMGTActionsContainer {

		.sapMGTRemoveButton .sapMBtnIcon::before {
			padding: 0.25rem 0.3125rem;
		}
	}
}

.sapMGTLineMode .sapMGTLineModeFailedIcon {
	text-align: start;
}

.sapMGT.sapMGTScopeActions.sapMGTLineMode.sapMGTFailed,
.sapMGT.sapMGTScopeSingleAction.sapMGTLineMode.sapMGTFailed {

	.sapMBtn.sapMGTRemoveButton {
		opacity: 1 !important;
	}
}

/* COMPACT */
.sapUiMedia-GenericTileDeviceSet-small {

	&.sapUiSizeCompact,
	.sapUiSizeCompact {

		.sapMGTLineMode.sapMGT {
			min-height: 1.625rem;
		}

		.sapMGTLineMode .sapMGTTouchArea {
			padding: 0.125rem 0;
			margin: -0.1875rem 0;
		}

		.sapMGTLineMode .sapMGTLineModeFailedIcon {
			font-size: 0.875rem !important;
		}
	}
}

/* LINE MODE FLOATING VIEW */
.sapMGTLineModeFloatingContainer {
	background-color: var(--sapTile_Background);
	border: var(--sapTile_BorderColor);
	border-radius: 0.25rem;
	box-shadow: @sapUiShadowLevel0;
}

/* COZY */
.sapUiMedia-GenericTileDeviceSet-large {

	&.sapMGTLineModeContainer,
	.sapMGTLineModeContainer {
		padding-right: 1.0rem;
		box-sizing: border-box;
		position: relative; /* make the tile's parent <<positioned>>, in order to make JS get the correct offsetParent */
	}

	.sapMGT.sapMGTLineMode {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
		-webkit-text-size-adjust: 100%;
	}

	.sapMGT.sapMGTLineMode {
		float: none;
		clear: none;
		display: inline-block;
		min-width: 2rem;
		background-color: var(--sapTile_Background);
		border: var(--sapTile_BorderColor);
		border-radius: 0.25rem;
		box-shadow: @sapUiShadowLevel0;
		position: relative;
		padding: 0.5rem 0.5rem 0.5rem 0;
		@line-height: 2.75rem;
		@padding-top: 0.125rem;
		@padding-bottom: 0.125rem;
		min-height: 2rem; /* used as hover-style bar height */
		pointer-events: none;
	}

	.sapMGTLineMode .sapMGTHdrTxt,
	.sapMGTLineMode .sapMGTSubHdrTxt {
		word-break: normal;
		display: inline;
		white-space: normal;
		position: relative;
		left: 0.5rem;
		top: 1px;
		border-top: 2px solid transparent;
		border-bottom: 2px solid transparent;
		z-index: 2;
		padding-right: 0.5rem;

		&::after {
			content: none;
		}
	}

	.sapMGTLineMode .sapMGTSubHdrTxt {

		&::before { /* this is needed to enable line-wrapping between header end and subheader beginning */
			content: '';
			display: inline-block;
		}
	}

	.sapMGTLineMode .sapMGTLineModeFailedIcon {
		display: inline-block;
		vertical-align: middle;
		padding-right: 0;
		position: relative;
		left: 0.5rem;
		border-right: 0.375rem solid transparent;
		box-sizing: border-box;
		font-size: 0.875rem  !important;
	}

	.sapMGTLineMode .sapMGTHdrTxt {
		border-left: 0.5rem solid transparent;
		margin-left: -0.5rem;
	}

	.sapMGTLineMode .sapMGTHdrTxt:last-of-type {
		padding-right: 0.5rem;
		margin-right: 0.5rem;
	}

	.sapMGTLineMode.sapMGTScopeSingleAction {

		.sapMGTHdrTxt:last-of-type,
		.sapMGTSubHdrTxt {
			padding-right: 1.3rem;
		}
	}

	.sapMGTLineMode.sapMGTScopeActions {

		.sapMGTHdrTxt:last-of-type,
		.sapMGTSubHdrTxt {
			padding-right: 3.5rem;
		}
	}

	.sapMGTActionsContainer {
		position: absolute;
		right: 0.1875rem; /* together with RemoveButton's margin, this fulfills the right-padding of 0.5rem */
		bottom: 0;
		line-height: 1.375rem;
		z-index: 2; /* Remark: If increased, this will break FLP footer visualization. */
		padding: 0;
		height: 1.5rem;

		&,
		* {
			pointer-events: auto;
		}
	}

	.sapMGTStartMarker,
	.sapMGTEndMarker {
		display: inline-block;
		position: relative;
		top: 0.5rem;
		z-index: 2; /* Remark: If increased, this will break FLP footer visualization. Changed from 3 to 2 as it was breaking FLP footer visualization */
	}

	.sapMGTStyleHelper {
		position: absolute;
		top: 0;
		width: 100%;
	}

	.sapMGTLineStyleHelper {
		position: absolute;
		pointer-events: auto;

		.sapMGTLineStyleHelperInner {
			.sapMGTOverlayMixin();
		}

		&:not(:last-child) {
			border-bottom: 0.25rem solid transparent;
		}
	}

	.sapMGTLineMode .sapMGTHdrTxt {
		max-height: none !important;
	}
}

/* COMPACT */
.sapUiMedia-GenericTileDeviceSet-large {

	&.sapUiSizeCompact,
	.sapUiSizeCompact {

		.sapMGT.sapMGTLineMode {
			@line-height: 1.875rem;
			@padding-top: 0.125rem;
			@padding-bottom: 0.125rem;
			min-height: 2rem;
			padding: 0.5rem 0.5rem 0.5rem 0;
		}

		.sapMGTLineMode .sapMGTLineModeFailedIcon {
			display: inline-block;
			vertical-align: middle;
			padding-right: 0;
			margin-top: 0;
			position: relative;
			left: 0.5rem;
			border-right: 0.375rem solid transparent;
			box-sizing: border-box;
			font-size: 0.875rem  !important;
		}
	}
}

/* Fix for rendering order on tablets in RTL */
html[dir=rtl] .sapMGTLineMode {

	.sapMGTHdrTxt,
	.sapMGTSubHdrTxt {
		unicode-bidi: -webkit-isolate; /* needs to be prefixed for older webkit browsers */
	}
}

/* OVERLAYS AND HELPERS */
.sapMGTOverlay {
	.sapMGTOverlayMixin();
		background-color: var(--sapTile_Background);
		opacity: 0.7;
}

.sapMGT .sapMGTFocusDiv {
	.sapMGTOverlayMixin(0px, 2);
	border-radius: 0.25rem;
}
.sapMGT.sapMGTBackgroundImage .sapMGTFocusDiv {
	.sapMGTOverlayMixin(1px, 2);
}

.sapMGTLineMode .sapMGTFocusDiv {
	top: 1px;
	right: 1px;
	left: 1px;
	bottom: 1px;
	border-radius: 0.25rem !important;
}

.sapMGenericTileFtrFld,
.sapMTileCntFtrFld {
	left: 0.4375rem;
	right: 0.4375rem;
	bottom: 0.75rem;
	position: absolute;
}

.sapMGenericTileFtrFldTxt,
.sapMTileCntFtrFldTxt {
	font-weight: normal;
	display:table-cell;
	padding-left: 0.5rem;
	vertical-align: bottom;
	width: 100%;
}

html[dir=rtl] .sapMGenericTileFtrFldTxt,
.sapMTileCntFtrFldTxt {
	padding-right:0.5rem;
}

.sapMGenericTileFtrFldIcn,
.sapMTileCntFtrFldIcn {
	margin-right: 0.5rem;
	display: table-cell;
	vertical-align: bottom;
}

.sapMGenericTileFtrFldIcn > .sapMGTFtrFldIcnMrk,
.sapMTileCntFtrFldIcn > .sapMGTFtrFldIcnMrk {
	vertical-align: bottom;
}

/* the following is needed for non-webkit browsers that don't support line-clamping */

/* some places should be left for subheader when the subheader exists */
.sapMGT.sapMGTHeaderMode .sapMGTHdrTxt:nth-last-of-type(2) {
	max-height: 5.48rem;
}

.sapMGT:not(.sapMGTHeaderMode) .sapMGTHdrTxt:nth-last-of-type(2) {
	max-height: 2.74rem;
}

/* the max-height is calculated the same as webkit-line-clamping and supported to work when
the screen size changes between small and large (e.g. mobile devices auto rotation) without rerendering */
html[data-sap-ui-browser*='ff'] {

	.sapMGT.sapMGTHeaderMode .sapMGTHdrContent .sapMTextMaxLine {
		max-height: 6.85rem !important;
	}
}

.sapMTileSmallPhone,
.sapMTResponsiveIconMode {

	&.sapMGT.sapMGTHeaderMode .sapMGTHdrTxt:nth-last-of-type(2) {
		max-height: 4.72rem;
	}

	&.sapMGT:not(.sapMGTHeaderMode) .sapMGTHdrTxt:nth-last-of-type(2) {
		max-height: 2.36rem;
	}

	html[data-sap-ui-browser*='ff'] {

		&.sapMGT.sapMGTHeaderMode > .sapMGTHdrContent .sapMTextMaxLine {
			max-height: 5.9rem !important;
		}
	}

	html[data-sap-ui-browser*='ff'] {

		&.sapMGT:not(.sapMGTHeaderMode) > .sapMGTHdrContent .sapMTextMaxLine {
			max-height: 3.54rem !important;
		}
	}

	&.sapMGT.OneByOne {
		width: 9.25rem;
		height: 9.25rem;
	}

	&.sapMGT.TwoByOne {
		width: 19rem;
		height: 9.25rem;
	}

	&.sapMGT.OneByHalf {
		width: 9.25rem;
		height: 4.375rem;

		.sapMGTHdrContent {
			height: 1.25rem;
		}

		.sapMGTContent {
			height: 2.625rem;

			.sapMTileCnt {
				height: 2.125rem;

				.sapMTileCntContent {
					height: 100%;

					.sapMNCLargeFontSize {
						font-size: 1.5rem;
						height: auto;
						align-self: flex-end;
						padding-bottom: 0.25rem;
					}

					.sapMNCIndScale.sapMNCLargeFontSize {
						padding: 0.25rem 0 0.25rem 0.25rem;
					}

					.sapMImageContent {
						display: none;
					}
				}

				.sapMTileCntFtrTxt {
					margin-top: 0.25rem;
					bottom: 0;
				}
			}
		}
	}

	&.sapMGT.TwoByHalf {
		width: 19rem;
		height: 4.375rem;

		.sapMGTHdrContent {
			height: 1.25rem;
			width: calc(100% - 20%);
		}

		.sapMGTContent {
			height: 2.625rem;

			.sapMTileCnt {
				height: 2.125rem;

				.sapMTileCntContent {
					height: 100%;

					.sapMNCLargeFontSize {
						font-size: 1.5rem;
						align-self: flex-end;
						height: auto;
						padding-bottom: 0.25rem;
					}

					.sapMNCIndScale.sapMNCLargeFontSize {
						padding: 0.25rem 0 0.25rem 0.2	5rem;
					}

					.sapMImageContentImageIcon {
						height: 100%;
						max-height: 1.75rem;
					}
				}

				.sapMTileCntContent > div:first-child {
					height: 100%;
				}

				.sapMTileCntFtrTxt {
					margin-top: 0.25rem;
					bottom: 0;
				}
			}
		}
	}

	.sapMGTContent {
		height: 5.5rem;
	}

	.sapMGTHdrContent {
		height: 3.25rem;
		padding: 0.5rem 0.5rem 0 0.5rem;
	}

	.sapMGTSubHdrTxt {
		margin-top: 0;
	}

	.sapMGT.sapMGTScopeActions,
	.sapMGT.sapMGTScopeSingleAction {

		.sapMGTMoreIcon {
			right: 0.5rem;
			bottom: 0.313rem;
		}
	}

	.sapMGTHdrTxt > .sapMText {
		font-size: var(--sapFontHeader6Size);
	}
	.sapMGTSubHdrTxt,
	.sapMGTSubHdrTxt > .sapMText {
		font-size: var(--sapFontSmallSize);
	}

	.sapMGT.sapMGTBackgroundImage.Stretch {

		.sapMGTContent {
			height: 66%;
		}
	}
}

.sapTilePaddingTest .sapMTileCntContent {
	margin-top: 0.3125rem;
	margin-bottom: 0.3125rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.sapTilePaddingTest .sapMGTHdrContent {
	padding-top: 0.6875rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.sapTilePaddingTest .sapMTileCntFtrTxt {
	margin-left: 1rem;
	margin-right: 1rem;
	bottom: 1.0625rem;
}

.TwoByOne.sapMGTActionMode {
	height: 10.5rem;
	width: 20rem;
	box-shadow: var(--sapContent_Shadow0);

	.sapMGTTitle {
		font-weight: bold;
	}

	.sapMGTHdrContent.sapMGTHdrImage {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.75rem;
		height: 2rem;

		.sapMGTHdrIconImage {
			display: flex;
			align-items: center;
		}

		.sapMGTHdrTxt {
			width: 14.25rem;
		}
	}

	.sapMGTHdrContent {
		padding: 0;
		margin: 1rem 1rem 0.75rem 1rem;
		height: fit-content;
		overflow: hidden;

		.sapMText {
			line-height: 1rem;
			font-size: var(--sapFontSize);
		}

		.sapMGTSubHdrTxt .sapMText {
			font-size: var(--sapFontSize);
		}

		.sapMGTHdrIconImage {
			float: left;
			width: 3rem;
		}

		.sapMGTHdrIconImage.sapUiIcon {
			width: 2rem;
			line-height: 1.5rem;
			min-height: 2.1875rem;
		}

		.sapMGTHdrIconImage.sapUiIcon::before {
			font-size: 2rem;
		}

		.sapMGTHdrIconImage.Neutral {
			color: var(--sapNeutralTextColor);
		}

		.sapMGTHdrIconImage.Good {
			color: var(--sapPositiveTextColor);
		}

		.sapMGTHdrIconImage.Critical {
			color: var(--sapCriticalElementColor);
		}

		.sapMGTHdrIconImage.Error {
			color: var(--sapNegativeTextColor);
		}

		.sapMGTHdrIconImage.None {
			color: var(--sapTile_IconColor);
		}
	}

	.sapMGTContent.sapMGTFtrMarginTop {
		height: 7.6rem;

		.sapMTileCnt {
			height: 7.6rem;
		}
	}

	.sapMGTContent {
		height: 6.6rem;

		.sapMTileCnt {
			height: 6.6rem;

			.sapMTileContainer {
				display: flex;
				align-items: center;

				.sapMTilePriority {
					margin: 0 0.5rem 0 1rem;

					.sapMTilePriorityCnt {
						display: flex;
						align-items: center;
						width: fit-content;
						overflow: hidden;

						.sapMTilePriorityBorder {
							width: 0.375rem;
							height: 1.625rem;
						}

						.sapMTilePriorityValue {
							font-size: 0.875rem;
							font-weight: 400;
							line-height: 1rem;
						}
					}
				}

				.High {

					.sapMTilePriorityCnt {
						color: var(--sapNegativeElementColor);
					}
				}

				.Medium {

					.sapMTilePriorityCnt {
						color: @sapWarningColor;
					}
				}

				.Low {

					.sapMTilePriorityCnt {
						color: var(--sapPositiveElementColor);
					}
				}

				.VeryHigh {

					.sapMTilePriorityCnt {
						color: var(--sapIndicationColor_1_BorderColor);
					}
				}

				.sapMTileCntContent {
					padding: 0;
					margin: 0 1rem 0 0;

					.sapMText {
						line-height: 1.5rem;
					}

					.sapMNC {

						.sapMNCInner {
							position: relative;
						}
					}
				}
			}

			.sapMTileCntContent {

				&:first-child {
					color: var(--sapTile_TextColor);
				}

				height: 3rem;
				overflow: hidden;
				padding: 0 1rem;
				margin: 0.75rem 0 1rem 0;

				p {
					margin: 0;
					line-height: 1rem;
					color: var(--sapTile_TextColor);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.sapMText {
					line-height: 1rem;
					color: var(--sapTile_TextColor);
				}

				.sapMImageContent {
					height: 3rem;

					.sapMImageContentImageIcon {
						max-height: 3rem;
					}
				}
			}

			.sapMTileFtrCnt {
				height: 1rem;
				display: flex;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 1rem;

				.sapMTileCntFtrTxt {
					position: initial;
					margin-right: 0;
					margin-left: 1rem;
					font-size: var(--sapFontSize);
					margin-top: 1rem;
				}
			}

			.sapMTileCntFtrTxt {
				margin: 0 1rem 1rem 1rem;
				font-size: var(--sapFontSize);
				bottom: 0;
			}
		}

		.sapMTileCnt.sapMGTNoPriority {

			.sapMTileCntContent {
				margin: 0;
			}
		}

		.sapMTileCnt.sapMGTPriority {

			.sapMTileCntContent {
				height: 2rem;
			}
		}
	}

	&.sapMGTStateLoading {

		.sapMTileCnt {

			.sapMTileCntContentShimmerPlaceholderItem {
				padding-top: 0;
			}
		}

	}

	.sapMGTActionModeContainer {
		position: absolute;
		bottom: 0.9em;
		right: 1rem;
	}
}

.TwoByOne.sapMTileSmallPhone.sapMGTActionMode {
	height: 11.375rem;
	width: 19rem;

	.sapMGTContent {
		height: 7.6rem;

		.sapMTileCnt {
			height: 7.6rem;
		}
	}

	.sapMGTContent.sapMGTFtrMarginTop {
		height: 8.6rem;

		.sapMTileCnt {
			height: 8.6rem;
		}
	}

	&.sapMGTStateLoading {

		.sapMTileCnt {

			.sapMTileCntContentShimmerPlaceholderItem {
				padding-top: 2rem;
			}
		}

	}
}

.TwoByOne.sapMGTLinkTileContent {

	.sapMGTHdrContent {
		padding: 0;
		margin: 1rem 1rem 0.75rem 1rem;
		height: fit-content;

		.sapMGTHdrTxt {

			.sapMText {
				line-height: 1rem;
				font-size: var(--sapFontSize);
				font-weight: bold;
			}
		}
	}

	.sapMGTContent {
		height: 6.25rem;

		.sapMGTLinkTileContentWrapper {
			height: 7.15rem;
			display: flex;
			flex-direction: column;

			.sapMHBox {
				height: 1.5rem;

				.sapMFlexItem {
					height: 1.5rem;
					display: flex;
					justify-content: center;
					align-items: center;

					.sapMLnk {
						line-height: 1.5rem;
					}
				}
			}
		}

		&.sapMGTFtrMarginTop {
			height: 7.25rem;
		}

		&:not(.sapMGTFtrMarginTop) {

			.sapMGTLinkTileContentWrapper.saMGTLinkSubheaderNotPresent {
				gap: 2.5px;
			}
		}
	}
}

.TwoByOne.sapMGTLinkTileContent.sapMTileSmallPhone {

	.sapMGTHdrContent {
		margin: 0.5rem;
	}

	.sapMGTContent {
		height: 5.75rem;

		.sapMGTLinkTileContentWrapper {
			gap: 0 !important;
		}

		&.sapMGTFtrMarginTop {
			height: 6.6875rem;

			.sapMGTLinkTileContentWrapper {
				gap: 0.3125rem !important;
			}
		}
	}
}

.sapMAutoPointer {

	.sapMText {
		cursor: auto;
	}
}

.sapMGT.sapMGTOneByOne,
.sapMGT.sapMGTOneByOne.sapMTileSmallPhone {

	.sapMBtnBase.sapMGTMoreIcon {

		.sapMBtnIcon {
			bottom: 0.3rem;
		}
	}
}

@media (min-width:320px) and (max-width:600px) {

	.sapMGT.sapMGTOneByOne {
		width: 12.875rem;
		height: 7.8125rem;

		.sapMGTHideOverflow {
			bottom: 0.6875rem;
		}

		.sapMGTSubHdrTxt {

			.sapMTextMaxLine {
				-webkit-line-clamp: 1 !important;
			}
		}

		&.HighContrastTile {

			.sapMGTHideOverflow {
				bottom: 0.5rem;
			}
		}
	}
	.sapMBtnBase.sapMGTMoreIcon{
		.sapMBtnIcon{
			bottom: 0.7rem;
		}
	}
}

@media (min-width:600px) {

	.sapMGT.sapMGTOneByOne {
		width: 11.875rem;
		height: 8rem;

		.sapMBtnBase.sapMGTMoreIcon {

			.sapMBtnIcon {
				bottom: 0.3rem;
			}
		}

		.sapMGTHideOverflow {
			bottom: 1rem;
		}

		&.HighContrastTile {

			.sapMGTHideOverflow {
				bottom: 0.75rem;
			}
		}
	}
}

.sapMGT.sapMGTOneByOne {
	border-radius: var(--sapTile_BorderCornerRadius);
	border: none;

	.sapMGTHideOverflow {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		overflow: hidden;
	}

	.sapMGTIconWrapper {
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
		margin-bottom: 0.375rem;

		.sapMGTHdrContent {
			padding: 0 0.5rem;
			display: block;
			flex-direction: column;
			height: fit-content;
			align-items: center;

			.sapMGTHdrTxt {
				height: inherit;
				max-height: none;
				overflow: visible;
				justify-content: center;
				word-break: break-word;
			}
		}
	}

	.sapMGTSubHdrTxt {
		margin: 0 0.5rem 0 0.5rem;
		display: flex;
		align-items: center;
		flex-direction: column;
		white-space: initial;

		.sapMText {
			font-weight: 400;
			color: var(--sapContent_ContrastTextColor);
			text-align: center !important;
			white-space: pre-line;
			line-height: 1rem;
		}
	}

	&.sapMGTHeaderOneLine {

		.sapMGTHdrContent.sapMGTOneByOne {
			justify-content: end;

			.sapMGTHdrTxt {
				height: fit-content;
			}
		}
	}

	&.sapMGTHeaderThreeLine {

		.sapMGTSubHdrTxt {

			.sapMText {
				white-space: nowrap;
			}
		}
	}

	&:focus:not(:active) {
		outline: 0.125rem solid var(--sapTile_Background);

		.sapMGTFocusDiv {
			border: none;
			outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
			outline-offset: 0.125rem;
		}
	}
}

.sapMGTHdrContent.sapMGTOneByOne > .sapMGTHdrTxt > .sapMText {
	font-size: var(--sapFontSize);
	color: var(--sapContent_ContrastTextColor);
	text-align: center !important;
	white-space: initial;
	font-weight: 700;
}

.sapMGTBackgroundBadge {
	display: none;
	margin-bottom: 0.5rem;
}

.sapMGTArticleMode {
	display: flex;
	flex-direction: column;

	.sapMGTContent {
		flex-grow: 1;

		.sapMGTPriorityBadge {
			display: flex;
			flex-shrink: 0;
			padding-top: 0;
			padding-bottom: 0.5rem;
		}

		.sapMTileCnt {

			.sapMTileCntContent {
				height: 3.25rem;

				.sapMImageContent {
					height: 3rem;

					.sapMImageContentImageIcon {
						max-height: 3.25rem;
					}
				}
			}

			.sapMTileFtrCnt {
				height: 2.5rem;
				display: flex;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0.25rem;
				justify-content: space-between;
				align-items: center;

				.sapMTileCntFtrTxt {
					position: initial;
					margin-right: 0;
				}

				.sapMTileNavContainer {
					margin: 0 1rem 0 0.5rem;
				}
			}
		}
	}
}

.sapMGTArticleMode.sapMTileSmallPhone {

	.sapMGTHdrContent {
		align-content: end;
	}

	.sapMGTBackgroundBadge {
		display: block;
	}

	.sapMGTContent {

		.sapMGTPriorityBadge {
			display: none;
		}

		.sapMTileCnt {

			.sapMTileFtrCnt {

				.sapMTileNavContainer {
					margin-right: 0.5rem;
				}
			}
		}
	}
}

.sapMGT.sapMGTScopeDisplay.sapMGTLineMode.sapMGTInfoRendered {
	padding: 0;

	.sapMGTStartMarker {
		display: inline;
	}

	.sapMGTEndMarker {
		display: inline;
	}

	.sapMGTLineWrapper {
		display: flex;
		flex-wrap: wrap;
	}

	.sapMGTHeaderWrapper {
		display: inline-block;
		padding: 0.5rem 0.5rem 0.25rem 0;
		margin-bottom: 0.25rem;

		.sapMGTSubHdrTxt {
			margin-right: 0;
		}
	}

	.sapMGTTInfo {
		display: inline-block;
		margin: 0;
		flex-grow: 1;
		padding-left: 0.5rem;

		.sapMGTAppShortcutText {
			padding-left: 0;
		}
	}
}

.sapMGT.sapMGTScopeDisplay.sapMGTLineMode.sapMGTInfoRendered.sapMGTLineModeSmall {
	display: flex;
	flex-wrap: wrap;
	max-width: 94%;

	.sapMGTHeaderWrapper {
		padding-left:0.5rem;
		display: flex;
		text-overflow: ellipsis;
		overflow: hidden;
		flex-wrap: wrap;
		margin-bottom: 0;
	}

	.sapMGTTouchArea {
		padding: 0;
		margin: 0;
	}

	.sapMGTTInfo {

		.sapMGTAppShortcutText {
			padding-left: 0;
		}
	}
}

.sapMGT.sapMGTScopeDisplay.sapMGTLineMode.sapMGTInfoRendered {

	.sapMGTTInfoWrapper {
		padding: 0.5rem;
		flex-grow: 1;
		background-color: var(--sapInfobar_NonInteractive_Background);
		border-radius: 0 0.25rem 0.25rem 0;

		.sapMGTTInfo {
			margin: 0;
			vertical-align: top;
			text-transform: uppercase;
			flex-grow: 1;
			display: flex;
			overflow: hidden;
			align-items: baseline;
			flex-wrap: wrap;
			padding: 0;

			.sapMGTHdrTxt {
				padding-top: 0.3rem;
			}

			.sapMGTSubHdrTxt {
				margin-right: 0.25rem;
			}

			.sapMText {
				font-size: var(--sapFontSmallSize) ;
			}

			.sapMGTAppShortcutText {
				padding-right: 0.5rem;
				padding-left: 0;

				.sapMText {
					color: var(--sapTile_TextColor);
				}
			}

			.sapMGTSystemInfoText {
				font-size: var(--sapFontSmallSize);
				position: relative;
				display: inline-block;
				word-break: break-word;

				.sapMText{
					color: var(--sapTile_TitleTextColor);
				}
			}

			.sapMGTSystemInfoText.sapMGTSeperatorPresent {
				font-size: var(--sapFontSmallSize);
				position: relative;
				display: inline-block;

				&::before {
					content: '';
					position: absolute;
					display: inline-block;
					height: 1rem;
					width: 0.00623rem;
					left: 0;
					transform: translateX(-0.25rem);
					top: -0.125rem;
					background-color: var(--sapTile_TextColor);
				}
			}
		}
	}

	.sapMGTTInfo.sapMGTInfoNotContainsSeperator {

		.sapMGTAppShortcutText {
			padding-right: 0;
		}
	}
}

/* IconMode Styles */
.sapMGTIconMode {

	.sapMGTHdrTxt > .sapMText {
		font-weight: bold;
		font-size: var(--sapFontHeader6Size);
	}

	.sapMGTSubHdrTxt {
		line-height: 1rem;

		.sapMText {
			font-size:var(--sapFontSize);
			color: var(--sapContent_LabelColor);
		}
	}
}

.sapMGTOneByOne.sapMGTIconMode {
	min-width: 7rem;
	max-width: 15rem;

	.sapMGTHdrContent {
		padding: 0 0.5rem;
	}

	.sapMGTHdrTxt > .sapMText {
		text-shadow: none;
		line-height: 1rem;
		display: block;
	}

	.sapMGTOneByOneIconLoaded {
		margin-top: -1rem;
	}
}

.sapMGTOneByOne.sapMGTIconMode.sapMTResponsiveIconMode {

	.sapMGTHdrContent {
		height:auto;
		padding: 1rem 0.5rem 1rem 0;
	}
}

.sapMGT.sapMGTTwoByHalf {
	display: flex;
	border: none ;
	box-shadow: none ;
	background-color: transparent ;
	align-items: center;
	width: 18.75rem ;
	height: 3.438rem ;
	padding-left: 0.75rem;
	border-radius: var(--sapTile_BorderCornerRadius);
	box-sizing: border-box;
}

.sapMGT.sapMGTTwoByHalf.sapMGTIconMode > :first-child {
	flex-shrink: 0;
}

.sapMGT.sapMGTTwoByHalf.sapMGTIconMode > :last-child {
	flex-shrink: 0;
	margin-left: auto; // push last element to the right
}

.sapMGT.sapMGTTwoByHalf.sapMGTIconMode .sapMGTHdrContent {
	flex: 1 1 auto;
	min-width: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sapMGTTwoByHalf  > .TwoByHalf > .sapMGTHdrTxt > .sapMText {
	font-size: var(--sapFontSize);
	color: var(--sapTile_TitleTextColor);
}

.TwoByHalf.sapMGT .sapMGTHdrContent {
	line-height: 2rem;
	vertical-align: middle;
}

.TwoByHalf.sapMGTIconMode {

	.sapMGTHdrContent {
		height: auto;
		padding-top: 0;
		padding-left: 1rem;
		max-width: none;
		max-height: 2rem;
		align-items: center;
	}

	.sapMGTMoreIcon {
		visibility: hidden;
		bottom: auto;
		right: 1.5rem;
	}
}

.TwoByHalf.sapMGTIconMode.sapMGT:hover {

	.sapMGTMoreIcon {
		visibility: visible;
	}
}

.sapMGTOneByOneIcon {
	display: flex;
	align-items: flex-end;
	padding-top: 1rem;
	justify-content: center;

	.sapUiIcon {
		font-size: 1.25rem !important;
	}
}

.sapMGTTwoByHalfIcon {
	width: 2rem;
	height: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0.5rem;
	flex-shrink: 0;
}

.sapMGTTwoByHalfIcon.sapMGTIconBadge .sapMGTTileIcon {
	font-size: 2.25rem !important;
}

.sapMGTTwoByHalfIcon .sapMGTileBadge {
	color: var(--sapContent_ContrastTextColor);
	top: 1.46875rem;
	line-height: 0.75rem;
	font-weight: bold;
	position: absolute;
}

.sapMGTTileIcon {
	color: var(--sapContent_ContrastTextColor);
}

.TwoByHalf.sapMGTIconMode.sapMGT:focus {

	.sapMGTMoreIcon{
		visibility: visible !important;
	}
}
.sapMGTVisible {
	visibility: visible !important;
}

/* Mobile View-specific styles */
.sapMGTOneByOne.sapMGTIconMode.sapMTileSmallPhone {
	height: 4rem;
	max-width: none;

	.sapMGTHdrContent {
		height:auto;
		overflow: auto;
		padding-right: 0;
	}
}

.sapMGTOneByOne.sapMGTIconMode.sapMTileSmallPhone,
.sapMGTOneByOne.sapMGTIconMode.sapMTResponsiveIconMode {
	width: 14.5rem;
	height: 5.375rem;
	display: flex;
	flex-direction: column;

	.sapMGTHideOverflow {
		bottom: 1rem;
	}

	.sapMGTIconWrapper {
		margin: 1rem 0.5rem 0.375rem 0.5rem;
		align-items: center;
		flex-direction: row;
		gap: 0;

		.sapMGTOneByOneIcon {
			padding: 0;
			margin-bottom: auto;
			margin-top: 0.375rem;
		}

		.sapMGTHdrTxt {
			align-items: center;

			.sapMText {
				text-align: left !important;

				.sapMTextMaxLine {
					-webkit-line-clamp: 3 !important;
				}
			}
		}
	}

	.sapMGTSubHdrTxt {
		padding: 0 0.5rem;
		margin: 0;
		flex-direction: row;
		align-items: flex-start;

		.sapMText {
			font-weight: 400;
			white-space: initial;
			text-align: left !important;

			.sapMTextMaxLine {
				-webkit-line-clamp: 1 !important;
			}
		}
	}

	&.sapMGTHeaderOneLine {

		.sapMGTHdrContent.sapMGTOneByOne {
			justify-content: center;
		}
	}

	&.HighContrastTile {

		.sapMGTHideOverflow {
			bottom: 0.75rem;
		}
	}
}

.TwoByHalf.sapMGTIconMode.sapMTileSmallPhone {

	.sapMGTHdrContent {
		height: auto;
	}

	.sapMGTTwoByHalfIcon .sapMGTileBadge {
		top: 1.90625rem;
	}
}

/* High Contrast Theme specific styles */
.sapMGT.sapMGTIconMode.HighContrastTile,
.sapMGT.sapMGTIconMode .HighContrastTile.sapMGTTwoByHalfIcon {
	background-color: var(--sapTile_Background);
	border: 0.125rem solid;
}

.sapMGT.sapMGTTwoByHalf.sapMGTIconMode.HighContrastTile {
	border: none;
}

.sapMGT.sapMGTTwoByHalf.sapMGTIconMode.HighContrastTile:not(.sapMGTStateDisabled):hover {
	box-shadow: 0 0 0 0.188rem var(--sapContent_ShadowColor) inset;
	border: none;
}

.sapMGT.sapMGTOneByOne.HighContrastTile:focus:not(:active) {
	outline-offset: 0.0625rem;

	.sapMGTFocusDiv{
		outline: none;
	}

	&::before {
		content: '';
		position: absolute;
		outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
		border-radius: 0.1rem;
		outline-offset: 0.25rem;
		inset: 0;
	}
}

.sapMGT.sapMGTOneByOne.HighContrastTile:hover {

	.sapMGTFocusDiv {
		outline-offset: 0 !important;
	}
}

.sapMGT:focus .sapMGTFocusDiv{
	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
}

.sapMGT:focus .sapMGTFocusDiv,
.sapMGT:active .sapMGTFocusDiv,
.sapMGTLineModePress .sapMGTFocusDiv {
	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
}

/*Badge Styles */

/* Styles when Icon and Text are present */

.sapMGT {

	.sapMGTBadge {
		position: absolute;
		top: -0.6rem;
		right: 0.5rem;
		border-radius: 0.5rem;
		font-weight: bold;
		font-size: 0.75rem;
		padding: 0 0.5rem;
		font-size: var(--sapFontSmallSize);
		height: 1rem;
		line-height: 1rem;
		z-index: 2;