@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;

// Font family

.font-family-monospace {
	font-family: tokens.$monospace-font-stack !important;
	-moz-osx-font-smoothing: auto;
	-webkit-font-smoothing: auto;
}

.font-family-quote {
	font-family: tokens.$quote-font-stack !important;
}

// Heading sizes

.font-size-h0 {
	font-size: tokens.$font-size-0 !important;
}

.font-size-h1 {
	font-size: tokens.$font-size-1 !important;
}

.font-size-h2 {
	font-size: tokens.$font-size-2 !important;
}

.font-size-h3 {
	font-size: tokens.$font-size-3 !important;
}

.font-size-h4 {
	font-size: tokens.$font-size-4 !important;
}

.font-size-h5 {
	font-size: tokens.$font-size-5 !important;
}

.font-size-h6 {
	font-size: tokens.$font-size-6 !important;
}

@include mixins.tablet {
	.font-size-h0-tablet {
		font-size: tokens.$font-size-0 !important;
	}

	.font-size-h1-tablet {
		font-size: tokens.$font-size-1 !important;
	}

	.font-size-h2-tablet {
		font-size: tokens.$font-size-2 !important;
	}

	.font-size-h3-tablet {
		font-size: tokens.$font-size-3 !important;
	}

	.font-size-h4-tablet {
		font-size: tokens.$font-size-4 !important;
	}

	.font-size-h5-tablet {
		font-size: tokens.$font-size-5 !important;
	}

	.font-size-h6-tablet {
		font-size: tokens.$font-size-6 !important;
	}
}

// Non-heading sizes

.font-size-xxl {
	font-size: tokens.$font-size-4 !important;
}

.font-size-xl {
	font-size: tokens.$font-size-5 !important;
}

.font-size-lg {
	font-size: tokens.$font-size-6 !important;
}

.font-size-md {
	font-size: tokens.$font-size-7 !important;
}

.font-size-sm {
	font-size: tokens.$font-size-8 !important;
}

.font-size-xs {
	font-size: tokens.$font-size-9 !important;
}

// Non-heading sizes

@include mixins.tablet {
	.font-size-xl-tablet {
		font-size: tokens.$font-size-5 !important;
	}

	.font-size-lg-tablet {
		font-size: tokens.$font-size-6 !important;
	}

	.font-size-md-tablet {
		font-size: tokens.$font-size-7 !important;
	}

	.font-size-sm-tablet {
		font-size: tokens.$font-size-8 !important;
	}

	.font-size-xs-tablet {
		font-size: tokens.$font-size-9 !important;
	}
}

// Weight

.font-weight-light {
	font-weight: tokens.$weight-light !important;
}

.font-weight-semilight {
	font-weight: tokens.$weight-semilight !important;
}

.font-weight-normal {
	font-weight: tokens.$weight-normal !important;
}

.font-weight-semibold {
	font-weight: tokens.$weight-semibold !important;
}

.font-weight-bold {
	font-weight: tokens.$weight-bold !important;
}

// Case

.font-style-italic {
	font-style: italic !important;
}

.text-decoration-underline {
	text-decoration: underline !important;
}

.text-decoration-none {
	text-decoration: none !important;
}

// Letter Spacing

.letter-spacing-wide {
	letter-spacing: tokens.$letter-spacing-wide !important;
}

.text-transform-uppercase {
	text-transform: uppercase !important;
}

// Alignment

.text-align-left {
	text-align: start !important;
}

.text-align-center {
	text-align: center !important;
}

.text-align-right {
	text-align: end !important;
}

@include mixins.tablet {
	.text-align-left-tablet {
		text-align: start !important;
	}

	.text-align-center-tablet {
		text-align: center !important;
	}

	.text-align-right-tablet {
		text-align: end !important;
	}
}

// Text wrapping behavior

.text-wrap-pretty {
	text-wrap: pretty !important;
}

.text-wrap-balance {
	text-wrap: balance !important;
}

// Line height

.line-height-normal {
	line-height: tokens.$line-height-normal !important;
}

// White space

.white-space-normal {
	white-space: normal !important;
}

.white-space-nowrap {
	white-space: nowrap !important;
}

.white-space-pre {
	white-space: pre !important;
}

.white-space-pre-wrap {
	white-space: pre-wrap !important;
}