// Typography

@if variable-exists(google-fonts-url) and $import-font == true {
	@import url($google-fonts-url);
}

// Base
@include body-class(true) {
	font-family: $font;
	font-weight: $font--weight;
	font-size: $font--size;
	line-height: $font--line-height;
	color: $font-color;
	letter-spacing: $font--letter-spacing;

	// FIX: Prevent SUI React modal from getting these margins.
	&:not(.sui-modal) {
		margin: $sui-gutter $sui-gutter 0 ($sui-gutter - 20px); // Account for padding from #wpcontent.

		@include media( max-width, md ) {
			margin: $sui-gutter-md ($sui-gutter-md - 10px) 0 ($sui-gutter-md - 20px); // Account for padding from #wpcontent.
		}
	}

	* {
		font-variant-ligatures: none;
		-webkit-font-variant-ligatures: none;
		text-rendering: optimizeLegibility;
		-moz-osx-font-smoothing: grayscale;
		font-smoothing: antialiased;
		-webkit-font-smoothing: antialiased;
		text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
	}

	// Headings

	h1, h2, h3, h4, h5, h6 {
		display: block;
		margin: 0.5em auto;
		padding: 0;
		line-height: $font--line-height;
		color: $headings-color;
		font-weight: $font--weight-bold;
		font-family: $font;
	}

	h1 {
		font-size: $h1-font-size;
		line-height: $h1-line-height;
		color: $headings-color;
		margin: 0;
	}
	h2 {
		font-size: $h2-font-size;
		line-height: $h2-line-height;
	}

	h3 {
		font-size: $h3-font-size;
		line-height: $h3-line-height;
	}

	h4 {
		font-size: $h4-font-size;
	}

	h5 {
		font-size: $h5-font-size;
	}

	h6 {
		font-size: $h6-font-size;
	}

	// Paragraph

	p {
		font-family: $font;
		font-weight: $font--weight;
		font-size: $font--size;
		line-height: $font--line-height;
		color: $font-color;
		letter-spacing: $font--letter-spacing;
		text-rendering: optimizeLegibility;

		&.sui-p-small {
			font-size: 13px;
			line-height: 22px;
			color: $p-small-color;
			margin: 5px 0;
		}

		&:first-child {
			margin-top: 0;
		}

		&:last-of-type:not(:last-child) {
			margin-bottom: $sui-gutter;

			@include media( max-width, md ) {
				margin-bottom: $sui-gutter-md;
			}
		}

		&:last-child {
			margin-bottom: 0;
		}

	}

	small {
		display: inline-block;
		font-size: 13px;
		line-height: 22px;
		color: $p-small-color;
		margin-bottom: 5px;
	}

	// Links

	a {
		text-decoration: none;
		color: $a-color;
		font-weight: 500;
		outline-color: transparent;
		outline-style: none;
		box-shadow: none;

		&:hover, &:focus, &:active {
			&:not(.sui-button) {
				color: $a-action-color;
			}
		}

		&.disabled {
			pointer-events: none;

			&:hover, &:focus, &:active {
				color: $a-disabled-color;
				cursor: default;
			}

		}

	}

	// Code

	code,
	pre {
		font-weight: 500;
		font-size: 13px;
		line-height: 18px;
		color: $pre-color;
		background-color: $code-bg-color;
		border: 1px solid $code-border-color;
		border-radius: $border-radius;
		margin: 0;
		padding: 10px 15px;
		white-space: pre;
		overflow: auto;
		max-width: 100%;
		vertical-align: middle;
		tab-size: 4;
	}

	code {
		display: inline-block;
		padding: 2px 5px;
	}

	// Misc
	b, strong {
		font-weight: 500;
	}

	dfn {
		font-style: normal;
		font-weight: normal;
		border-bottom: 1px dotted $dfn-border-color;
	}

	hr {
		border: none;
		display: block;
		height: 1px;
		background: #e6e6e6;
		margin: 30px 0;
	}
}

@include body-class($wrap: true, $rtl: false, $monochrome: false) {

	// BLOCK: Description.
	.sui-description {
		display: block;
		margin: 5px 0;
		color: $grey;
		font: 400 13px/22px $font;
		letter-spacing: $font--letter-spacing;

		&:first-child {
			margin-top: 0;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}
}

@include body-class($wrap: true, $rtl: false, $monochrome: true) {

	// BLOCK: Description.
	.sui-description {
		color: $black;
	}
}