// =============================================================================
//  RETINA IMAGE
//
//  The retina image mixin will use a 'retina' image if available.
//
//  Available As:
//    +skeletor-retina-image()
//    +s-retina-image()
//    +s-ri()
//
// =============================================================================



@import "skeletor/globals/mixins/hidpi"

// -----------------------------------------------------------------------------
//  Retina Image
// -----------------------------------------------------------------------------
=skeletor-retina-image($filename, $background-size, $extension: png, $retina-suffix: _2x, $asset-pipeline: true)
  @if $asset-pipeline
    background-image: image-url("#{$filename}.#{$extension}")
  @else
    background-image:       url("#{$filename}.#{$extension}")

  +skeletor-hidpi
    @if $asset-pipeline
      background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}")

    @else {
      background-image: url("#{$filename}#{$retina-suffix}.#{$extension}")

    background-size: $background-size



// -----------------------------------------------------------------------------
//  Alias for retina image mixin
// -----------------------------------------------------------------------------
=s-retina-image($filename, $background-size, $extension: png, $retina-suffix: _2x, $asset-pipeline: true)
  +skeletor-retina-image($filename, $background-size, $extension, $retina-suffix, $asset-pipeline)

=s-ri($filename, $background-size, $extension: png, $retina-suffix: _2x, $asset-pipeline: true)
  +skeletor-retina-image($filename, $background-size, $extension, $retina-suffix, $asset-pipeline)



// -----------------------------------------------------------------------------
//  If no-conflict set to allow shorter mixin names
// -----------------------------------------------------------------------------
// @if $no-conflict
//   =retina-image($filename, $background-size, $extension: png, $retina-suffix: _2x, $asset-pipeline: true)
//     +skeletor-retina-image($filename, $background-size, $extension, $retina-suffix, $asset-pipeline)