/* ================================== */
/* CSS for control sap.m/GenericTile  */
/* Fiori 3 theme                      */
/* ================================== */

.sapMGT.sapMGTBackgroundImage {

	.sapMGTContent {
		border-bottom-left-radius: 0.125rem;
		border-bottom-right-radius: 0.125rem;
		height: auto;
	}
}

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

/* LINE MODE LIST VIEW */

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

.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {

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

.sapMGT.sapMGTLineMode:not(.sapMGTDisabled).sapMGTLineModePress {
	background: var(--sapTile_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);
	}
}

.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(--sapLinkColor);
	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);
		// opacity: 0.7;
	}
}

.sapMGT:hover:not(.sapMGTPressActive) {
	box-shadow: none;
	outline: 1px solid var(--sapTile_Interactive_BorderColor);
	background-color: var(--sapTile_Hover_Background);

	&.sapMGTBackgroundImage {
		background-color: var(--sapTile_Hover_Background);
		opacity: 0.9;
	}

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

.sapMGTActionButtonPress.sapMGT:active {

	.sapMGTFocusDiv {
		border: none;
	}
}

.sapMGTActionButtonPress.sapMGT:focus-visible {

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

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

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