@import '../vars/typography';

h1,
h2,
h3,
h4,
h5,
h6,
li,
p,
legend,
small,
.title,
.h1,
.h2,
.h3,
.s1,
.s2,
.body,
.overline,
.caption {
	position: relative;
	top: var(--baseline-adjust);
	display: block;
	margin-bottom: var(--space-after);
	font-size: var(--font-size);
	font-weight: var(--font-weight);
	line-height: var(--line-height);
	letter-spacing: var(--letter-spacing);
}

body {
	line-height: 1.5;
}

.title {
	@extend %title;

	&.large {
		@extend %title-large;
	}

	&.small {
		@extend %title-small;
	}
}

h1,
.h1 {
	@extend %heading-1;
}

h2,
.h2 {
	@extend %heading-2;
}

h3,
.h3 {
	@extend %heading-3;
}

h4,
.s1 {
	@extend %subheading-1;
}

h5,
h6,
.s2 {
	@extend %subheading-2;
}

p,
.body {
	@extend %body-1;

	&:global(.dense),
	:global(.dense) &,
	:global(.dense) {
		@extend %body-2;
	}
}

legend,
.overline {
	@extend %overline;
	text-transform: uppercase;
}

small,
.caption {
	@extend %caption;
}

.align-left {
	text-align: left;
}

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

.align-right {
	text-align: right;
}

.align-start {
	text-align: start;
}

.align-end {
	text-align: end;
}

.align-justify {
	text-align: justify;
}