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

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

.sapMGT.sapMGTBackgroundImage.sapMGTStateFailed, .sapMGT.sapMGTBackgroundImage.sapMGTStateDisabled {

	.sapMGTContent {
		border-bottom-left-radius: inherit;
		border-bottom-right-radius: inherit;
	}
}

.sapMGT.sapMGTScopeActions.sapMGTBackgroundImage .sapMGTMoreIcon {
	color: @sapUiContentContrastTextColor;
}

.sapMGT.sapMGTScopeActions{
	.sapMBtnBase.sapMGTMoreIcon{
		.sapMBtnIcon{
			font-size: 1rem;
			bottom: 0.7rem;
			left: 0.5rem
		}
	}
}

html.sap-desktop .sapMGTActionButtonPress.sapMGT:active
{
	.sapMGTFocusDiv{
		border: none;
	}
}

html.sap-desktop .sapMGTActionButtonPress.sapMGT:focus-visible
{
	.sapMGTFocusDiv{
	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
	}
}

/************************ LINE MODE LIST VIEW ********************/

.sapMGT.sapMGTLineMode {
	transition: background 0.2s;
	background: transparent;
	.sapMBtnBase.sapMGTMoreIcon{
		.sapMBtnIcon{
			bottom: 0.7rem;
		}
	}
}

.sap-desktop .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
	&:not(.sapMGTLineModePress):hover {
		background: @sapUiTileHoverBackground;
	}
}

.sapMGT.sapMGTLineMode:not(.sapMGTDisabled).sapMGTLineModePress {
	background: fade(@sapUiShellHoverBackground, 12);
}

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

.sapMGTLineMode .sapMGTLineModeFailedIcon {
	cursor: pointer;
	color: @sapUiContentNonInteractiveIconColor;
	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: @sapUiButtonBackground;
	color: @sapUiButtonTextColor;

	&:before {
		color: @sapUiButtonIconColor;
	}
}

.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.sap-desktop {
	.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 @sapUiContentFocusColor;
			}
		}
	}
}
.sapUiMedia-GenericTileDeviceSet-large {
	&.sap-desktop .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
		&:hover .sapMGTLineStyleHelperInner {
			background: fade(@sapUiShellHoverBackground, 10);
		}
	}
	.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: fade(@sapUiShellHoverBackground, 12);
				}
			}
		}
	}
}

/************************************************************/

.sapMGTLineMode .sapMGTHdrTxt {
	color: @sapLinkColor;
	font-size: @sapMFontMediumSize;
	text-shadow: @sapUiShadowText;
}

.sapMGTLineMode .sapMGTSubHdrTxt {
	color: @sapUiTileTextColor;
	font-size: @sapMFontMediumSize;
	text-shadow: @sapUiShadowText;
}

html.sap-desktop .sapMGTWithoutImageHoverOverlay,
html.sap-desktop .sapMGTWithImageHoverOverlay {
	z-index: 1;
	position: absolute;
	pointer-events: none;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	transition: background 0.2s;
}

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: inherit;
}

html.sap-desktop .sapMGTWithoutImageHoverOverlay.sapMGTPressActive,
html.sap-phone .sapMGTWithoutImageHoverOverlay.sapMGTPressActive,
html.sap-tablet .sapMGTWithoutImageHoverOverlay.sapMGTPressActive {
	background: fade(@sapUiShellActiveBackground, 8) !important;
}

html.sap-desktop .sapMGTWithImageHoverOverlay.sapMGTPressActive,
html.sap-phone .sapMGTWithImageHoverOverlay.sapMGTPressActive,
html.sap-tablet .sapMGTWithImageHoverOverlay.sapMGTPressActive {
	background: fade(@sapUiShellActiveBackground, 22) !important;
}

html.sap-desktop .sapMGT:hover .sapMGTWithoutImageHoverOverlay:not(.sapMGTWithoutImagePressActive) {
	background: fade(@sapUiShellHoverBackground, 4);
}

html.sap-desktop .sapMGT:hover .sapMGTWithImageHoverOverlay:not(.sapMGTWithImagePressActive) {
	background: fade(@sapUiShellHoverBackground, 18);
}

html.sap-desktop .sapMGT:focus .sapMGTFocusDiv,
html.sap-desktop .sapMGT:active .sapMGTFocusDiv,
html.sap-desktop .sapMGTLineModePress .sapMGTFocusDiv {
	border: 1px dotted @sapUiContentFocusColor;
}


html.sap-desktop .sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv,
html.sap-desktop .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv {
	&:after {
		content: "";
		.sapMGTOverlayMixin();
		border-radius: 0.125rem;
		margin: -1px;
		border: 1px dashed @sapUiContentContrastFocusColor;
		z-index: 0;
	}
}

.sapMGT.sapMGTScopeActions.TwoByHalf.sapMGTIconMode {
	.sapMBtn.sapMGTMoreIcon{
		.sapMBtnInner{
			height: 2.25rem;
			min-width: 0;
		}
	}
}

.sapUiSizeCompact{
	.sapMGT.sapMGTScopeActions.TwoByHalf.sapMGTIconMode {
		.sapMBtn.sapMGTMoreIcon{
			.sapMBtnInner{
				height: 1.625rem;
				min-width: 0;
			}
		}
	}
}

.sapUiMedia-GenericTileDeviceSet-large{
	.sapMGT.sapMGTScopeActions.sapMGTLineMode{
		.sapMBtnBase.sapMGTMoreIcon{
			.sapMBtnIcon{
				left: -0.5rem;
			}
		}
	}
}

.sapUiMedia-GenericTileDeviceSet-large{
	.sapMGT.sapMGTScopeSingleAction.sapMGTLineMode{
		.sapMBtnBase.sapMGTMoreIcon{
			.sapMBtnIcon{
				left: 0.5rem;
			}
		}
	}
}