@use "../colors/colors.scss";

@mixin d2l-typography {

	color: colors.$d2l-color-ferrite;
	display: block;
	font-family: "Lato", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0.01rem;
	line-height: 1.4rem;

	p {
		margin: 1rem 0;
	}

	&:lang(ar),
	& :lang(ar) {
		font-family: "Segoe UI", "Geeza Pro", sans-serif;
	}

	&:lang(ja),
	& :lang(ja) {
		font-family: "Hiragino Kaku Gothic Pro", "Meiyro", sans-serif;
	}

	&:lang(ko),
	& :lang(ko) {
		font-family: "Apple SD Gothic Neo", Dotum, sans-serif;
	}

	&:lang(th),
	& :lang(th),
	&:lang(tha),
	& :lang(tha) {
		font-family: "Noto Sans Thai", system-ui, Tahoma;
	}

	&:lang(zh),
	& :lang(zh) {
		font-family: "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
	}

}

@mixin d2l-typography-font-face {
	@font-face {
		font-family: "Lato";
		font-style: normal;
		font-weight: 400;
		src:
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/Lato-400.woff2) format("woff2"),
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/Lato-400.woff) format("woff");
	}
	@font-face {
		font-family: "Lato";
		font-style: normal;
		font-weight: 700;
		src:
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/Lato-700.woff2) format("woff2"),
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/Lato-700.woff) format("woff");
	}
	@font-face {
		font-family: 'Noto Sans Thai';
		font-style: normal;
		font-weight: 400;
		src:
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/NotoSansThai-Regular.woff2) format('woff2'),
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/NotoSansThai-Regular.woff) format('woff');
	}
	@font-face {
		font-family: 'Noto Sans Thai';
		font-style: normal;
		font-weight: 700;
		src:
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/NotoSansThai-Bold.woff2) format('woff2'),
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/NotoSansThai-Bold.woff) format('woff');
	}
	@font-face {
		font-family: "BC Sans";
		font-style: normal;
		font-weight: 300;
		src:
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Light.woff2) format("woff2"),
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Light.woff) format("woff");
	}
	@font-face {
		font-family: "BC Sans";
		font-style: normal;
		font-weight: 400;
		src:
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Regular.woff2) format("woff2"),
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Regular.woff) format("woff");
	}
	@font-face {
		font-family: "BC Sans";
		font-style: normal;
		font-weight: 700;
		src:
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Bold.woff2) format("woff2"),
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Bold.woff) format("woff");
	}
	@font-face {
		font-family: "BC Sans";
		font-style: italic;
		font-weight: 300;
		src:
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-LightItalic.woff2) format("woff2"),
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-LightItalic.woff) format("woff");
	}
	@font-face {
		font-family: "BC Sans";
		font-style: italic;
		font-weight: 400;
		src:
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Italic.woff2) format("woff2"),
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Italic.woff) format("woff");
	}
	@font-face {
		font-family: "BC Sans";
		font-style: italic;
		font-weight: 700;
		src:
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-BoldItalic.woff2) format("woff2"),
			url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-BoldItalic.woff) format("woff");
	}
}

@mixin d2l-body-standard {
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.4rem;
	@media (max-width: 615px) {
		font-size: 0.8rem;
		line-height: 1.2rem;
	}
}

@mixin d2l-body-compact {
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.2rem;
}

@mixin d2l-body-small {
	color: colors.$d2l-color-tungsten;
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 0.9rem;
	margin: auto;
}

@mixin d2l-heading-1 {
	font-size: 2rem;
	font-weight: 400;
	line-height: 2.4rem;
	margin: 1.5rem 0 1.5rem 0;
	@media (max-width: 615px) {
		font-size: 1.5rem;
		line-height: 1.8rem;
	}
}

@mixin d2l-heading-2 {
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.8rem;
	margin: 1.5rem 0 1.5rem 0;
	@media (max-width: 615px) {
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.5rem;
	}
}

@mixin d2l-heading-3 {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5rem;
	margin: 1.5rem 0 1.5rem 0;
	@media (max-width: 615px) {
		font-size: 0.8rem;
		font-weight: 700;
		line-height: 1.2rem;
	}
}

@mixin d2l-heading-4 {
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.2rem;
	margin: 1.5rem 0 1.5rem 0;
}

@mixin d2l-label-text {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2px;
	line-height: 1rem;
}