//
// Hover box Styles //
//
[class^="hoverbox"] {
	overflow: hidden;
	position: relative;
	@include transform(translate3d(0,0,0));
	display: inline-block;
	img {
		@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
	}
}

//
// Hover box - Style 1 //
//
.hoverbox-1 {
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		visibility: hidden;
		opacity: 0;
		background: get-color("dark", 0.5);
		width: 100%;
		height: 100%;
		@include transition(ease-out 0.12s);
	}
	&:hover, &:focus {
		&:before {
			visibility: visible;
			opacity: 1;
		}
		img {
			@include transform(scale(1.04));
		}
		.hover-content {
			visibility: visible;
			opacity: 1;
		}
	}
	.hover-content {
		position: absolute;
		z-index: 2;
		visibility: hidden;
		opacity: 0;
		color: get-color("white", 0.7);
		@include transition(ease-out 0.12s);
		h1,h2,h3,h4,h5,h6 {
			color: white;
		}
		&.center {
			top: 50%;
			right: 0;
			left: 0;
			@include transform(translateY(-50%));
			width: 100%;
			margin-top: 5px;
			padding: 0 30px;
			&:hover, &:focus {
				margin-top: 0;
			}
		}
		&.bottom {
			right: 0;
			bottom: 0;
			left: 0;
			@include transform(translateY(5px));
			width: 100%;
			padding: 30px;
			&:hover, &:focus {
				@include transform(translateY(0));
			}
		}
	}
}


//
// Hover box - Style 2 //
//
.hoverbox-2 {
	&:before {
		content: '';
		position: absolute;
		top: 16px;
		right: 16px;
		bottom: 16px;
		left: 16px;
		@include transform(scale(0.99));
		z-index: 1;
		visibility: hidden;
		opacity: 0;
		background: get-color("white", 0.9);
		backdrop-filter: blur(5px);
		@include transition(ease-out 0.12s);
	}
	.hover-content {
		position: absolute;
		top: 50%;
		right: 16px;
		left: 16px;
		@include transform(translateY(-50%));
		z-index: 2;
		visibility: hidden;
		opacity: 0;
		margin-top: 4px;
		padding: 0 30px;
		@include transition(ease-out 0.12s);
		@include breakpoint-less(md) {
			padding: 0 20px;
		}
	}
	&:hover, &:focus {
		&:before {
			@include transform(scale(1));
			visibility: visible;
			opacity: 1;
		}
		img {
			@include transform(scale(1.04));
		}
		.hover-content {
			visibility: visible;
			opacity: 1;
			margin-top: 0;
		}
	}
}

.hoverbox-2, 
.hoverbox-3 {
	.hover-content {
		color: $color-primary;
		h1,h2,h3,h4,h5,h6 { color: get-color("dark"); }
		a {
			&:not([class^='button']) {
				color: get-color("dark", 0.9);
				&:hover, &:focus { color: get-color("dark"); }
			}
		}
	}
}

//
// Hover box - Style 3 //
//
.hoverbox-3 {
	.hover-content {
		position: absolute;
		right: 16px;
		bottom: 16px;
		left: 16px;
		@include transform(translateY(4px));
		z-index: 1;
		visibility: hidden;
		opacity: 0;
		background: get-color("white", 0.9);
		backdrop-filter: blur(5px);
		padding: 30px;
		@include transition(ease-out 0.12s);
		@include breakpoint-less(md) {
			padding: 20px;
		}
	}
	&:hover, &:focus {
		img {
			@include transform(scale(1.04));
		}
		.hover-content {
			@include transform(translateY(0));
			visibility: visible;
			opacity: 1;
		}
	}
}

//
// Hover box - Style 4 //
//
.hoverbox-4 {
	&:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		background: get-color("dark", 0.4);
		width: 100%;
		height: 100%;
		@include transition(ease-out 0.12s);
	}
	.content, 
	.hover-content {
		position: absolute;
		z-index: 1;
		color: get-color("white", 0.7);
		@include transition(ease-out 0.12s);
		h1,h2,h3,h4,h5,h6 {
			color: white;
		}
	}
	.hover-content {
		visibility: hidden;
		opacity: 0;
	}
	&:hover, &:focus {
		&:after {
			background: get-color("dark", 0.5);
		}
		img {
			@include transform(scale(1.04));
		}
		.content {
			visibility: hidden;
			opacity: 0;
		}
		.hover-content {
			visibility: visible;
			opacity: 1;
		}
	}
}
.hoverbox-4 {
	&.center {
		.content, 
		.hover-content {
			top: 50%;
			left: 0;
			@include transform(translateY(-50%));
			width: 100%;
			padding: 0 30px;
		}
		.hover-content {
			margin-top: 5px;
		}
		&:hover, &:focus {
			.content {
				margin-top: -5px;
			}
			.hover-content {
				margin-top: 0;
			}
		}
	}
	&.bottom {
		.content, 
		.hover-content {
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 30px;
		}
		.hover-content {
			@include transform(translateY(5px));
		}
		&:hover, &:focus {
			.content {
				@include transform(translateY(-5px));
			}
			.hover-content {
				@include transform(translateY(0));
			}
		}
	}
}

