@import 'o-fonts/main';
@import 'o-typography/main';

@mixin nLinksTopic ($inversed: null) {
	@if ($inversed) {
		@include oColorsFor(topic-inversed, text);
	} @else {
		@include oColorsFor(topic, text);
	}
	@include oTypographySansBold($scale: 0, $progressive: true);
	border-bottom-color: transparent;
	text-decoration: none;

	&:hover,
	&:focus {
		@if ($inversed) {
			border-bottom-color: lighten(getColorFor(topic-inversed, text), 5%);
			color: lighten(getColorFor(topic-inversed, text), 5%);
		} @else {
			border-bottom-color: darken(getColorFor(topic, text), 20%);
			color: darken(getColorFor(topic, text), 20%);
		}
		border-bottom-style: dotted;
		border-bottom-width: 1px;
	}
}

@mixin nUiTypography {
	@include oFontsInclude(FinancierDisplayWeb);
	@include oFontsInclude(FinancierDisplayWeb, $weight: bold);
	@include oFontsInclude(MetricWeb);
	@include oFontsInclude(MetricWeb, $weight: semibold);

	html {
		//TODO - move elsewhere??
		@include oColorsFor(page);
		font-family: sans-serif;
		font-size: 0.8125em;
	}

	// cannot use oTypographyLink because it will make an ".o-hoverable-on a" class which will override BEM styles
	a {
		@include oColorsFor(link, text);
		text-decoration: none;
		cursor: pointer;
		border-bottom: 1px dotted oColorsGetColorFor(link, text);
		&:hover,
		&:focus {
			@include oColorsFor(link-hover, text);
			border-bottom-color: transparent;
		}
	}
}