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

.sapMGT.sapMGTBackgroundImage {

	.sapMGTContent {
		border-bottom-left-radius: var(--sapTile_BorderCornerRadius);
		border-bottom-right-radius: var(--sapTile_BorderCornerRadius);
	}
}

.sapMGT.sapMGTScopeActions.sapMGTBackgroundImage .sapMGTMoreIcon {
	color: var(--sapContent_ContrastTextColor);
}

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

	.sapMGTContent {

		&::before {
			border-radius: var(--sapTile_BorderCornerRadius);
		}
	}
}

.sapMGTTInfoContainer {
	height: 2.5rem;
}

.tileWithAppInfo {

	.sapMGTTInfo {
		padding: 0.125rem 1rem 0.125rem 0.25rem;
		text-transform: uppercase;
		margin-bottom: 0.7rem;
		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);
			}
		}
	}
}

.sapMGT.sapMGTScopeActions:not(.sapMGTStateLoading){

	.sapMTileCntContent {

		&::after {
			opacity: 0.4;
			background-color: var(--sapTile_Background);
		}
	}
}

.sapMGT.sapMGTScopeActions.OneByHalf:not(.sapMGTStateLoading),
.sapMGT.sapMGTScopeActions.TwoByHalf:not(.sapMGTStateLoading) {

	.sapMTileCntContent {

		&::after {
			top: -0.3125rem;
		}
	}
}

/* LINE MODE LIST VIEW */

.sapMGT.sapMGTLineMode {
	transition: background 0.2s;
	background: transparent;
}

.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {

	&:not(.sapMGTLineModePress):hover {
		background: var(--sapTile_Hover_Background);
		box-shadow: var(--sapContent_Shadow2);
	}
}

.sapMGT.sapMGTLineMode:active {
	background-color: var(--sapTile_Active_Background);
	outline: 0.125rem solid var(--sapContent_FocusColor) !important;
	outline-offset: -0.125rem;
	border: none;
}

.sapMGT.sapMGTLineMode:not(.sapMGTDisabled).sapMGTLineModePress {
	background: var(--sapTile_Active_Background);
}

.sapMGT.sapMGTLineMode .sapMGTFocusDiv {
	border-radius: 0;
}

.sapMGTLineMode .sapMGTLineModeFailedIcon {
	cursor: pointer;
	color: var(--sapContent_NonInteractiveIconColor);
	text-shadow: @sapUiShadowText;
}

.sapMGTLineMode.sapMGTDisabled > .sapMGTTouchArea > *:not(.sapMGTActionsContainer) {
	opacity: 0.5;
}

.sapMGTLineMode.sapMGTFailed .sapMGTLineModeFailedIcon ~ *:not(.sapMGTStyleHelper):not(.sapMGTActionsContainer):not(.sapMGTEndMarker) {
	opacity: 0.5;
}

.sapMGTLineMode .sapMGTActionsContainer .sapMGTRemoveButton {
	background-color: var(--sapButton_Background);
	color: var(--sapButton_TextColor);

	&::before {
		color: var(--sapButton_IconColor);
	}
}

.sapMGT.sapMGTScopeActions .sapMGTRemoveButton,
.sapMGT.sapMGTScopeSingleAction .sapMGTRemoveButton {

	.sapMBtnInner {
		border-color: var(--sapButton_BorderColor);
		background: var(--sapButton_Background);
	}

	.sapMBtnIcon {
		color: var(--sapButton_TextColor);
	}
}

