// 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);
}
