@mixin replaced-contents($width, $height) {
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  width: $width;
  height: $height;
}

@mixin background-image-file($url, $background-size: null, $background-position: null, $background-repeat: no-repeat, $type: 'png', $retina: true) {
  @if $url == none {
    background-image: none;

    @if ($retina) {
      @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) {
        & { background-image: none; }
      }
    }
  } @else {

    @if $type == 'svg' {
      background-image: image-url($url + '.' + $type);
    } @else {
      @if $retina {
        background-image: image-url($url + '@1x.' + $type);
      } @else {
        background-image: image-url($url + '.' + $type);
      }

      @if ($retina) {
        @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
          & { background-image: image-url($url + '@2x.' + $type); }
        }

        @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) {
          & { background-image: image-url($url + '@3x.' + $type); }
        }
      }
    }

    @if $background-position {
      background-position: $background-position;
    }

    @if $background-size {
      background-size: $background-size;
    }

    background-repeat: $background-repeat;
  }
} // @mixin background-image-file

@mixin background-image-gradient($url, $background-image-size, $gradients...) {
  @include background-image(image-url($url + '@1x.png'), $gradients);
  background-size: $background-image-size, 100%;

  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    & {
      @include background-image(image-url($url + '@2x.png'), $gradients);
      background-size: $background-image-size, 100%;
    }
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) {
    & {
      @include background-image(image-url($url + '@3x.png'), $gradients);
      background-size: $background-image-size, 100%;
    }
  }
}

@mixin image-replacement($url, $background-width, $background-height, $width: $background-width, $height: $background-height, $background-position: 0 0, $type: 'png') {
  @include background-image-file($url, $background-width $background-height, $background-position: $background-position, $type: $type);
  @include replaced-contents($width, $height);
}

@mixin sprite-icon($url, $background-size, $padding-left: inherit, $background-position: 0 0, $type: 'png') {
  @include background-image-file($url, $background-size, $background-position, $type: $type);
  padding-left: $padding-left;
}

@mixin sprite-replacement($url, $background-size, $width, $height, $position: 0) {
  $background-position-y: 0;
  @if $position > 0 {
    $background-position-y: -($position) * $height;
  }

  @include background-image-file($url, $background-size, 0 $background-position-y);
  @include replaced-contents($width, $height);
}