/* DISPLAY */
.o3-type-display-lg {
	font-family: var(--o3-type-display-lg-font-family);
	font-size: var(--o3-type-display-lg-font-size);
	line-height: var(--o3-type-display-lg-line-height);
	font-weight: var(--o3-type-display-lg-font-weight);
}

.o3-type-display-md {
	font-family: var(--o3-type-display-md-font-family);
	font-size: var(--o3-type-display-md-font-size);
	line-height: var(--o3-type-display-md-line-height);
	font-weight: var(--o3-type-display-md-font-weight);
}

.o3-type-display-sm {
	font-family: var(--o3-type-display-sm-font-family);
	font-size: var(--o3-type-display-sm-font-size);
	line-height: var(--o3-type-display-sm-line-height);
	font-weight: var(--o3-type-display-sm-font-weight);
}

/* HEADLINE */
.o3-type-headline-lg {
	font-family: var(--o3-type-headline-lg-font-family);
	font-size: var(--o3-type-headline-lg-font-size);
	line-height: var(--o3-type-headline-lg-line-height);
	font-weight: var(--o3-type-headline-lg-font-weight);
}

.o3-type-headline-md {
	font-family: var(--o3-type-headline-md-font-family);
	font-size: var(--o3-type-headline-md-font-size);
	line-height: var(--o3-type-headline-md-line-height);
	font-weight: var(--o3-type-headline-md-font-weight);
}

.o3-type-headline-sm {
	font-family: var(--o3-type-headline-sm-font-family);
	font-size: var(--o3-type-headline-sm-font-size);
	line-height: var(--o3-type-headline-sm-line-height);
	font-weight: var(--o3-type-headline-sm-font-weight);
}

/* TITLE */

.o3-typography-wrapper > h1,
.o3-type-title-lg {
	font-family: var(--o3-type-title-lg-font-family);
	font-size: var(--o3-type-title-lg-font-size);
	line-height: var(--o3-type-title-lg-line-height);
	font-weight: var(--o3-type-title-lg-font-weight);
}

.o3-typography-wrapper > h2,
.o3-type-title-md {
	font-family: var(--o3-type-title-md-font-family);
	font-size: var(--o3-type-title-md-font-size);
	line-height: var(--o3-type-title-md-line-height);
	font-weight: var(--o3-type-title-md-font-weight);
}

.o3-typography-wrapper > h3,
.o3-type-title-sm {
	font-family: var(--o3-type-title-sm-font-family);
	font-size: var(--o3-type-title-sm-font-size);
	line-height: var(--o3-type-title-sm-line-height);
	font-weight: var(--o3-type-title-sm-font-weight);
}

/* BODY */
.o3-type-body-lg {
	font-family: var(--o3-type-body-lg-font-family);
	font-size: var(--o3-type-body-lg-font-size);
	line-height: var(--o3-type-body-lg-line-height);
	font-weight: var(--o3-type-body-lg-font-weight);
}

.o3-type-body-base {
	font-family: var(--o3-type-body-base-font-family);
	font-size: var(--o3-type-body-base-font-size);
	line-height: var(--o3-type-body-base-line-height);
	font-weight: var(--o3-type-body-base-font-weight);
}

.o3-type-body-highlight {
	font-family: var(--o3-type-body-highlight-font-family);
	font-size: var(--o3-type-body-highlight-font-size);
	line-height: var(--o3-type-body-highlight-line-height);
	font-weight: var(--o3-type-body-highlight-font-weight);
}

/* DETAIL / LABEL */
.o3-typography-wrapper > figcaption,
.o3-type-detail {
	font-family: var(--o3-type-detail-font-family);
	font-size: var(--o3-type-detail-font-size);
	line-height: var(--o3-type-detail-line-height);
	font-weight: var(--o3-type-detail-font-weight);
}

.o3-type-label {
	font-family: var(--o3-type-label-font-family);
	font-size: var(--o3-type-label-font-size);
	line-height: var(--o3-type-label-line-height);
	font-weight: var(--o3-type-label-font-weight);
	text-transform: var(--o3-type-label-text-case);
}

/* BODY CONTENT – EDITORIAL */
.o3-type-body-content-base {
	font-family: var(--o3-type-body-content-base-font-family);
	font-size: var(--o3-type-body-content-base-font-size);
	line-height: var(--o3-type-body-content-base-line-height);
	font-weight: var(--o3-type-body-content-base-font-weight);
}

.o3-type-body-content-highlight {
	font-family: var(--o3-type-body-content-highlight-font-family);
	font-size: var(--o3-type-body-content-highlight-font-size);
	line-height: var(--o3-type-body-content-highlight-line-height);
	font-weight: var(--o3-type-body-content-highlight-font-weight);
}

.o3-type-body-content-emphasis {
	font-family: var(--o3-type-body-content-emphasis-font-family);
	font-size: var(--o3-type-body-content-emphasis-font-size);
	line-height: var(--o3-type-body-content-emphasis-line-height);
	font-weight: var(--o3-type-body-content-emphasis-font-weight);
	font-style: var(--o3-type-body-content-emphasis-font-style);
}

/* Default body colours */

:where(:not(a)):where(
		[class^='o3-type-body'],
		.o3-type-detail,
		.o3-type-label,
		.o3-type-highlight,
		.o3-typography-wrapper > :is(p, figcaption)
	) {
	color: var(--o3-color-use-case-body-text);

	[data-o3-theme='inverse'] &,
	:where([data-o3-theme='inverse']) & {
		color: var(--o3-color-use-case-body-inverse-text);
	}
}

/* Default heading colours */

:where(:not(a)):where(
		[class^='o3-type-headline'],
		[class^='o3-type-display'],
		[class^='o3-type-title']
	) {
	color: var(--o3-color-use-case-heading-text);

	[data-o3-theme=inverse] &,
	:where([data-o3-theme=inverse]) & {
		color: var(--o3-color-use-case-heading-inverse-text);
	}
}

/* Superscript / Subscript */
.o3-typography-wrapper > sub,
.o3-typography-wrapper > p sub,
.o3-type-body-base > sub,
.o3-type-body-lg > sub {
	font-size: 0.666em;
	position: static;
	vertical-align: sub;
	line-height: 0;
	display: inline-block;
	margin-bottom: -1em;
}

.o3-typography-wrapper > sup,
.o3-typography-wrapper > p sup,
.o3-type-body-base > sup,
.o3-type-body-lg > sup {
	font-size: 0.666em;
	position: static;
	vertical-align: super;
	line-height: 0;
	display: inline-block;
	margin-top: -1em;
}
