/* ========================================= */
/* CSS for control sap.ushell/TileContainer  */
/* Quartz Light theme                        */
/* ========================================= */

@_sap_ushell_TileContainer_GroupHeaderTitleColor: var(--sapShell_GroupTitleTextColor);
@_sap_ushell_TileContainer_GroupTitleFontFamily: var(--sapFontFamily);
@_sap_ushell_TileContainer_GroupTitleFontWeight: normal;
@_sap_ushell_TileContainer_EditModeBGColor: fade(@sapUiBaseColor, 30);
@_sap_ushell_TileContainer_PlaceholderColor: var(--sapShell_TextColor);
@_sap_ushell_TileContainer_AddGroupText: var(--sapButton_TextColor);
@_sap_ushell_LinkContainer_BackgroundColor: var(--sapPageHeader_Background); /* interim, specification is not available */
@_sap_ushell_TileContainer_HiddenGroupBackground: fade(darken(darken(saturate(@sapUiShellBackground, 6), 7.8), 20), 10);

@_sap_ushell_TileContainer_GroupTitleFontSizeDesktop: var(--sapFontHeader4Size);
@_sap_ushell_TileContainer_GroupTitleFontSizePhone: var(--sapFontHeader4Size);

@_sap_ushell_TileContainer_CatalogGroupTitleFontFamily: var(--sapFontFamily);
@_sap_ushell_TileContainer_CatalogGroupTitleFontWeight: normal;

/* circle div for dragging indicator */
.sapUshellCircle {
	background-color: fade(@sapUiShellTextColor, 40);
	border-radius: 0.57rem;
}

.sapUshellTileContainerLocked h2::after {
	color: var(--sapShell_TextColor);
}

/* only TileContainers located on the dashboard */
.sapUshellDashboardGroupsContainer {

	.sapUshellContainerTitle {
		font-family: @_sap_ushell_TileContainer_GroupTitleFontFamily;
		font-weight: @_sap_ushell_TileContainer_GroupTitleFontWeight;
		text-shadow: var(--sapShell_GroupTitleTextShadow);
	}

	.sapUshellTileContainerEditMode {
		position: relative;
	}
}
.sapUshellContainerTitle {
	color: var(--sapShell_GroupTitleTextColor);
	text-shadow: var(--sapContent_TextShadow);
}

.sapUiMedia-Std-Phone {

	.sapUshellContainerTitle {
		color: @_sap_ushell_TileContainer_GroupHeaderTitleColor;
		font-size: @_sap_ushell_TileContainer_GroupTitleFontSizePhone;
	}

	.sapUshellContainerTitle.sapUshellCatalogContainerTitle {
		font-family: var(--sapFontFamily);
		font-size: var(--sapFontHeader5Size);
		font-weight: @sapUiFontHeaderWeight;
		color: var(--sapShell_GroupTitleTextColor);
	}

	.sapUshellTileContainerTitleInput {
		::placeholder,
		label,
		input {
			font-size: @_sap_ushell_TileContainer_GroupTitleFontSizePhone;
		}
	}
}

.sapUiMedia-Std-Tablet,
.sapUiMedia-Std-Desktop {

	.sapUshellContainerTitle {
		font-size: @_sap_ushell_TileContainer_GroupTitleFontSizeDesktop;
		font-weight: @_sap_ushell_TileContainer_GroupTitleFontWeight;
	}

	.sapUshellContainerTitle.sapUshellCatalogContainerTitle {
		font-family: var(--sapFontFamily);
		font-size: var(--sapFontHeader5Size);
		font-weight: @sapUiFontHeaderWeight;
		color: var(--sapShell_GroupTitleTextColor);
	}

	.sapUshellLinkTile:focus {
		outline-color: var(--sapContent_FocusColor);
	}

	.sapUshellTileContainerTitleInput input {
		font-size: @_sap_ushell_TileContainer_GroupTitleFontSizeDesktop;
	}

	.sapUshellTileContainerTitleInput {
		::placeholder {
			font-size: @_sap_ushell_TileContainer_GroupTitleFontSizeDesktop;
		}
	}
}

/* only TileContainers located on the catalog */
.sapUshellCatalog .sapUshellTileContainerContent h3 {
	font-family: @_sap_ushell_TileContainer_CatalogGroupTitleFontFamily;
	font-weight: @_sap_ushell_TileContainer_CatalogGroupTitleFontWeight;
}

.sapUshellTileContainerContent {

	.sapUshellNoFilteredItems {
		font-size: 1rem !important;
	}

	.sapUshellInner:after {
		font-size: 0;
	}
}

