//
// Lightbox Styles //
//
.lightbox-image-box, 
.lightbox-media-box {
	position: relative;
	overflow: hidden;
	display: block;
	&[class*=' border-radius-'], &[class^='border-radius-'] {
		@include transform(translate3d(0,0,0));
	}
	&:after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0;
		background: $color-black-01;
		@include transition(ease-out 0.12s);
	}
	img {
		@include transform(scale(1));
		@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
	}
	i {
		z-index: 1;
		position: absolute;
		top: 50%;
		left: 50%;
		@include transform(translate(-50%, -50%));
		background: $color-black-06;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		text-align: center;
		line-height: 60px;
		color: $color-white-09;
		@include transition(ease-out 0.16s);
	}
	&.icon-xl, &.icon-2xl {
		i {
			width: 70px;
			height: 70px;
			line-height: 70px;
		}
	}
	&.icon-3xl, &.icon-4xl, &.icon-5xl {
		i {
			width: 80px;
			height: 80px;
			line-height: 80px;
		}
	}
	&:hover {
		&:after {
			opacity: 1;
		}
		img {
			@include transform(scale(1.04));
		}
		i {
			@include transform(translate(-50%, -50%) scale(0.94));
		}
	}
}

.mfp-bg {
	background: $color-black;
}
.mfp-container,
.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	@include transition(ease-out 0.16s);
}
.mfp-container {
	@include transform(scale(0.98));
	padding: 0 20px;
}
.mfp-ready {
	.mfp-container {
		@include transform(scale(1));
		opacity: 1;
	}
	&.mfp-bg {
		opacity: 0.97;
	}
}
.mfp-removing {
	.mfp-container, 
	&.mfp-bg {
		opacity: 0;
	}
	.mfp-container {
		@include transform(scale(0.98));
	}
}

button {
	&.mfp-close {
		display: block;
		top: -5px;
		opacity: 1;
		width: auto;
		height: auto;
		line-height: auto;
		font-size: 24px;
		@include transition(linear 0.1s);
		&:hover {
			top: -5px;
			opacity: 1;
			color: #fff;
		}
	}
}
.mfp-iframe-holder {
	.mfp-close {
		top: -45px;
		&:hover { top: -45px; }
	}
}
.mfp-close-btn-in {
	.mfp-close {
		color: rgba(255, 255, 255, 0.7);
	}
}

.mfp-arrow {
	@include transition(linear 0.1s);
}
.mfp-arrow-left {
	&:before { border-right: 0; }
}
.mfp-arrow-right {
	&:before { border-left: 0; }
}

@include breakpoint-less(xs) {
	button.mfp-arrow {
		background: $color-black-05;
		width: 70px;
		height: 70px;
		margin-top: -35px;
		&:active {
			margin-top: -35px;
		}
	}
	button.mfp-arrow-left {
		margin-left: 20px;
		&:before, &:after {
			margin-top: 15px;
			margin-left: 20px;
		}
	}
	button.mfp-arrow-right {
		margin-right: 20px;
		&:before, &:after {
			margin-top: 15px;
			margin-left: 30px;
		}
	}
}

.mfp-bottom-bar {
	margin-top: -30px;
	.mfp-title {
		color: $color-white-07;
	}
	.mfp-counter {
		color: $color-white-06;
		font-size: 14px;
	}
}

.mfp-iframe-scaler iframe, .mfp-figure::after {
	@include box-shadow(0 0 14px 0 rgba(0,0,0,0.3));
}