@mixin card() {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	background-clip: border-box;
}

@mixin cardHeaderFooterDuplicates() {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0.875rem 0;
	line-height: 1.5;
	margin: 0 1rem;
	background-color: inherit;
}

@mixin cardHeader() {
	@include cardHeaderFooterDuplicates();
	&--rich {
		.dui__card__header__title {
			flex: 1;
		}
		.dui__card__header__actions {
			padding-left: 1rem;
			flex: 0 0 auto;
			& > * {
				margin-right: 0.3125rem;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
}

@mixin cardBody() {
	padding: 1rem;
}

@mixin cardFooter() {
	@include cardHeaderFooterDuplicates();
}

@mixin cardImg() {
	width: 100%;
	overflow: hidden;
	& > img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
}

.dui__card {
	@include card();
	&__loader {
		@include componentLoader();
	}
	&__img {
		grid-area: card-img;
		@include cardImg();
	}
	&__header {
		grid-area: card-header;
		@include cardHeader();
	}
	&__body {
		grid-area: card-body;
		@include cardBody();
	}
	&__footer {
		grid-area: card-footer;
		@include cardFooter();
		@each $name, $size in $flexJustifyOptions {
			&.dui__card__footer--#{$name} {
				justify-content: $size;
			}
		}
	}
	&--img {
		display: grid;
		gap: 0;
		&.img-top {
			grid-template-columns: 1fr;
			grid-template-areas:
				"card-img"
				"card-header"
				"card-body"
				"card-footer";
		}
		&.img-right {
			grid-template-columns: 1fr 40%;
			grid-template-areas:
				"card-header card-img"
				"card-body card-img"
				"card-footer card-img";
		}
		&.img-bottom {
			grid-template-columns: 1fr;
			grid-template-areas:
				"card-header"
				"card-body"
				"card-footer"
				"card-img";
		}
		&.img-left {
			grid-template-columns: 40% 1fr;
			grid-template-areas:
				"card-img card-header"
				"card-img card-body"
				"card-img card-footer";
		}
	}
	&--loading {
		cursor: progress;
		&-disabled {
			pointer-events: none;
		}
	}
}