//! These mixins allow the abstraction of the fonts used by elements by having them use named "mixins".
//!
//! For example, all h1, h2, h3, and .title elements might use the "title" group, whose font may be dynamically changed at the time of the page viewing.


/// Set the CSS variables of a certain font group to the given values.
///
/// See `.use-font-group`.
.create-font-group(@name; @style; @variant; @weight; @stretch; @size; @height; @family) {
	--bfont-@{name}-style: @style;
	--bfont-@{name}-variant: @variant;
	--bfont-@{name}-weight: @weight;
	--bfont-@{name}-stretch: @stretch;
	--bfont-@{name}-height: @height;
	--bfont-@{name}-family: @family;
}


/// Set the `font` CSS property to the CSS variables of the given font name.
///
/// See `.create-font-group`.
.use-font-group(@name) {
	font-style: var(~"--bfont-@{name}-style");
	font-variant: var(~"--bfont-@{name}-variant");
	font-weight: var(~"--bfont-@{name}-weight");
	font-stretch: var(~"--bfont-@{name}-stretch");
	line-height: var(~"--bfont-@{name}-height");
	font-family: var(~"--bfont-@{name}-family");
}
