@layer theme, base, components, utilities;

@layer components {
	.ml-testimonial {
		--ml-testimonial-gap: var(--ml-space-4);
		--ml-testimonial-padding: var(--ml-space-5);
		--ml-testimonial-quote-text: var(--text-md);
		--ml-testimonial-name-text: var(--text-sm);
		--ml-testimonial-role-text: var(--text-2xs);
		--ml-testimonial-mark-text: var(--text-5xl);

		display: flex;
		flex-direction: column;
		gap: var(--ml-testimonial-gap);
		border: var(--border-thin) solid var(--border);
		border-radius: var(--radius-2xl);
		background: var(--surface);
		padding: var(--ml-testimonial-padding);
		color: var(--text-body);
	}

	.ml-testimonial[data-size="sm"] {
		--ml-testimonial-gap: var(--ml-space-3);
		--ml-testimonial-padding: var(--ml-space-4);
		--ml-testimonial-quote-text: var(--text-sm);
		--ml-testimonial-name-text: var(--text-xs);
		--ml-testimonial-role-text: var(--text-3xs);
		--ml-testimonial-mark-text: var(--text-4xl);
	}

	.ml-testimonial[data-size="lg"] {
		--ml-testimonial-gap: var(--ml-space-5);
		--ml-testimonial-padding: var(--ml-space-7);
		--ml-testimonial-quote-text: var(--text-lg);
		--ml-testimonial-name-text: var(--text-base);
		--ml-testimonial-role-text: var(--text-xs);
	}

	.ml-testimonial__mark {
		color: var(--accent);
		font-family: var(--font-mono);
		font-size: var(--ml-testimonial-mark-text);
		line-height: 0.5;
		opacity: 0.7;
	}

	.ml-testimonial__quote {
		margin: 0;
		color: var(--text-body);
		font-size: var(--ml-testimonial-quote-text);
		line-height: var(--leading-relaxed);
		text-wrap: pretty;
	}

	.ml-testimonial[data-size="lg"] .ml-testimonial__quote {
		font-family: var(--font-headline);
		font-weight: 500;
	}

	.ml-testimonial__author {
		display: flex;
		align-items: center;
		gap: var(--ml-space-3);
		margin-block-start: auto;
		border-block-start: var(--border-thin) solid var(--border);
		padding-block-start: var(--ml-space-4);
	}

	.ml-testimonial__author-copy {
		display: flex;
		min-width: 0;
		flex-direction: column;
	}

	.ml-testimonial__name {
		color: var(--primary);
		font-size: var(--ml-testimonial-name-text);
		font-weight: 600;
		line-height: var(--leading-snug);
	}

	a.ml-testimonial__name {
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		gap: var(--ml-space-1);
		transition: color var(--duration-micro) var(--ease-out);
	}

	a.ml-testimonial__name:hover {
		color: var(--accent);
	}

	.ml-testimonial__role {
		color: var(--text-muted);
		font-family: var(--font-mono);
		font-size: var(--ml-testimonial-role-text);
		line-height: var(--leading-normal);
	}

	.ml-testimonial[data-variant="plain"] .ml-testimonial__quote {
		font-family: var(--font-sans);
		font-weight: 500;
	}

	.ml-testimonial[data-variant="plain"] .ml-testimonial__author {
		margin-block-start: auto;
	}
}