@import '../../mobile.less/mobile.variables';
@import '../../mobile.less/mobile.mixins';
@import 'mediawiki.mixins.less';

.image-carousel {
	position: relative;
	height: 100%;

	.image-wrapper {
		width: 100%;
		height: 100%;
		text-align: center;
		display: table;

		.image {
			display: table-cell;
			vertical-align: middle;
			height: 100%;
			width: 100%;
		}
	}

	img {
		// Reduce jarring white flash caused by white background color of image
		// appearing before the image is loaded (T197110). Waiting to make the image
		// background white after the image load event helps in most cases, but
		// there are still peculiarities across several browsers which occasionally
		// paint the background color before the loaded (but not rendered) image. To
		// address this, a .15s background color transition delay is added which
		// attempts to coerce the browser to paint the loaded image before its
		// background color and reduce the flash effect. Smoothing transitions
		// (opacity and filter) are also used to help make the image load process
		// less jarring.
		//
		-webkit-transition: background-color 0s 0.15s ease-in, opacity 0.15s ease-in, -webkit-filter 0.15s ease-in;
		transition: background-color 0s 0.15s ease-in, opacity 0.15s ease-in, -webkit-filter 0.15s ease-in;
		transition: background-color 0s 0.15s ease-in, opacity 0.15s ease-in, filter 0.15s ease-in;
		.filter( blur( 3px ) );
		opacity: 0.8;
		// With blur filter applied, firefox (and maybe others) will show blurry
		// alt text before image loads. Making color transparent to hide this.
		color: transparent;

		// get rid of a small bottom margin and vertical scrollbar
		vertical-align: bottom;

		&.ratio-width {
			width: 100%;
		}

		&.ratio-height {
			height: 100%;
		}
	}

	.image-loaded {
		// for images with transparent background
		background: #fff;
		opacity: 1;
		.filter( blur( 0 ) );
	}
}

.slider-button {
	position: absolute;
	top: 0;
	min-width: 60px; // T198018: A width any smaller than 60px is too small of a touch area
	bottom: 0;
	z-index: @z-indexOverlay;

	&:before {
		top: 0;
	}

	&.prev {
		left: 0;
	}

	&.next {
		right: 0;
	}

	// targets prev/next icon.
	> * {
		.filter( drop-shadow( 0 0 4px rgba( 0, 0, 0, 0.8 ) ) );
	}
}

.load-fail-msg {
	text-align: center;
	color: #fff;
	padding: 0 65px;
}

.load-fail-msg-icon {
	margin: 12px auto;
}

.load-fail-msg-text {
	margin: 8px 0;
}

.load-fail-msg-link {
	a {
		color: @colorProgressive;
	}
}

.image-details {
	display: none;
	z-index: @z-indexOverOverlay;
	bottom: 0;
	height: auto;
	max-height: 50%;
	position: fixed;
	width: 100%;
	padding: 8px 10px;
	margin: 0;
	background: #fff;
	overflow-y: auto;
	border-top: 1px solid @grayLight;

	&.is-visible {
		display: block;
	}

	.button {
		float: right;
	}
}