.sapMGTLineMode .sapMGTLineModeHelpContainer:not(:last-child) {
	-webkit-mask-image: linear-gradient(to right, #FFF ~"calc(100% - 1.5rem)", transparent);

	html[dir~=rtl] & {
		-webkit-mask-image: linear-gradient(to left, #FFF ~"calc(100% - 1.5rem)", transparent);
	}

	.sapMGTHdrTxt,
	.sapMGTSubHdrTxt {
		text-overflow: clip;
	}
}

/* LINE MODE FLOATING VIEW */

.sapUiMedia-GenericTileDeviceSet-large {

	.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {

		&:focus,
		&.sapMGTLineModePress {

			.sapMGTLineStyleHelperInner::before {
				content: '';
				position: absolute;
				top: 1px;
				left: 1px;
				bottom: 1px;
				right: 1px;
				box-sizing: border-box;
				border: 1px dotted var(--sapContent_FocusColor);
			}
		}
	}
}

.sapUiMedia-GenericTileDeviceSet-large {

	.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {

		&:hover .sapMGTLineStyleHelperInner {
			background: var(--sapTile_Hover_Background);
		}
	}

	.sapMGT.sapMGTLineMode {
		font-size: @sapMFontMediumSize;

		& * {
			font-size: @sapMFontMediumSize;
		}

		&.sapMGTDisabled {

			.sapMGTHdrTxt,
			.sapMGTSubHdrTxt {
				opacity: 0.5;
			}
		}


		.sapMGTLineStyleHelper {

			&:first-child:not(:only-child) .sapMGTLineStyleHelperInner {
				margin-right: 0.125rem;
			}

			&:not(:first-child) .sapMGTLineStyleHelperInner {
				margin: 0 0.125rem;
			}

			&:last-child .sapMGTLineStyleHelperInner {
				margin-right: 0;
			}

			&:first-child .sapMGTLineStyleHelperInner {
				border-top-left-radius: 0.2rem;
				border-bottom-left-radius: 0.2rem;
			}

			&:last-child .sapMGTLineStyleHelperInner {
				border-top-right-radius: 0.2rem;
				border-bottom-right-radius: 0.2rem;
			}
		}

		.sapMGTLineStyleHelperInner {
			transition: background 0.2s;
		}

		&.sapMGTLineModePress:not(.sapMGTDisabled) {

			&,
			&:hover {

				.sapMGTLineStyleHelperInner {
					background: var(--sapTile_Active_Background);
				}
			}
		}
	}
}

.sapMGTLineMode .sapMGTHdrTxt {
	color: var(--sapTile_TitleTextColor);
	font-size: @sapMFontMediumSize;
	text-shadow: @sapUiShadowText;
}

.sapMGTLineMode .sapMGTSubHdrTxt {
	color: var(--sapTile_TextColor);
	font-size: @sapMFontMediumSize;
	text-shadow: @sapUiShadowText;
}

.sapMGTWithoutImageHoverOverlay,
.sapMGTWithImageHoverOverlay {
	z-index: 1;
	position: absolute;
	pointer-events: none;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	border-radius: 0.25rem
}

html.sap-phone .sapMGTWithoutImageHoverOverlay,
html.sap-phone .sapMGTWithImageHoverOverlay,
html.sap-tablet .sapMGTWithoutImageHoverOverlay,
html.sap-tablet .sapMGTWithImageHoverOverlay {
	position: absolute;
	pointer-events: none;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	border-radius: 0.25rem
}

.sapMGT.sapMGTPressActive {
	box-shadow: none;

	&:not(.sapMGTBackgroundImage) {
		background: var(--sapTile_Active_Background);
	}

	&.sapMGTScopeActions .sapMTileCntContent::after {
		background-color: var(--sapTile_Active_Background);
	}
}

.sapMGT:hover:not(.sapMGTPressActive) {
	box-shadow: var(--sapContent_Shadow2);
	&:not(.sapMGTBackgroundImage) {
		background-color: var(--sapTile_Hover_Background);
	}

	&.sapMGTScopeActions .sapMTileCntContent::after {
		background-color: fade(@sapUiTileHoverBackground, 70);
	}
}

.sapMGTActionButtonPress.sapMGT:focus {

	.sapMGTFocusDiv {
		box-shadow: none;
	}
}

.sapMGTActionButtonPress.sapMGT:active {

	.sapMGTFocusDiv {
		border: none;
		box-shadow: none;
	}
}

.sapMGTActionButtonPress.sapMGT:focus-visible {

	.sapMGTFocusDiv {
		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
		border-radius: var(--sapTile_BorderCornerRadius);
	}
}

.sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv,
.sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv {

	&::after {
		content: '';
		.sapMGTOverlayMixin();
		border-radius: 0.25rem;
		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_ContrastFocusColor);
		z-index: 0;
	}
}

large.sapUiSizeCompact .sapMGT.sapMGTLineMode,
.sapUiMedia-GenericTileDeviceSet-large .sapUiSizeCompact .sapMGT.sapMGTLineMode {
	margin-right: 1rem;
	border: 1px solid var(--sapTile_BorderColor);
}

.sapMGT {
	border-color: var(--sapTile_BorderColor);
	box-shadow: var(--sapContent_Shadow0);

	.sapMGTContent {
		border-radius: 0 0 var(--sapTile_BorderCornerRadius) var(--sapTile_BorderCornerRadius);
	}
}

.sapMGT.tileWithAppInfo {

	.sapMGTContent{
		border-radius: 0;
	}
}

.sapUshellSection {

	.sapMGT.TwoByOne {
		width: 23rem;
	}

	.sapMGT.TwoByHalf {
		width: 23rem;
	}

	.sapMGT.TwoByHalf.sapMTileSmallPhone {
		width: 19rem;
	}

	.sapMGT.TwoByOne.sapMTileSmallPhone {
		width: 19rem;
	}
}

.sapMGT.TwoByOne {
	width: 22.5rem;
}

.sapMGT.TwoByOne.sapMGTActionMode {
	width: 20rem;
}

.sapMGT.sapMTileSmallPhone.TwoByOne.sapMGTActionMode {
	width: 19rem;
}

.sapMTileSmallPhone .sapMTileCntContent {
	height: 3.438rem;
}

.sapMGT.TwoByHalf {
	width: 22.5rem;
}

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

.sapMGTLineMode .sapMGTHdrTxt {
	font-weight: bold;
}

.sapMGT.sapMGTLineMode {
	border: 1px solid var(--sapTile_BorderColor) !important;
	border-radius: var(--sapTile_BorderCornerRadius) !important;
	box-shadow: var(--sapContent_Shadow0) !important;
}

.sapMGT.sapMGTLineMode.sapMGTInfoRendered {
	border: transparent !important;

	.sapMGTTInfoWrapper {
		border-radius: 0 var(--sapTile_BorderCornerRadius) var(--sapTile_BorderCornerRadius) 0 !important;
	}
}

.sapMGT.sapMGTLineMode.sapMGTInfoRendered:focus {

	.sapMGTFocusDiv {
		inset: 0;
	}
}

.sapMGT.sapMGTLineMode.sapMGTInfoRendered:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
	border: transparent !important;
}

