/*
 * bg-webp(basefile, fallbackext, haswebp, filter = null)
 *
 * Loads a basefile as background image.
 *
 * basefile    - path to the image file without extension
 * fallbackext - the fallback extension (e.g. 'jpg')
 * haswebp     - if true the webp version is loaded, if supported by the browser.
 *               The webp file has to exist next to the fallback version. If
 *               'haswebp' is false or webp is not supported in the browser the
 *               'fallbackext' version is loaded.
 * filter      - (optional) single filter to apply to the image
 *               (e.g. 'linear-gradient')
 */
bg-webp(basefile, fallbackext, haswebp, cdn = '', filter = null)
  if filter {
    background-image: filter, url(cdn''basefile'.'fallbackext);
  } else {
    background-image: url(cdn''basefile'.'fallbackext);
  }

  if haswebp {
    @supports (background-image: url(cdn''basefile'.webp')) {
      if filter {
        background-image: filter, url(cdn''basefile'.webp');
      } else {
        background-image: url(cdn''basefile'.webp');
      }
    }
  }

/*
 * bg-retina-webp(basefile, fallbackext, haswebp, filter = null)
 *
 * Same as 'bg-webp', but loads the basefile with a '_2x' appendix if a retina
 * display is detected.
 */
bg-retina-webp(basefile, fallbackext, haswebp, cdn = '', filter = null)
  @media (device-pixel-ratio: 1.5),
         (    min-resolution: 192dpi),
         (    min-resolution: 1.5dppx) {
    if filter {
      background-image: filter, url(cdn''basefile'_2x.'fallbackext);
    } else {
      background-image: url(cdn''basefile'_2x.'fallbackext);
    }

    if haswebp {
      @supports (background-image: url(cdn''basefile'_2x.webp')) {
        if filter {
          background-image: filter, url(cdn''basefile'_2x.webp');
        } else {
          background-image: url(cdn''basefile'_2x.webp');
        }
      }
    }
  }

/*
 * bg-image-set-webp(basefile, fallbackext, haswebp)
 *
 * Uses '-webkit-image-set' to load low-res or high-res image based on DPI resolution.
 * The high-res image has to reside next to the low-res version with a '_2x' appendix.
 *
 * basefile    - path to the image file without extension
 * fallbackext - the fallback extension (e.g. 'jpg')
 * haswebp     - if true the webp version is loaded, if supported by the browser.
 *               The webp file has to exist next to the fallback version. If
 *               'haswebp' is false or webp is not supported in the browser the
 *               'fallbackext' version is loaded.
 */
bg-image-set-webp(basefile, fallbackext, haswebp)
    background-image: image-set(
      url(basefile'.'fallbackext) 1x,
      url(basefile'_2x.'fallbackext) 2x
    );

    if haswebp {
      @supports (background-image: url(basefile'.webp')) {
        background-image: image-set(
          url(basefile'.webp') 1x,
          url(basefile'_2x.webp') 2x
        );
      }
    }

/*
 * bg-image-responsive(basefile, fallbackext, haswebp)
 *
 * Sets the background image taking into account HDPI/retina devices. Loads webp
 * version of image if existing and supported by the browser. The mixin uses
 * '-webkit-image-set' if available. If not a fallback implementation with media
 * queries is used.
 *
 * NOTE: Does not support to overlay the image with filters (e.g. 'linear-gradient')
 *       because the 'bg-image-set-webp' mixin used internally does not support it.
 *       If you need filters use the 'bg-webp' and 'bg-retina-webp' mixins directly,
 *       which has the same effect regarding responsiveness.
 *
 * basefile    - path to the image file without extension
 * fallbackext - the fallback extension (e.g. 'jpg')
 * haswebp     - if true the webp version is loaded, if supported by the browser.
 *               The webp file has to exist next to the fallback version. If
 *               'haswebp' is false or webp is not supported in the browser the
 *               'fallbackext' version is loaded.
 */
bg-image-responsive(basefile, fallbackext, haswebp)
  bg-webp(basefile, fallbackext, haswebp);
  bg-retina-webp(basefile, fallbackext, haswebp);
  bg-image-set-webp(basefile, fallbackext, haswebp);

/*
 * Make WebP and HDPI selectors for a background image slot
 *
 * @note LEGACY CODE only, kept for reference but not used in ui-rs-core
 */

url-jpg(u)
  url(u + '/img.jpg')

url-webp(u)
  url(u + '/img.webp')

url-jpg-hdpi(u)
  url(u + '/img_2x.jpg')

url-webp-hdpi(u)
  url(u + '/img_2x.webp')

multimode-image(colour, baseimage)
    background-color: colour;
    background-image: url-jpg('/images/header');
    background-image: -webkit-image-set(
      url-jpg('/images/header') 1x,
      url-jpg-hdpi('/images/header') 2x
    );
    @supports (background-image: url-webp('/images/header')) {
      background-image: -webkit-image-set(
        url-webp('/images/header') 1x,
        url-webp-hdpi('/images/header') 2x
      );
    }