/*
 * Name:			Overlay
 * Description:		Defines styles for image overlays
 *
 * Component:		`uk-overlay`
 *
 * Sub-objects:		`uk-overlay-area`
 *					`uk-overlay-caption`
 *					`uk-overlay-toggle`
 *
 ========================================================================== */


/* Component
 ========================================================================== */

/*
 * 1. Container width fits its content
 * 2. Create position context
 * 3. Set max-width for responsive images to prevent `inline-block` consequences
 * 4. Remove the gap between the container and its child element
 */

.uk-overlay {
	/* 1 */
	display: inline-block;
	/* 2 */
	position: relative;
	/* 3 */
	max-width: 100%;
	/* 4 */
	vertical-align: middle;
}


/* Sub-object `uk-overlay-area`
 ========================================================================== */

/*
 * 1. Set position
 * 2. Set style
 * 3. Fade-in transition
 */

.uk-overlay-area {
	/* 1 */
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	/* 2 */
	background: @overlay-area-background;
	/* 3 */
	opacity: 0;
	-webkit-transition: opacity 0.15s linear;
	transition: opacity 0.15s linear;
	.hook-overlay-area;
}

/*
 * Hover
 * 1. Use optional `uk-overlay-toggle` to trigger the overlay earlier
 */

.uk-overlay:hover .uk-overlay-area,
.uk-overlay-toggle:hover .uk-overlay-area { opacity: 1; } /* 1 */

/*
 * Icon
 */

.uk-overlay-area:before {
	content: @overlay-area-icon;
	position: absolute;
	top: 50%;
	left: 50%;
	width: @overlay-area-icon-size;
	height: @overlay-area-icon-size;
	margin-top: -(@overlay-area-icon-size / 2);
	margin-left: -(@overlay-area-icon-size / 2);
	font-size: @overlay-area-icon-size;
	line-height: 1;
	font-family: "FontAwesome";
	text-align: center;
	color: @overlay-area-icon-color;
	.hook-overlay-area-icon;
}


/* Sub-object `uk-overlay-caption`
 ========================================================================== */

/*
 * 1. Set position
 * 2. Set style
 * 3. Fade-in transition
 */

.uk-overlay-caption {
	/* 1 */
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	/* 2 */
	padding: @overlay-caption-padding;
	background: @overlay-caption-background;
	color: @overlay-caption-color;
	/* 3 */
	opacity: 0;
	-webkit-transition: opacity 0.15s linear;
	transition: opacity 0.15s linear;
	.hook-overlay-caption;
}

/*
 * Hover
 * 1. Use optional `uk-overlay-toggle` to trigger the overlay earlier
 */

.uk-overlay:hover .uk-overlay-caption,
.uk-overlay-toggle:hover .uk-overlay-caption { opacity: 1; } /* 1 */


/* Hooks
 ========================================================================== */

.hook-overlay-area() {}
.hook-overlay-area-icon() {}
.hook-overlay-caption() {}