/* ================================== */
/* CSS for control sap.f/CardLoading  */
/* Base theme                         */
/* ================================== */
@_sap_f_Card_FocusBorderWidth: 1px;
@sap_f_Card_Background_Placeholder_Color: @sapContent_Placeholderloading_Background;
@sap_f_Card_Placeholder_Gradient: linear-gradient(to right, @sapContent_Placeholderloading_Background 0%, @sapContent_Placeholderloading_Background 35%, darken(@sapContent_Placeholderloading_Background, 5) 50%, @sapContent_Placeholderloading_Background 65%, @sapContent_Placeholderloading_Background 100%);

.sapFCard {

	.sapFCardHeader.sapFCardHeaderLoading,
	&.sapFCardPreview .sapFCardHeader {

		.sapFCardHeaderImage.sapFCardHeaderItemBinded {
			height: 3rem;
			width: 3rem;
			margin-right: 0.75rem;
			//hide the fallback icon
		}

		.sapFCardHeaderText .sapFCardHeaderTextFirstLine {

			.sapFCardTitle.sapFCardHeaderItemBinded {
				flex: 1 0;
				position: relative;
			}

			.sapFCardStatus.sapFCardHeaderItemBinded {
				min-width: 1.5rem;
				min-height: 1rem;
			}
		}

		.sapFCardHeaderItemBinded::after {
			.sapFCardLoadingShimmerMixin();
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}

	&.sapFCardPreview .sapFCardFilter,
	.sapFCardFilterLoading {
		position: relative;
		&::after {
			.sapFCardLoadingShimmerMixin();
			content: "";
			position: absolute;
			top: 2px;
			bottom: 2px;
			left: 0;
			right: 0;
		}
	}

	&.sapFCardPreview .sapFCardFooter,
	.sapFCardFooterLoading {
		.sapUiIntActionsStrip {
			position: relative;
			&::after {
				content: "";
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: @sapUiTileBackground;
			}
		}
	}

	.sapFCardNumericHeader.sapFCardHeaderLoading,
	&.sapFCardPreview .sapFCardNumericHeader {
		.sapFCardNumericIndicatorsMain .sapFCardHeaderItemBinded {
			min-width: 5rem;
		}

		.sapFCardHeaderSideIndicator.sapFCardHeaderItemBinded {
			flex: 1 0;
			min-height: 2rem;
		}

		.sapFCardHeaderDetails.sapFCardHeaderItemBinded {
			flex: 1 0;
			min-height: 0.5rem;
			width: 100%;
		}
	}

	.sapFCardContent {

		.sapFCardContentHidden {
			display: none;
		}

		.sapFCardBaseContent.sapFCardContentLoading:not(.sapFCardObjectContent) > :not(.sapFCardContentPlaceholder) {
			display: none;
		}

		.sapFCardContentPlaceholder {
			outline: none;
		}

		.sapFCardContentPlaceholder:focus::before {
			content: '';
			display: block;
			position: absolute;
			left: 1px;
			bottom: 1px;
			right: 1px;
			top: 1px;
			border: @_sap_f_Card_FocusBorderWidth dotted @sapUiContentFocusColor;
			pointer-events: none;
		}

		.sapFCardContentGenericPlaceholder,
		.sapFCardContentAnalyticalPlaceholder {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;

			.sapFCardSVG {
				fill: @sapUiTileBackground;
			}
		}

		.sapFCardContentAnalyticalPlaceholder > div {
			padding: 0.5rem;
		}

		.sapFCardContentGenericPlaceholder {
			.sapFCardLoadingShimmer {
				max-width: 144px;
				max-height: 144px;
				height: ~"calc(100% - 4px)"; /* leave place for the focus */
			}
		}
	}

	.sapFCardLoadingShimmer {
		.sapFCardLoadingShimmerMixin();
	}

	.sapFCardLoadingShimmerMixin() {
		background-color: @sap_f_Card_Background_Placeholder_Color;
		background-image: @sap_f_Card_Placeholder_Gradient;
		background-repeat: no-repeat;
		background-size: 800px 100%;
		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;
		}
	}

	&.sapFCardPreview {
		.sapFCardHeaderItemBinded::after,
		.sapFCardFilter::after,
		.sapFCardLoadingShimmer,
		.sapUiIntActionsStrip::after {
			background-image: unset !important;
			animation-name: unset !important;
		}
	}
}
