/*
 * Text recipe — applies one of the foundation's `--style-{name}-*`
 * named typography styles, with per-axis overrides via local `--_text-*`
 * variables. Default style is `body`.
 *
 * Order of resolution (per CSS variable cascade):
 *   1. Per-instance override (`--_text-{axis}`) set inline by the wrapper
 *      when the consumer passes a prop like `size="lg"`.
 *   2. Named style token (`--style-{textStyle}-{axis}`) selected by the
 *      active `data-style` attribute.
 *
 * `revert-layer` is not used here — typography has authoritative defaults
 * (it's never "unset" — there is always a body/prose/label/caption fallback).
 */

[data-text] {
	font-family: var(--_text-font-family, var(--style-body-font-family));
	font-size: var(--_text-font-size, var(--style-body-font-size));
	font-weight: var(--_text-font-weight, var(--style-body-font-weight));
	line-height: var(--_text-line-height, var(--style-body-line-height));
	letter-spacing: var(--_text-letter-spacing, var(--style-body-letter-spacing));
	color: var(--_text-color, var(--style-body-color));
	text-align: var(--_text-align, inherit);
	font-style: normal;
	text-decoration: none;
	margin: 0;
}

[data-text][data-style='prose'] {
	font-family: var(--_text-font-family, var(--style-prose-font-family));
	font-size: var(--_text-font-size, var(--style-prose-font-size));
	font-weight: var(--_text-font-weight, var(--style-prose-font-weight));
	line-height: var(--_text-line-height, var(--style-prose-line-height));
	letter-spacing: var(--_text-letter-spacing, var(--style-prose-letter-spacing));
	color: var(--_text-color, var(--style-prose-color));
}

[data-text][data-style='label'] {
	font-family: var(--_text-font-family, var(--style-label-font-family));
	font-size: var(--_text-font-size, var(--style-label-font-size));
	font-weight: var(--_text-font-weight, var(--style-label-font-weight));
	line-height: var(--_text-line-height, var(--style-label-line-height));
	letter-spacing: var(--_text-letter-spacing, var(--style-label-letter-spacing));
	color: var(--_text-color, var(--style-label-color));
}

[data-text][data-style='caption'] {
	font-family: var(--_text-font-family, var(--style-caption-font-family));
	font-size: var(--_text-font-size, var(--style-caption-font-size));
	font-weight: var(--_text-font-weight, var(--style-caption-font-weight));
	line-height: var(--_text-line-height, var(--style-caption-line-height));
	letter-spacing: var(--_text-letter-spacing, var(--style-caption-letter-spacing));
	color: var(--_text-color, var(--style-caption-color));
}

[data-text][data-italic] {
	font-style: italic;
}

[data-text][data-underline] {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Single-line truncation with ellipsis. Requires a constrained
 * inline-size on the container; this rule sets the necessary primitives
 * (white-space + overflow + text-overflow) so the consumer only needs
 * to provide the width. */
[data-text][data-truncate] {
	display: inline-block;
	max-inline-size: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

/* Multi-line clamp via -webkit-line-clamp. Read the line count from
 * the per-instance `--_text-clamp` (set inline by the wrapper). */
[data-text][data-clamp] {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--_text-clamp, 1);
	line-clamp: var(--_text-clamp, 1);
	overflow: hidden;
}

/* When clamp + truncate collide, clamp wins (multi-line). */
[data-text][data-clamp][data-truncate] {
	display: -webkit-box;
	white-space: normal;
	text-overflow: clip;
}