//
// Component: Overlay
//
// ========================================================================


// Variables
// ========================================================================

@overlay-panel-color:                           @global-contrast-color;
@overlay-panel-background:						fade(@global-primary-background, 75%);
@overlay-panel-padding:							0px;

@overlay-icon-color:                            @global-contrast-color;

@overlay-icon-size:								40px;
@overlay-icon:									"\f13d";


// Sub-object `uk-overlay-panel`
// ========================================================================

.hook-overlay-panel() {
	.tm-link-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-20px, -50%) scale(1);
		z-index: 50;
		transition: all .6s ease;

		&:hover {
			transform: translate(-20px, -50%) scale(1.1);
		}
	}
}


// Sub-object `uk-overlay-background`
// ========================================================================

.hook-overlay-background() {}

// Sub-object `uk-overlay-icon`
// ========================================================================

.hook-overlay-icon() {
	font-family: @global-utouch-icon;
	color: @global-contrast-color;
	text-shadow: 2px 2px 0 @global-dark-075-shadow;
	margin-top: 0;
	top: 55%;
	opacity: 0;
	transition: @global-transition;
}

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

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


// Miscellaneous
// ========================================================================

.hook-overlay-misc() {

	.uk-overlay > img.uk-thumbnail {
		max-width: 95%;
		max-width: ~"calc(100% - 10px)";
		margin: 5px;
	}


	.uk-overlay-background {

		&.tm-overlay-secondary {
			background-color: @global-secondary-background;
		}

		.utouch-icon {
			height: 40px;
			width: 40px;
			fill: @overlay-icon-color;
		}

		[class*='uk-icon-'],
		.uk-panel-title,
		.tm-content {
			transition: @global-transition;
			transition-delay: 0ms;
			opacity: 0;
		}

		[class*='uk-icon-'] {
			transform: translateY(80%);
		}

		.uk-panel-title {
			transform: translateY(50%);
		} 

		.tm-content {
			transform: translateY(30%);
		}
	}

	.uk-overlay-panel .uk-icon-plus {
		font-family: @global-utouch-icon;

		&:before {
			content: "\f13d";
		}
	}

	.uk-overlay-hover:hover {

		.uk-overlay-background {
			[class*='uk-icon-'],
			.uk-panel-title,
			.tm-content {
				opacity: 1;
			}

			[class*='uk-icon-'] {
				transform: translateY(0%);
				transition-delay: 100ms;
			}

			.uk-panel-title {
				transition-delay: 250ms;
				transform: translateY(0%);
			}

			.tm-content {
				transform: translateY(0%);
				transition-delay: 400ms;
			}
		}

		.uk-overlay-icon:before {
			top: 47%;
			opacity: 0.9;
			transition: @global-transition;
			transition-duration: 0.75s;
		}
	}

	.uk-overlay-scale {
		transition-duration: 1s;
	}

	.uk-overlay-slide-top {
		transform: translateY(-5%);
	}

	.uk-overlay-slide-bottom {
		transform: translateY(5%);
	}

	.uk-overlay-slide-left {
		transform: translateX(-5%);
	}

	.uk-overlay-slide-right {
		transform: translateX(5%);
	}

	// panel teaser overlay
	.uk-panel-teaser-link {
	    .uk-overlay-hover:hover.tm-overlay-blend-overlay {
	        background-blend-mode: hard-light;
	    }

	    .uk-overlay-hover:hover.tm-overlay-background-primary[class*='tm-overlay-blend-'] {
	        background-color: fade(@global-primary-background, 60%);
	    }

	    .uk-overlay-hover:hover.tm-overlay-background-secondary[class*='tm-overlay-blend-'] {
	        background-color: fade(@global-secondary-background, 60%);
	    }
	}
}