.sapUshellTileContainer {

	.sapUshellTileContainerBeforeContent,
	.sapUshellTileContainerAfterContent {

		.sapUshellAddGroupButton {

			.sapMBtnIcon {
				font-size: 1.0rem;
			}

			div {
				color: @_sap_ushell_TileContainer_AddGroupText;
				border: 1.125rem;
				font-size: 1.25rem;

				& > * {
					font-size: 1.25rem;
					color: @_sap_ushell_TileContainer_AddGroupText;
				}
			}
		}
	}
}

.sapUshellTileContainer .sapFCard:focus::after {
	border: 1px dotted var(--sapContent_FocusColor);
}

.sapMBtn.sapUshellAddGroupButton:hover > .sapMBtnInner:not(.sapMBtnActive) {
	background-color: var(--sapButton_Hover_Background);
}

.sapUshellTileContainerContent {

	.sapUshellTileContainerHeader {

		.sapUshellContainerTitle:focus {
			outline-color: var(--sapContent_FocusColor);
		}

		&:focus {
			outline-color: var(--sapContent_FocusColor);
		}
	}

	.sapUshellTileContainerHeader:focus {
		outline: 1px dotted var(--sapContent_FocusColor);
	}
}

.sapUshellTileContainerEditMode .sapUshellTileContainerHeader {
	position: relative;
}

.sapUshellTileContainerHeader .sapUshellHeaderActionButton div {
	background-color: transparent;
	color: var(--sapShell_TextColor);
}

.sapMBtn.sapUshellHeaderActionButton:hover > .sapMBtnInner:not(.sapMBtnActive) {
	background-color: var(--sapButton_Hover_Background);
}

#dashboardGroups .sapUshellDashboardGroupsContainerItem-placeholder {
	border: 2px dashed @_sap_ushell_TileContainer_PlaceholderColor;
	background-color: transparent;

	.sapUshellTileContainerEditMode {
		background: transparent;
	}
}

.sapUshellDashboardGroupsContainerItem.sapUshellDashboardGroupsContainerItem-clone {

	.sapUshellContainerTitle {
		background-color: @_sap_ushell_TileContainer_EditModeBGColor;
		border-color: var(--sapList_BorderColor) ;
		font-weight: inherit;
	}

	.sapUshellGroupBackgroundContainer {
		background-color: transparent;
	}
}

.sapUshellTileContainerHeader .sapUshellTileContainerTitleInput input {
	background: rgba(255, 255, 255, 0.2);
	color: @_sap_ushell_TileContainer_GroupHeaderTitleColor;
}

.sapUshellTileContainerTitleInput {
	::placeholder,
	label {
		color: @_sap_ushell_TileContainer_GroupHeaderTitleColor;
	}
}

.sapUshellContainerIcon {
	color: @_sap_ushell_TileContainer_GroupHeaderTitleColor;
}

.sapUiMedia-Std-Phone .sapUshellTileContainerTitleInput input {
	font-size: @_sap_ushell_TileContainer_GroupTitleFontSizePhone;
}

.sapUiMedia-Std-Tablet .sapUshellTileContainerTitleInput input,
.sapUiMedia-Std-Desktop .sapUshellTileContainerTitleInput input {
	font-size: @_sap_ushell_TileContainer_GroupTitleFontSizeDesktop;
}

.sapUiMedia-Std-Phone .sapUshellTileContainerTitleInput {
	::placeholder,
	label {
		font-size: @_sap_ushell_TileContainer_GroupTitleFontSizePhone;
	}
}

.sapUiMedia-Std-Tablet .sapUshellTileContainerTitleInput,
.sapUiMedia-Std-Desktop .sapUshellTileContainerTitleInput {
	::placeholder {
		font-size: @_sap_ushell_TileContainer_GroupTitleFontSizeDesktop;
	}

	label {
		/* ie */
		margin-top: 0.125rem;
	}
}

.sapUshellGroupBackgroundContainer {
	background: @_sap_ushell_TileContainer_EditModeBGColor;
}

.sapUshellNoLinksAreaPresentTextInner {
	font-size: 1.125rem;
	font-style: italic;
	color: @sapUiShellGroupTextColor;
}

.sapUshellTransformationError {
	background-color: lighten(@sapBrandColor, 48);
}

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

.sapUshellTransformationErrorText {
	font-family: var(--sapFontFamily);
	font-size: @sapMFontMediumSize;
	line-height: 1.4;
	color: var(--sapTextColor);
}

.sapUshellDashboardGroupsContainer .sapUshellTileContainerEditMode:not(.sapUshellTileContainerLocked):not(.sapUshellTileContainerDefault) {

	.sapUshellContainerTitle:hover {
		outline: 1px solid fade(@sapUiFieldHoverBorderColor, 50);
		background-color: fade(@sapUiFieldHoverBackground, 50);
	}
}

.sapUshellTileContainerEditModeHidden .sapUshellGroupBackgroundContainer {
	background-color: @_sap_ushell_TileContainer_HiddenGroupBackground;
}