/* ----------------------------------------------------------------------------
text: decouple semantics from presentation
---------------------------------------------------------------------------- */

.font-size-xxxs {
	font-size: var(--font-size-xxxs);
}
.font-size-xxs {
	font-size: var(--font-size-xxs);
}
.font-size-xs {
	font-size: var(--font-size-xs);
}
.font-size-sm {
	font-size: var(--font-size-sm);
}
.font-size-md {
	font-size: var(--font-size-md);
}
.font-size-lg {
	font-size: var(--font-size-lg);
}
.font-size-xl {
	font-size: var(--font-size-xl);
}
.font-size-xxl {
	font-size: var(--font-size-xxl);
}
.font-size-xxxl {
	font-size: var(--font-size-xxxl);
}
.font-size-xxxxl {
	font-size: var(--font-size-xxxxl);
}

.font-weight-xs {
	font-weight: var(--font-weight-xs);
}
.font-weight-sm {
	font-weight: var(--font-weight-sm);
}
.font-weight-md {
	font-weight: var(--font-weight-md);
}
.font-weight-lg {
	font-weight: var(--font-weight-lg);
}
.font-weight-xl {
	font-weight: var(--font-weight-xl);
}
.font-weight-xxl {
	font-weight: var(--font-weight-xxl);
}

.left {
	text-align: start;
}
.right {
	text-align: end;
}
.center {
	text-align: center;
}

.line-length-xs {
	max-inline-size: var(--line-length-xs);
}
.line-length-sm {
	max-inline-size: var(--line-length-sm);
}
.line-length-md {
	max-inline-size: var(--line-length-md);
}
.line-length-lg {
	max-inline-size: var(--line-length-lg);
}
.line-length-xl {
	max-inline-size: var(--line-length-xl);
}

.line-height-flush {
	line-height: var(--line-height-flush);
}
.line-height-xxs {
	line-height: var(--line-height-xxs);
}
.line-height-xs {
	line-height: var(--line-height-xs);
}
.line-height-sm {
	line-height: var(--line-height-sm);
}
.line-height-md {
	line-height: var(--line-height-md);
}
.line-height-lg {
	line-height: var(--line-height-lg);
}

.letter-spacing-sm {
	letter-spacing: var(--letter-spacing-sm);
}
.letter-spacing-md {
	letter-spacing: var(--letter-spacing-md);
}
.letter-spacing-lg {
	letter-spacing: var(--letter-spacing-lg);
}
.letter-spacing-xl {
	letter-spacing: var(--letter-spacing-xl);
}

.balance {
	text-wrap: balance;
}
.pretty {
	text-wrap: pretty;
}
.italic {
	font-style: italic;
}
.undecorated {
	text-decoration: none;
}
.unlisted {
	list-style-type: none;
}
.uppercase {
	text-transform: uppercase;
}

@media (--md) {
	.font-size-xxxs\@md {
		font-size: var(--font-size-xxxs);
	}
	.font-size-xxs\@md {
		font-size: var(--font-size-xxs);
	}
	.font-size-xs\@md {
		font-size: var(--font-size-xs);
	}
	.font-size-sm\@md {
		font-size: var(--font-size-sm);
	}
	.font-size-md\@md {
		font-size: var(--font-size-md);
	}
	.font-size-lg\@md {
		font-size: var(--font-size-lg);
	}
	.font-size-xl\@md {
		font-size: var(--font-size-xl);
	}
	.font-size-xxl\@md {
		font-size: var(--font-size-xxl);
	}
	.font-size-xxxl\@md {
		font-size: var(--font-size-xxxl);
	}
	.font-size-xxxxl\@md {
		font-size: var(--font-size-xxxxl);
	}

	.left\@md {
		text-align: start;
	}
	.right\@md {
		text-align: end;
	}
	.center\@md {
		text-align: center;
	}
}
