@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;

$card-color: tokens.$text !default;
$card-shadow: tokens.$box-shadow-light;
$card-padding: tokens.$spacer-5;
$card-border-radius: tokens.$border-radius-sm;
$card-row-gap: tokens.$spacer-3 !default;
$card-column-gap: tokens.$spacer-5 !default;

.card {
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: flex-start;
	max-width: 100%;
	padding: $card-padding 0 0;
	border: 1px solid tokens.$border-white-high-contrast;
	border-radius: $card-border-radius;
	outline-color: tokens.$text;
	background-color: tokens.$card-background;
	color: $card-color;
	box-shadow: $card-shadow;

	> :first-child {
		border-start-end-radius: $card-border-radius;
		border-start-start-radius: $card-border-radius;
	}

	> :last-child {
		border-end-end-radius: $card-border-radius;
		border-end-start-radius: $card-border-radius;
	}

	.card-template {
		display: grid;
		flex-grow: 1;
		padding: $card-padding;
		grid-template: auto / 1fr tokens.$spacer-10;
		gap: $card-row-gap $card-column-gap;
		grid-template-areas:
			'supertitle supertitle'
			'title title'
			'detail icon';

		/* stylelint-disable no-descending-specificity */

		.card-title {
			margin-block-end: tokens.$spacer-5;
		}
	}

	.card-template-icon {
		margin-block-start: auto;
		grid-area: icon;
		width: tokens.$spacer-10;
		height: tokens.$spacer-10;
	}

	.card-template-detail {
		display: flex;
		flex-direction: column;
		align-self: stretch;
		justify-content: flex-end;
		font-size: tokens.$font-size-9;
		line-height: 1.25;
		grid-area: detail;
	}

	.card-header {
		position: relative;
		margin-block-end: 1.125rem;

		.card-header-image {
			position: relative;
			width: 64px;
			height: 64px;

			img,
			svg {
				@include mixins.overlay;

				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}

	.card-header,
	.card-content,
	.card-template {
		padding-inline: $card-padding;

		&:first-child {
			padding-block-start: $card-padding;
			margin-block-start: -$card-padding;
		}
	}

	// optional prescriptive inner elements

	.card-supertitle {
		@include mixins.line-clamp(1);

		font-size: tokens.$font-size-9;
		letter-spacing: tokens.$letter-spacing-wide;
		line-height: 1;
		text-transform: uppercase;
		grid-area: supertitle;
	}

	// includes some resets for <a> and <button>

	.card-title {
		@include mixins.line-clamp(3);

		flex-grow: 1;
		margin: 0;
		padding: 0;
		border: none;
		color: tokens.$primary;
		font-size: tokens.$font-size-7;
		font-weight: tokens.$weight-semibold;
		line-height: 1.25;
		text-align: start;
		text-decoration: none;
		appearance: none;
		grid-area: title;

		&:first-child {
			margin-block-start: none;
		}

		&:only-child {
			margin: 0;
		}

		&:visited {
			color: tokens.$visited;
		}
	}

	/* stylelint-disable selector-no-qualifying-type */

	a.card-title:hover,
	button.card-title:hover {
		text-decoration: underline;
		cursor: pointer;
	}

	.card-content {
		flex-grow: 1;
		margin-block-end: 1.125rem;

		> *:not(:first-child) {
			margin-block-start: 0.5rem;
		}
	}

	.card-content-description {
		@include mixins.line-clamp(4);

		max-height: inherit;
		padding-block-end: 0;
		font-size: tokens.$font-size-8;
		line-height: 1.25;
	}

	.card-footer {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		border-block-start: 1px solid tokens.$border;
		margin-inline: $card-padding;

		// Artificial alignment of card item, intended for use on when there's only a single .card-footer-items

		&.card-footer-left,
		&.card-footer-right {
			.card-footer-item {
				flex-grow: 0;
			}
		}

		&.card-footer-left {
			justify-content: flex-start;
		}

		&.card-footer-right {
			justify-content: flex-end;
		}

		.card-footer-item {
			display: flex;
			flex-grow: 1;
			flex-shrink: 1;
			align-items: center;
			padding-block: 0.375rem;

			&:first-child,
			&:only-child {
				justify-content: flex-start;
			}

			&:last-child {
				justify-content: flex-end;
			}

			/* stylelint-disable selector-max-specificity */

			&:not(:last-child):not(:first-child):not(:only-child) {
				justify-content: center;
			}

			/* stylelint-enable selector-max-specificity */

			// Allow buttons to fit perfectly in card footer

			.buttons {
				margin-block: 0;
			}

			.button {
				margin-block-end: 0;
			}

			/* stylelint-disable selector-max-specificity */

			.button:last-child {
				margin-inline-end: 0;
			}

			/* stylelint-enable selector-max-specificity */
		}
	}

	@include mixins.tablet {
		&.card-horizontal {
			flex-flow: row wrap;

			.card-content {
				padding-inline-start: 0;
				max-width: calc(100% - 7rem);
				padding-inline-end: tokens.$spacer-10 + tokens.$spacer-5;
			}

			.card-footer {
				flex-grow: 1;
				flex-shrink: 1;
				width: 100%;
			}
		}
	}
}