.sapMGT.sapMGTLineMode:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
	background: var(--sapTile_Hover_Background);
	border: 1px solid var(--sapTile_BorderColor) !important;
	box-shadow: var(--sapContent_Shadow2) !important;
}

.sapMGT:hover:not(.sapMGTPressActive) {
	box-shadow: var(--sapContent_Shadow2) !important;
}

.sapMGTIconMode.sapMGT:hover:not(.sapMGTPressActive) {
	border: none !important;
}

.sapMTileCntFtrTxt .sapMLnk .sapUiIcon {
	font-size: 0.75rem !important;
	margin-left: 1px;
	margin-right: 1px;
}

.sapMGT:focus .sapMGTFocusDiv,
.sapMGT:active .sapMGTFocusDiv,
.sapMGTLineModePress .sapMGTFocusDiv {
	border-radius: var(--sapTile_BorderCornerRadius);
	inset: -1px;
}

.sapMGT:active {
	background-color: var(--sapTile_Active_Background);
	border: 0.0625rem solid var(--sapTile_Interactive_BorderColor);

	&.sapMGTIconMode {
		outline: 0.0625rem solid var(--sapTile_Interactive_BorderColor);
		border: none;
	}

	&.sapMGTNewsContent {
		overflow: hidden;
	}

	.sapMGTFocusDiv {
		box-shadow: none;
		border: none !important;
	}
}

.sapMGT:focus .sapMGTFocusDiv {
	border-radius: var(--sapTile_BorderCornerRadius);
	box-shadow: none;
	inset: -1px;
}

.sapMGT.sapMGTOneByOne:focus .sapMGTFocusDiv {
	inset: 0;
}

.sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv::after,
.sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv::after {
	border: none;
	border-radius: var(--sapElement_BorderCornerRadius);
}

.sapMGTLineMode .sapMGTFocusDiv {
	border-radius: 16px !important;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.miniTileBackground {
	background: var(--sapTile_Background);
	box-shadow: var(--sapContent_Shadow0) !important;
}

.miniTileContainer .sapMGT {
	background: var(--sapTile_Background);
	box-shadow: var(--sapContent_Shadow0) !important;
}

.sapUshellTile,
.sapUshellTileWrapper,
.sapUshellTileInner,
.sapUshellTileBase,
.sapUshellInner .sapUshellTile-placeholder,
.sapUshellInner .sapUshellLinkTile-placeholder {
	border-radius: var(--sapElement_BorderCornerRadius);
}

.sapUshellTile {
	margin: 0 1rem 1rem 0;
}

.sapUshellSection .sapUshellSectionTitle {
	font-weight: bold;
}

.TwoByOne.sapMGTActionMode {
	border-radius: 1.25rem;

	.sapMGTFocusDiv {
		border-radius: 1.25rem !important;
	}
}

.sapMGT.sapMGTScopeActions.sapMGTIconMode.TwoByHalf {

	.sapMBtn.sapMGTMoreIcon {

		.sapMBtnInner {
			left: 0;
		}
	}
}

.sapMGT.sapMGTScopeActions,
.sapMGT.sapMGTScopeSingleAction {

	.sapMGTMoreIcon {

		.sapMBtnIcon {
			color: var(--sapButton_Lite_TextColor);
		}
	}
}

.sapMGT.OneByOne,
.sapMGT.TwoByOne {

	.sapMTileCnt.News {
		border-bottom-left-radius: 0.87rem;
		border-bottom-right-radius: 0.87rem;
	}
}

/* OVERLAYS AND HELPERS */

.sapMGTOverlay {
	border-radius: inherit;
}

.sapMGT.sapMGTBackgroundImage {

	.sapMGTOverlay {
		border-radius: 0.9rem;
	}

	&.sapMGTStateFailed {

		.sapMGTWithImageHoverOverlay {
			border-radius: var(--sapTile_BorderCornerRadius);
		}
	}

	&:active {

		.sapMGTOverlay {
			border-radius: 0.95rem;
		}
	}
}