//
// Hover box - Style 5 //
//
.hoverbox-5 {
	&:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		background: get-color("dark", 0.4);
		width: 100%;
		height: 100%;
		@include transition(ease-out 0.12s);
	}
	.content, 
	.hover-content {
		position: absolute;
		z-index: 1;
		left: 0;
		width: 100%;
		padding: 30px;
		color: get-color("white", 0.7);
		h1,h2,h3,h4,h5,h6 {
			color: white;
		}
	}
	.content {
		top: 0;
	}
	.hover-content {
		bottom: 0;
		@include transform(translateY(5px));
		visibility: hidden;
		opacity: 0;
		@include transition(ease-out 0.12s);
	}
	&:hover, &:focus {
		&:after {
			background: get-color("dark", 0.5);
		}
		img {
			@include transform(scale(1.04));
		}
		.hover-content {
			@include transform(translateY(0));
			visibility: visible;
			opacity: 1;
		}
	}
}

//
// Hover box - Style 6 //
//
.hoverbox-6 {
	a {
		display: block;
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			opacity: 0;
			background: get-color("white", 0.1);
			width: 100%;
			height: 100%;
			@include transition(ease-out 0.12s);
		}
	}
	.content {
		position: absolute;
		z-index: 2;
		display: inline-block;
		background: get-color("white", 0.9);
		backdrop-filter: blur(5px);
		padding: 10px 16px;
		color: get-color("dark", 0.9);
		h1,h2,h3,h4,h5,h6 {
			margin: 0;
			color: get-color("dark", 0.9);
		}
		&.top {
			top: 16px;
			left: 16px;
		}
		&.center {
			top: 50%;
			left: 50%;
			@include transform(translate(-50%, -50%));
		}
		&.bottom {
			bottom: 16px;
			left: 16px;
		}
	}
	&:hover, &:focus {
		a {
			&:before {
				opacity: 1;
			}
		}
		img {
			@include transform(scale(1.04));
		}
	}
}

.hoverbox-7 {
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		visibility: hidden;
		opacity: 0;
		background-image: linear-gradient(0deg, get-color("dark", 0.5) 0%, get-color("dark", 0.1) 100%);
		width: 100%;
		height: 100%;
		@include transition(ease-out 0.12s);
	}
	.hover-content {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		color: get-color("white", 0.7);
		h1,h2,h3,h4,h5,h6 {
			color: white;
		}
		.top {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			-webkit-transform: translateY(5px);
			transform: translateY(5px);
			opacity: 0;
			padding: 30px;
			@include transition(ease-out 0.12s);
		}
		.bottom {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			-webkit-transform: translateY(5px);
			transform: translateY(5px);
			opacity: 0;
			padding: 30px;
			@include transition(ease-out 0.12s);
		}
	}
	&:hover, &:focus {
		&:before {
			visibility: visible;
			opacity: 1;
		}
		img {
			@include transform(scale(1.04));
		}
		.hover-content {
			visibility: visible;
			opacity: 1;
			.top, .bottom {
				-webkit-transform: translateY(0);
				transform: translateY(0);
				opacity: 1;
			}
			.top { @include transition-delay(0.05s); }
			.bottom { @include transition-delay(0.10s); }
		}
	}
}

.hoverbox-1, 
.hoverbox-2, 
.hoverbox-4, 
.hoverbox-5, 
.hoverbox-7 {
	a {
		&:not([class^='button']) {
			color: get-color("white", 0.7);
			&:hover, &:focus { color: white; }
		}
	}
	a {
		&.button-text-1, 
		&.button-text-2, 
		&.button-text-3 {
			color: get-color("white", 0.8);
			&:hover {
				color: white;
			}
		}
		&.button-text-1 {
			&:before { background: get-color("white", 0.3); }
			&:after { background: white; }
		}
		&.button-text-2 {
			&:before { background: get-color("white", 0.4); }
			&:after { background: white; }
		}
		&.button-text-3 {
			&:before { background: get-color("white", 0.8); }
			&:hover {
				&:before { background: white; }
			}
		}
	}
}