_font.scss

/* stylelint-disable media-feature-name-no-vendor-prefix */
@use 'sass:list';
@use 'sass:map';
@use 'sass:string';
@use '../functions';

/// Font Smoothing
/// @group Typo
/// @author Felix Scholze
/// @link https://nickbulljs.medium.com/3-css-font-properties-you-need-to-use-in-2020-1e60c415b8a8
/// @since v1.0.0
@mixin font-smoothing {
	-moz-osx-font-smoothing: grayscale; // Firefox

	@media
	screen and (-webkit-min-device-pixel-ratio: 2),
	screen and (resolution >= 192dpi),
	screen and (resolution >= 2dppx) {
			-webkit-font-smoothing: antialiased; // Safari | Best of Retina displays
	}
	@media
	not screen and (-webkit-min-device-pixel-ratio: 2),
  not screen and (resolution >= 192dpi),
	not	screen and (resolution >= 2dppx) {
			-webkit-font-smoothing: subpixel-antialiased; // Best for non Retina displays
	}
}

/* stylelint-disable function-url-quotes */
/// Adds fonts with the original @font-face rule
/// Attention!
/// When you use Laravel Mix your fonts path begins at the mix.config file location
///
/// @param {String} $name Font-Name
/// @param {String} $path Path to font
/// @param {Number} $weight [null] Font-Weight
/// @param {String} $style [null] Font-Style
/// @param {List} $exts [eot woff2 woff ttf svg] Font-Formats to add
/// @group Typo
/// @author Jonathan Neal extended by Felix Scholze
/// @link https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
/// @since v1.0.0
/// @deprecated font-face-old is deprecated!.
///
/// @example
///    @include font-face(
///      'Open Sans',
///      '#{$path-to-fonts}/opensans/Light/OpenSans-Light',
///      300,
///      normal,
///      woff2 woff
///    );
///
@mixin font-face-old(
	$name,
	$path,
	$weight: null,
	$style: null,
	$exts: eot woff2 woff ttf svg,
	$display: swap
) {
	$src: null;
	$extmods: (
		'eot': '?iefix',
		'svg': '#' + functions.str-replace($name, ' ', '_'),
	);
	$formats: (
		'otf': 'opentype',
		'ttf': 'truetype',
	);

	@each $ext in $exts {
		$extmod: if(
			map.has-key($extmods, $ext),
			$ext + map.get($extmods, $ext),
			$ext
		);
		$format: if(map.has-key($formats, $ext), map.get($formats, $ext), $ext);
		$src: list.append($src, url(string.quote($path + '.' + $extmod)) format(string.quote($format)), comma);
	}

	@font-face {
		font-weight: $weight;
		font-style: $style;
		font-family: string.quote($name);
		font-display: $display;

		@if list.index($exts, 'eot') {
			src: local($name), url($path + '.eot'), $src;
		} @else {
			src: local($name), $src;
		}
	}
}

/* stylelint-enable function-url-quotes */

/// Responsive And Fluid Typography With vh And vw Units
/// @param {Number} $font-unit [rem]
/// @param {Number} $min-font-size [14]
/// @param {Number} $max-font-size [20]
/// @param {Number} $min-screen-size [400]
/// @param {Number} $max-screen-size [980]
/// @group Typo
/// @author Michael Riethmuller
/// @link https://www.smashingmagazine.com/2016/05/fluid-typography/
/// @deprecated fluid-typo is deprecated!.
@mixin fluid-typo(
	$font-unit: rem,
	$min-font-size: 14,
	$max-font-size: 20,
	$min-screen-size: 400,
	$max-screen-size: 980
) {
	@error 'fluid-typo is deprecated.';

	/* stylelint-disable */

	font-size: calc(
		#{$min-font-size}#{$font-unit} + (#{$max-font-size} - #{$min-font-size}) * (
				100vw - #{$min-screen-size}px
			) / (#{$max-screen-size} - #{$min-screen-size})
	);

	/* stylelint-enable */
}

/// Adds font-icons using a pseudo element
/// @param {String} $class
/// @param {String} $icon-code
/// @param {String} $font-family
/// @content Any other styles
/// @group Typo
/// @author Felix Scholze
/// @since v1.0.0
@mixin icon-font($class, $pseudo, $icon-code, $font-family) {
	.icon-#{$class} {
		&::#{$pseudo} {
			content: #{"'\\"}#{$icon-code + "'"};
			font-family: $font-family;
			@content;
		}
	}
}


/// Adds fonts via @font-face
///
/// @param {String} $name Font-Name
/// @param {String} $path Path to font
/// @param {Number} $weight [null] Font-Weight
/// @param {String} $version [null] Font Version
/// @param {String} $unicode-range [''] Unicode Range
/// @param {String} $style [null] Font-Style
/// @param {List} $exts [woff2 woff] Font-Formats to add
/// @param {String} $display [swap] Display
/// @group Typo
/// @author Felix Scholze
/// @since v1.4.0
///
/// @example
///    @include font-face(
///      'Open Sans',
///      '#{$path-to-fonts}/opensans/Light/OpenSans-Light',
///      400,
///      1.0,
///      '',
///      normal,
///      woff2 woff,
///    );
///
@mixin font-face(
	$name,
	$path,
	$weight: null,
	$version: null,
	$unicode-range: '',
	$style: normal,
	$exts: woff2 woff,
	$display: swap
) {
	$src: null;

	@if $version {
		$version: '?v=' + $version;
	}

	@each $ext in $exts {
		$src: list.append(
			$src,
			url('#{$path + '.' + $ext + $version}') format(string.quote($ext)),
			comma
		);
	}

	@font-face {
		font-weight: $weight;
		font-style: $style;
		font-family: string.quote($name);
		src: local($name), $src;
		font-display: $display;

		@if $unicode-range {
			unicode-range: string.unquote($unicode-range);
		}
	}
}