/* Patterns - Content - Card Background */
////
/// @group Patterns-Card_Background
/// Patterns - Content - Card Background

///
.card-background {
	align-items: center;
	border-radius: var(--border-radius-soft);
	color: get-text-color('neutral-0');
	display: flex;
	overflow: hidden;
	padding: var(--space-m);
	position: relative;

	// Service Studio Preview
	& {
		-servicestudio-height: auto !important;
	}

	&-content {
		display: flex;
		position: relative;
		width: 100%;
		z-index: var(--layer-local-tier-1);

		// Service Studio Preview
		& {
			-servicestudio-display: initial;
		}

		&.top-left,
		&.center-left,
		&.bottom-left {
			text-align: left;
		}

		&.top-center,
		&.center,
		&.bottom-center {
			text-align: center;
		}

		&.top-right,
		&.center-right,
		&.bottom-right {
			text-align: right;
		}
	}

	&-image,
	&-color {
		@include absolute-left-top();

		height: 100%;
		width: 100%;
	}

	&-image {
		img {
			height: 100%;
			object-fit: cover;
			object-position: center center;
			width: 100%;
		}
	}

	&-color {
		opacity: 0.6;

		&:after {
			background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
			content: '';
			height: 100%;
			left: 0;
			opacity: 1;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: var(--layer-local-tier-1);
		}
	}
}

///
.remove-card-gradient {
	.card-background-color {
		&:after {
			background: none;
		}
	}
}

///
.layout-native {
	.card-background {
		padding: var(--space-base);

		&.padding-none {
			padding: var(--space-none);
		}
	}
}