@use '../variables' as *;

.#{$prefix}card {
	position: relative;
	border-radius: var(--#{$prefix}card-border-radius);
	z-index: 0;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	background-color: var(--#{$prefix}card-background);
	padding-block: var(--#{$prefix}card-padding-y);
	padding-inline: var(--#{$prefix}card-padding-x);
	display: flex;
	flex-direction: column;
	gap: var(--#{$prefix}card-gap);

	&:hover {
		text-decoration: none;
	}

	&--bordered {
		border: var(--#{$prefix}card-border-width) var(--#{$prefix}card-border-style) var(--#{$prefix}card-border-color);
	}

	&--shadow {
		box-shadow: var(--#{$prefix}card-box-shadow);
	}

	&--hoverable,
	&--selected {
		cursor: pointer;
		user-select: none;
	}

	&--disabled {
		opacity: 0.6;
		cursor: not-allowed;
		user-select: none;
	}

	&-header {
		position: relative;
		flex-shrink: 0;
		height: var(--#{$prefix}card-header-height);
		min-height: var(--#{$prefix}card-header-min-height);
		padding-block: var(--#{$prefix}card-header-padding-y);
		padding-inline: var(--#{$prefix}card-header-padding-x);
		color: var(--#{$prefix}card-header-color);
		display: flex;
		align-items: center;
		gap: var(--#{$prefix}card-header-gap);

		&__start-content,
		&__end-content {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			gap: var(--#{$prefix}card-header-content-gap);
		}

		&__content {
			flex-grow: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		&--centered &__start-content,
		&--centered &__end-content {
			position: absolute;
		}

		&--centered &__start-content {
			left: var(--#{$prefix}card-header-padding-x);
		}

		&--centered &__end-content {
			right: var(--#{$prefix}card-header-padding-x);
		}

		&--centered &__content {
			align-items: center;
			text-align: center;
		}

		& .#{$prefix}card-title {
			font-size: var(--#{$prefix}card-header-title-font-size);
			font-weight: var(--#{$prefix}card-header-title-font-weight);
			line-height: var(--#{$prefix}card-header-title-line-height);
			overflow: hidden;
			color: var(--#{$prefix}card-header-title-color);
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}

		& .#{$prefix}card-subtitle {
			font-size: var(--#{$prefix}card-header-subtitle-font-size);
			font-weight: var(--#{$prefix}card-header-subtitle-font-weight);
			line-height: var(--#{$prefix}card-header-subtitle-line-height);
			overflow: hidden;
			color: var(--#{$prefix}card-header-subtitle-color);
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
	}

	& &-title:not(&-header &-title) {
		flex-shrink: 0;
		padding-block: var(--#{$prefix}card-title-padding-y);
		padding-inline: var(--#{$prefix}card-title-padding-x);
		font-size: var(--#{$prefix}card-title-font-size);
		font-weight: var(--#{$prefix}card-title-font-weight);
		line-height: var(--#{$prefix}card-title-line-height);
		color: var(--#{$prefix}card-title-color);
	}

	& &-title--centered:not(&-header &-title) {
		text-align: center;
	}

	& &-subtitle:not(&-header &-subtitle) {
		flex-shrink: 0;
		font-size: var(--#{$prefix}card-header-subtitle-font-size);
		font-weight: var(--#{$prefix}card-header-subtitle-font-weight);
		line-height: var(--#{$prefix}card-header-subtitle-line-height);
		overflow: hidden;
		color: var(--#{$prefix}card-header-subtitle-color);
	}

	&-body {
		position: relative;
		padding-block: var(--#{$prefix}card-body-padding-y);
		padding-inline: var(--#{$prefix}card-body-padding-x);
		font-size: var(--#{$prefix}card-body-font-size);
		line-height: var(--#{$prefix}card-body-line-height);
		color: var(--#{$prefix}card-body-color);
	}

	&-details {
		position: relative;
		padding-block: var(--#{$prefix}card-details-padding-y, var(--#{$prefix}card-body-padding-y));
		padding-inline: var(--#{$prefix}card-body-padding-x);
		font-size: var(--#{$prefix}card-details-font-size, var(--#{$prefix}card-body-font-size));
		line-height: var(--#{$prefix}card-body-line-height);
		color: var(--#{$prefix}card-body-color);
		background-color: var(--#{$prefix}card-details-background, transparent);

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			border-top: 1px solid var(--#{$prefix}card-border-color);
		}
	}

	&-details + &-footer {
		border-top-width: 1px;
		border-top-color: var(--#{$prefix}card-border-color);
	}

	&-footer {
		flex-shrink: 0;
		position: relative;
		min-height: var(--#{$prefix}card-footer-min-height);
		padding-block: var(--#{$prefix}card-footer-padding-y);
		padding-inline: var(--#{$prefix}card-footer-padding-x);
		border-top-width: 0px;
		border-top-style: solid;
		border-top-color: var(--#{$prefix}card-footer-border-color);
		background-color: var(--#{$prefix}card-footer-background);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: var(--#{$prefix}card-footer-gap, 0.5rem);
	}

	&-media {
		position: relative;
		margin: 8px;
		border-radius: 8px;
		aspect-ratio: 1 / 1;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.08);

		&__top-left-content {
			padding: 4px;
			position: absolute;
			top: 0;
			left: 0;
		}

		&__top-right-content {
			padding: 4px;
			position: absolute;
			top: 0;
			right: 0;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	&--divider &-body {
		margin-top: var(--#{$prefix}card-padding-y);

		&::after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			border-bottom: 1px solid var(--#{$prefix}card-border-color);
		}
	}

	&--divider &-header ~ &-body {
		margin-bottom: var(--#{$prefix}card-padding-y);

		&::before {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			border-top: 1px solid var(--#{$prefix}card-border-color);
		}
	}

	&--divider > &-body:first-child,
	&--divider :not([hidden]):first-child &-body::before {
		border-top: none;
	}

	&--divider > &-body:last-child,
	&--divider :not([hidden]):last-child &-body {
		margin-bottom: 0;

		&::after {
			border-bottom: none;
		}
	}

	// Without divider: avoid double-padding at section boundaries.
	// Header→Body gap = header-padding-end, Body→Footer gap = footer-padding-start.
	// Both match header/footer padding-y, giving symmetric spacing.
	&:not(.#{$prefix}card--divider) > &-header + &-body {
		padding-block-start: 0;
	}

	&:not(.#{$prefix}card--divider) > &-body:has(+ &-footer) {
		padding-block-end: 0;
	}
}