//
// Images
// --------------------------------------------------

/*
	To force correct aspect ratio for image container the bottom padding
	must be calculated within template in a <style> tag or inline, e.g.:

		<div class="img-box-width image image-wrapped loading" style="max-width: {{ IMAGE_WIDTH }};">

			 <div class="img-box-height" style="padding-bottom: {{ IMAGE_HEIGHT / IMAGE_WIDTH * 100 }}%;">

			 	<div class="img-wrap">

					<span class="img-background img-border">

					<span class="img-upscaled img-border"
					 	 style="background: url(../blank.gif);" data-background-url="/images/...">

					<img class="img img-border"
					 	 src="../blank.gif" data-src="/images/...">

			 		<div class="img-overlay">

	Notes:
		- Padding and Background must be added to `.img-wrap` element

		- Border must be added to both `.img-border` elements
		  one is directly added to `<img>` to downscale the image and it is transparent
		  the next one is added for border container and it will overlay the image
		  both must have same border properties including `border-radius`

	    - To avoid color fringe when border radius is applied
	      raise `border-radius` for `.img-wrap` exclusively `+1px`

		- For inline block images the outer `.img-box-width` container element
		  must have `width` defined instead of `max-width`

	    - Extra content can be added relatively into absolutely positioned `.img-overlay` element
	      by default the element is not attached to any side

	      Note that when hovering an overlayed content the mouse events attached to the image
	      will not trigger, that can be an issue for plugins like CloudZoom
	      If that is an issue apply `pointer-events: none` to `.img-overlay`

	      Note that `font-size` and `line-height` are set to 0 for the parent `.img-wrap`
	      to aid in vertical alignment, so it must be overridden for the overlayed text

	    - To modify upscale mode for descendant images of particular component or an image itself
	      the `image-upscale` or `no-image-upscale` class can be added to an ancestor element
*/

.gp-img-wrapped(@image-bg: transparent, @upscale: false) {

	.image-wrapped {
		width: 100%;

		&.image-center {
			margin: auto;
		}

		&.image-inline {
			display: inline-block;
			vertical-align: middle;
		}

		.img-box-height {
			position: relative;
			height: 0;
		}

		.img-wrap,
		.img-background,
		.img-content,
		.img-upscaled {
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
		}

		.img-background {
			background: @image-bg;
		}

		.img-wrap {
			box-sizing: content-box;
			border-width: 0;
			text-align: center;
			transition: opacity .3s ease-in;

			// for proper vertical alignment with small images
			font-size: 0;
			line-height: 0;
		}

		.img-content {

			&::before {
				content: '';
				display: inline-block;
				height: 100%;
				vertical-align: middle;
			}

			img,
			noscript > img {
				position: relative;
				display: inline-block;
				max-width: 100%;
				max-height: 100%;

				&.img-border {
					border-color: transparent !important;
				}
			}

			.img when (@upscale) {

				// Only `<img>` must subscribe for events, e.g. to show a lightbox
				// it must be kept in the document flow and available for libraries like CloudZoom
				// thus `display: none` and `visibility: hidden` cannot be used

				// Here `opacity` is not intended to be used with `transition`
				// Instead the parent `.img-wrap` must be used for animation

				opacity: 0;
			}

			.img-upscaled when not (@upscale) {
				display: none;
			}

			.image-upscale & {
				.img-upscaled { display: block; }
				.img { opacity: 0; }
			}

			.no-image-upscale & {
				.img-upscaled { display: none; }
				.img { opacity: 1; }
			}
		}

		.img-background,
		.img-upscaled {
			background-position: center center;
			background-repeat: no-repeat;
			background-size: contain;
		}

		.img-overlay {
			position: absolute;
			font-size: 1rem;
			line-height: normal;
		}

		&.loading {

			.img-wrap {
				opacity: 0;

				.no-js & {
					opacity: 1;
				}
			}
		}

		.no-js & {

			.img {
				display: none;
			}
		}
	}
}