.eds-c-card-composable {
	display: flex;
	flex-direction: column;
	font-size: $t-eds-c-card-composable-font-size;
	color: $t-a-palette-default-greyscale-800;
	background-color: $t-a-palette-default-white;
	overflow: hidden;
	font-family: $t-eds-c-card-composable-highlight-font-family;
	border-radius: $t-eds-c-card-composable-border-radius;
	border: 1px solid $t-a-palette-default-blue-light;

	&.eds-c-card-composable--faux-link {
		position: relative;

		&:hover {
			background-color: $t-eds-c-card-composable-background-color-hover;

			.eds-c-card-composable__sidebar--with-separator {
				&::before {
					background-color: $t-a-palette-default-white;
				}
			}

			.eds-c-card-composable__icon-container {
				background-color: $t-a-palette-default-white;
			}

			.eds-c-card-composable__metadata-list-horizontal {
				div:not(:last-child) {
					border-bottom: 1px solid $t-a-palette-default-white;
				}
			}
		}
	}
}

.eds-c-card-composable--highlight-default {
	border-top: $t-eds-c-card-composable-highlight-border-width-style $t-eds-c-card-composable-highlight-border-color;
}

.eds-c-card-composable--highlight-action {
	border-top: $t-eds-c-card-composable-highlight-border-width-style $t-eds-c-card-composable-highlight-action-border-color;
}

