@layer utils {
	.u-text {
		&--3xl	{ font-size: var(--font-size-3xl); }
		&--2xl	{ font-size: var(--font-size-2xl); }
		&--xl	{ font-size: var(--font-size-xl); }
		&--lg	{ font-size: var(--font-size-lg); }
		&--base	{ font-size: var(--font-size-base); }
		&--sm	{ font-size: var(--font-size-sm); }
		&--xs	{ font-size: var(--font-size-xs); }
	}

	.u-color-text {
		&--primary		{ color: var(--color-text-primary); }
		&--secondary	{ color: var(--color-text-secondary); }
		&--disabled		{ color: var(--color-text-disabled); }
	}

	.u-text-transform {
		&--uppercase	{ text-transform: uppercase; }
		&--lowercase	{ text-transform: lowercase; }
		&--capitalize	{ text-transform: capitalize; }
	}

	.u-text-align {
		&--left		{ text-align: left; }
		&--center	{ text-align: center; }
		&--right	{ text-align: right; }
	}

	.u-text-decoration {
		&--underline	{ text-decoration: var(--text-decoration-underline); }
		&--none			{ text-decoration: var(--text-decoration-none); }
	}

	.u-font-weight {
		&--thin		{ font-weight: var(--font-weight-thin); }
		&--regular	{ font-weight: var(--font-weight-regular); }
		&--semibold	{ font-weight: var(--font-weight-semibold); }
		&--bold		{ font-weight: var(--font-weight-bold); }
		&--bolder	{ font-weight: var(--font-weight-bolder); }
	}
}
