// -------------------------------------------------- */
//				@extend default typographic elements
// -------------------------------------------------- */
@if output(typography-base) {
	body,
	html {
		font-size: 16px;
		font-family: unquote($typography-fonts-system);
	}

	a {
		color: inherit;
	}
	// -------------------------------------------------- */
	//				@extend default typographic elements
	// -------------------------------------------------- */

	h1 {
		@extend %#{$base-prefix}h1 !optional;
	}
	h2 {
		@extend %#{$base-prefix}h2 !optional;
	}
	h3 {
		@extend %#{$base-prefix}h3 !optional;
	}
	h4 {
		@extend %#{$base-prefix}h4 !optional;
	}
	h5 {
		@extend %#{$base-prefix}h5 !optional;
	}
	h6 {
		@extend %#{$base-prefix}h6 !optional;
	}

	// make font styles
	.font-bold,
	strong {
		@extend %#{$base-prefix}font-bold !optional;
	}
	small {
		@extend %#{$base-prefix}small !optional;
	}
	del {
		@extend %#{$base-prefix}del !optional;
	}
	ins {
		@extend %#{$base-prefix}ins !optional;
	}
	sub {
		@extend %#{$base-prefix}sub !optional;
	}
	sup {
		@extend %#{$base-prefix}sup !optional;
	}
	p {
		@extend %#{$base-prefix}p !optional;
	}
	.content {
		li {
			@extend %#{$base-prefix}p !optional;
		}
	}
	.text-large {
		font-size: 1.25em;
	}
	blockquote {
		@extend %#{$base-prefix}blockquote !optional;
	}
	div {
		@extend %#{$base-prefix}default-font-rules !optional;
	}

	// Variations

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		&.oblique {
			font-style: italic;
		}
		&.thin {
			font-weight: 100;
		}
		&.caps {
			text-transform: uppercase;
		}
	}
}