//------------------------------------------------------------------------------------------------
// TYPOGRAPHY
//------------------------------------------------------------------------------------------------

/*
In order to separate our semantic decisions from our stylistic ones, we only
define opinionated typographical styles against classes, NOT against
typographic HTML elements.

Example: Will prevent a case where we need to use a H3 because of how it
looks, rather than because its the correct place to use it in the document.

https://csswizardry.com/2016/02/managing-typography-on-large-apps/

Naming convention taken from the NATO phonetic alphabet:
https://en.wikipedia.org/wiki/NATO_phonetic_alphabet
*/


// COMPONENT COLOURS
//------------------------------------------------------------------------------------------------

/*
Easily assign colours to the component without having to
find/replace variables.
*/

$component-typography-link-color: 'primary' !default;
$component-typography-focus-color: 'accent' !default;


// COMPONENT MIXINS
//------------------------------------------------------------------------------------------------

@mixin createTypography($map: $typography) {
	$breakpoints: ();
	@each $key, $value in $map {
		.c-type-#{$key} {
			@each $prop, $propValue in $value {
				@if($prop != 'breakpoints') {
					#{$prop}: #{$propValue};
				}
			}
		}
		@if map-has-key($value, 'breakpoints') {
			// Look through breakpoint prop
			@each $bp, $bpValue in map-get($value, 'breakpoints') {
				// Does breakpoint exist as a prop in the object?
				@if(map-has-key($breakpoints, $bp)) {
					$bpMap: map-merge(map-get($breakpoints, $bp), (
						$key: $bpValue
					));
					$breakpoints: map-merge($breakpoints, (
						$bp: $bpMap
					));
				}
				@else {
					$breakpoints: map-merge($breakpoints, (
						$bp: (
							$key: $bpValue
						)
					));
				}
			}
		}
	}
	@each $bp, $types in $breakpoints {
		@include mq(#{$bp}) {
			@each $typeName, $typeValue in $types {
				.c-type-#{$typeName} {
					font-size: #{$typeValue};
				}
			}
		}
	}
}

@include createTypography();


// BLOCK & ELEMENTS
//------------------------------------------------------------------------------------------------

/*
[1] Makes the link appear inline when within a flex container
*/

.c-type--body-font {
	font-family: $global-body-font;
}

.c-type-link {
	color: color($component-typography-link-color);
	text-decoration: underline;
	cursor: pointer;
	white-space: nowrap;
	align-self: flex-start; /* [1] */
	&:focus {
		background-color: color($component-typography-focus-color);
		outline: rem(3px) solid color($component-typography-focus-color);
	}
	svg {
		fill: color($component-typography-link-color);
	}
}

@each $state in ('positive', 'negative', 'caution', 'info') {
	.c-type-link.is-#{$state},
	.is-#{$state} .c-type-link:not(.c-button--disable-state-inheritance) {
		color: color('#{$state}-dark');
	}
}


// MODIFIERS
//------------------------------------------------------------------------------------------------

.c-type--bold,
.c-type--emphasis {
	font-weight: bold;
}

.c-type--underline,
.c-type--emphasis {
	text-decoration: underline;
}

.c-type--bare {
	text-decoration: none;
}

.c-type--nowrap {
	white-space: nowrap;
}