// mixin svg fallback
@mixin svg(
	$file-name,
	$css-img-path: $css-img-path)
{
	background-image: inline-image($file-name+'.png');
	background-image: inline-image($file-name+'.svg'), none;
}

@mixin bg-with-svg(
	$file-name,
	$css-img-path: $css-img-path,
	$repeat: no-repeat,
	$position: 50% 50%,
	$bg-color: transparent)
{
	background: inline-image($file-name+'.png') $repeat, $position, $bg-color;
	background-image: inline-image($file-name+'.svg'), none;
}

// Mix from Nico3333 (https://github.com/nico3333fr/ROCSSTI/blob/master/src/css/rocssti-fr.css#L637)
// and ffood (http://www.ffoodd.fr/cache-cache-css/)
@mixin visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}
@mixin visually-hidden-focus {
	clip: auto;
	clip-path: none;
	height: auto;
	overflow: visible;
	position: static;
	width: auto;
	white-space: normal;
}

// Remove any unit from a value
@function strip-unit(
	$value)
{
	@return $value / ($value * 0 + 1);
}

// Compute absolute value (in em or rem) depending on font-size of the html element (given in %)
@function relative-to-screen(
	$value,             // em or rem value
	$html-font-size)    // in %
{
	@return $value / (strip-unit($html-font-size) / 100);
}