@use '../../scss/typography' as t;
@use '../../scss/layout';

$card-border-radius: 8px;
$card-inner-border-radius: calc(#{$card-border-radius} - 1px);

@mixin daff-card-base {
	display: flex;
	border-radius: $card-border-radius;
	position: relative;

	.daff-card__image {
		display: inline-block;
		width: 100%;
	}

	.daff-card__wrapper {
		position: relative;
		height: 100%;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			border-radius: $card-border-radius;
			opacity: 0;
			width: 100%;
			transition: opacity 300ms;
			z-index: 1;
		}
	}

	&.daff-vertical {
		flex-direction: column;

		.daff-card__image {
			border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;

			img {
				border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;
			}
		}
	}

	&.daff-horizontal {
		flex-wrap: wrap;

		@include layout.breakpoint(mobile) {
			flex-direction: row;
			flex-wrap: nowrap;
		}

		.daff-card__image {
			border-radius: $card-inner-border-radius 0 0 $card-inner-border-radius;

			img {
				border-radius: $card-inner-border-radius 0 0 $card-inner-border-radius;
				object-fit: cover;
				object-position: center center;
				height: 100% !important; /* stylelint-disable-line declaration-no-important */
				width: 100%;
			}
		}
	}

	.daff-card__body {
		padding: 1.5rem;
		position: relative;
		z-index: 2;
	}

	.daff-card__icon {
		display: block;
		margin: 0 0 0.5rem;
	}

	.daff-card__tagline {
		@include t.subheading;
		padding: 0;
		margin: 0 0 0.25rem;
	}

	.daff-card__title {
		font-size: 1.25rem;
		font-weight: 600;
		line-height: 1.5rem;

		+ .daff-card__content {
			margin: 1rem 0 0;
		}
	}

	.daff-card__content {
		p {
			&:first-of-type {
				margin-top: 0;
			}

			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}

	.daff-card__actions {
		padding: 0 1.5rem 1.5rem;
		position: relative;
		z-index: 2;
	}
}

@mixin daff-linked-card-base {
	text-decoration: none;

	.daff-card__image {
		+ .daff-card__wrapper {
			&::after {
				border-radius: 0 0 $card-border-radius $card-border-radius;
			}
		}
	}

	&.horizontal {
		.daff-card__image {
			+ .daff-card__wrapper {
				&::after {
					border-radius: 0 $card-border-radius $card-border-radius 0;
				}
			}
		}
	}
}