// Card

// this should emulate external packages consumption
@import "./card-api";

.#{$eps-prefix}card {
	border: var(--card-border);
	border-radius: $card-border-radius;
	transition: $card-transition;
	font-size: $card-font-size;

	&__header {
		padding: $card-header-padding;
		border-block-end: var(--card-header-footer-border);
		min-height: $card-header-height;
		display: flex;
		align-items: center;

		&--padding {
			padding: var(--eps-card-header-padding);
		}
	}

	/*
	 todo: TBD: Optionally remove headline styling in favor of a global atom depending on variation needs
	*/

	&__headline {
		color: var(--card-headline-color);
		margin-block-end: 0;
		font-weight: $card-headline-font-weight;
		flex-grow: 1;
		@include text-truncate();
	}

	&__body {
		padding: $card-body-padding-block $card-body-padding-inline;

		&--padding {
			padding: var(--eps-card-body-padding);
		}
	}

	// figure is here to assist with aspect ratio, and dealing with different image sizes and bg-color for shorter images e.g. header, footer.
	&__figure {
		background-color: var(--card-figure-background-color);
		position: relative;
		padding-block-end: $card-image-aspect-ratio;
		overflow: hidden;
		height: 0;
	}

	&__image {
		width: 100%;
		object-fit: contain;
		object-position: top;
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
	}

	&__image-overlay {
		position: absolute;
		inset-block-start: 0;
		background-color: var(--card-image-overlay-background-color);
		z-index: 1;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: $card-image-overlay-transition;

		&:hover {
			opacity: 1;
		}
	}

	&__footer {
		padding: $card-padding;
		border-block-start: var(--card-header-footer-border);
		font-size: $card-footer-font-size;

		&--padding {
			padding: var(--eps-card-footer-padding);
		}
	}
}