.eds-c-card-composable__picture,
.eds-c-card-composable__image {
	flex: 0 0 auto;
	width: 100%;
	display: inline-block;
	overflow: hidden;
	margin: 0;

	img {
		width: 100%;
		height: inherit;
		object-fit: cover;
		@supports (aspect-ratio: 1 / 1) {
			padding-bottom: 0;
			// Customizable aspect ratio: custom value , fallback
			aspect-ratio: var(--eds-c-card-composable--image-aspect-ratio, #{$t-eds-c-card-composable-image-aspect-ratio});
		}
	}
}

.eds-c-card-composable__summary {
	line-height: $t-eds-c-card-composable-line-height;

	&.eds-c-card__summary--truncate-text {
		max-width: $t-eds-c-card-composable-content-max-width;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

.eds-c-card-composable__label,
p.eds-c-card-composable__label {
	margin-bottom: $t-a-space-relative-100;
}

.eds-c-card-composable__container {
	display: flex;
	flex-direction: column;
}

.eds-c-card-composable__container--with-sidebar {
	flex-direction: row;
	flex-grow: 1;
}

.eds-c-card-composable__body {
	display: flex;
	flex: 1 1 auto;
	word-break: break-word;
	font-size: $t-eds-c-card-composable-font-size;
	padding: $t-a-space-absolute-400;
}

.eds-c-card-composable__title {
	font-size: $t-a-typography-font-size-default;
	margin-top: $t-a-space-absolute-0;
	margin-bottom: $t-a-space-absolute-200;
	max-width: $t-eds-c-card-composable-content-max-width;

	& > a {
		color: $t-a-palette-default-greyscale-800;
	}

	& > a:visited {
		color: $t-a-palette-default-greyscale-800;
	}
}

.eds-c-card-composable--faux-link .eds-c-card-composable__title {
	& > a {
		text-decoration: none;
		@include u-link-faux-block;
	}
}

.eds-c-card-composable__sidebar {
	padding: 0 $t-a-space-absolute-400 $t-a-space-absolute-400 $t-a-space-absolute-400;
}

.eds-c-card-composable__sidebar--with-separator {
	display: flex;
	padding: 0 $t-a-space-absolute-400 $t-a-space-absolute-400 $t-a-space-absolute-400;
	flex-direction: column;
	gap: $t-a-space-absolute-200;

	&::before {
		content: "";
		display: block;
		height: 1px;
		flex: 0 2 auto;
		background: $t-a-palette-default-blue-light;
	}
}

.eds-c-card-composable__icon-container {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: center;
	width: $t-eds-c-card-composable-icon-container-space;
	height: $t-eds-c-card-composable-icon-container-space;
	border-radius: 50%;
	background-color: $t-eds-c-card-composable-highlight-background-color;
	padding: $t-a-space-absolute-400;
	margin-right: $t-a-space-absolute-400;
	color: $t-a-palette-default-blue-light-400;
}

.eds-c-card-composable__metadata-list {
	margin: 0;
	line-height: $t-a-typography-line-height-md;

	div:not(:last-child) {
		margin-bottom: $t-a-space-absolute-400;
	}

	dt {
		margin-bottom: $t-a-space-absolute-100;
	}

	dd {
		font-weight: $t-a-typography-font-weight-bold;
		white-space: nowrap;
	}
}

.eds-c-card-composable__metadata-list-horizontal {
	margin: 0;
	flex-grow: 1;

	div {
		display: flex;
		justify-content: space-between;
	}

	div:not(:last-child) {
		border-bottom: 1px solid $t-a-palette-default-blue-light;
		padding-bottom: $t-a-space-absolute-200;
		margin-bottom: $t-a-space-absolute-200;
	}

	dt {
		margin-bottom: 0;
	}

	dd {
		font-weight: $t-a-typography-font-weight-bold;
	}

	dd:not(:last-child) {
		margin-bottom: $t-a-space-absolute-400;
	}
}

.eds-c-card-composable__journal-cover img {
	border-radius: $t-eds-c-card-composable-border-radius;
	max-width: 100%;
}

.eds-c-card-composable__body-journal {
	display: grid;
	grid-template-columns: $t-eds-c-card-composable-journal-cover-stack-max-width 1fr;
	grid-template-rows: 1fr auto;
	gap: $t-eds-c-card-composable-journal-cover-gap $t-eds-c-card-composable-journal-cover-gap;
	grid-template-areas:
    "eds-c-card-composable__journal-cover eds-c-card-composable__journal-title"
    "eds-c-card-composable__journal-description eds-c-card-composable__journal-description";
}

.eds-c-card-composable__journal-cover {
	grid-area: eds-c-card-composable__journal-cover;
}

.eds-c-card-composable__journal-title {
	grid-area: eds-c-card-composable__journal-title;
}

.eds-c-card-composable__journal-description {
	grid-area: eds-c-card-composable__journal-description;
}

@include from-tablet {
	.eds-c-card-composable--horizontal {
		&.eds-c-card-composable--highlight-default {
			border-top: 1px solid $t-a-palette-default-blue-light;
			border-left: $t-eds-c-card-composable-highlight-border-width-style $t-eds-c-card-composable-highlight-border-color;
		}

		&.eds-c-card-composable--highlight-action {
			border-top: 1px solid $t-a-palette-default-blue-light;
			border-left: $t-eds-c-card-composable-highlight-border-width-style $t-eds-c-card-composable-highlight-action-border-color;
		}

		.eds-c-card-composable__container--to-sidebar {
			flex-direction: row;
			flex-grow: 1;
			flex-wrap: wrap;
		}

		.eds-c-card-composable__sidebar {
			width: 280px;
			padding: $t-a-space-absolute-400 $t-a-space-absolute-400 $t-a-space-absolute-400 0;
			flex-grow: 1;
		}

		.eds-c-card-composable__sidebar--with-separator {
			display: flex;
			flex-direction: row;
			gap: $t-a-space-absolute-400;

			&::before {
				width: 1px;
				height: auto;
			}
		}

		.eds-c-card-composable__title {
			font-size: $t-a-typography-font-size-l;
		}

		.eds-c-card-composable__body {
			flex-basis: 0;
			flex-grow: 999;
			min-width: $t-eds-c-card-composable-body-max-width;
		}

		.eds-c-card-composable__body-journal {
			grid-template-columns: $t-eds-c-card-composable-journal-cover--horizontal-max-width 1fr;
			grid-template-rows: auto 1fr;
			grid-template-areas:
    "eds-c-card-composable__journal-cover eds-c-card-composable__journal-title"
    "eds-c-card-composable__journal-cover eds-c-card-composable__journal-description";
			gap: 0 $t-eds-c-card-composable-journal-cover-gap;
			flex-basis: 0;
			flex-grow: 999;
			min-width: 400px;
		}

		.eds-c-card-composable__journal-cover {
			grid-area: eds-c-card-composable__journal-cover;
		}

		.eds-c-card-composable__journal-title {
			grid-area: eds-c-card-composable__journal-title;
		}

		.eds-c-card-composable__journal-description {
			grid-area: eds-c-card-composable__journal-description;
		}
	}
}
