////
/// @group Use cases
/// @link http://registry.origami.ft.com/components/o-typography
////

/// Headline styles
@mixin oTypographyHeadline {
	@include oTypographyDisplay($scale: (default: 4, S: 5, L: 6));
	@include oTypographyMargin($top: 0, $bottom: 5);
	@include oColorsFor('o-typography-headline');
	font-weight: 400; // Browser default a h# to bold...
}

/// Large headline styles with an underline
@mixin oTypographyHeadlineLarge {
	@include oTypographyDisplayBold($scale: (default: 5, S: 6, L: 7));
	@include oTypographyMargin($top: 0, $bottom: 7);
	@include oColorsFor('o-typography-headline');

	&:after {
		@include oTypographyPadding($top: 5, $bottom: 0);
		content: '';
		display: block;
		width: 180px;
		border-bottom: oTypographySpacingSize($units: 2) solid oColorsGetPaletteColor('black');
	}
}

/// Level 2 heading styles
@mixin oTypographyHeadingLevel2 {

	@include oTypographySansBold($scale: 4);
	@include oTypographyMargin($top: 0, $bottom: 5);
	@include oColorsFor('o-typography-headline');
}

/// Level 3 heading styles
@mixin oTypographyHeadingLevel3 {
	@include oTypographySans($scale: 4);
	@include oTypographyMargin($top: 0, $bottom: 5);
	@include oColorsFor('o-typography-headline');
	font-weight: 400;
}

/// Level 4 heading styles
@mixin oTypographyHeadingLevel4 {
	@include oTypographySans($scale: 3);
	@include oTypographyMargin($top: 0, $bottom: 5);
	@include oColorsFor('o-typography-headline');
	font-weight: 400;
}

/// Level 5 heading styles
@mixin oTypographyHeadingLevel5 {
	@include oTypographySans($scale: 0);
	@include oTypographyMargin($top: 0, $bottom: 5);
	@include oColorsFor('o-typography-headline');
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}