/* PLUGIN: FANCYBOX
-------------------------------------------- */

.fancybox-container {
	transition: filter var(--vlt-transition-duration) var(--vlt-transition-easing);
	z-index: z("fancybox");

	@include admin-sticky-fix-default;
}

.fancybox-bg {
	background-color: var(--vlt-color-dark-0p8);
}

.fancybox-is-open .fancybox-bg {
	opacity: 1;
}

.fancybox-loading {
	border: 2px solid var(--vlt-color-white-0p2);
	border-top-color: var(--vlt-accent-1);
}

/* BUTTONS
-------------------------------------------- */

.fancybox-navigation,
.fancybox-toolbar,
.fancybox-content {

	.fancybox-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: px2rem(46px);
		height: px2rem(46px);
		padding: 0;
		overflow: hidden;
		font-size: px2rem(13px);
		color: var(--vlt-color-white);
		cursor: pointer;
		background-color: var(--vlt-color-gray-darker-0p6);
		border-radius: 50%;
		transition: all var(--vlt-transition-duration) var(--vlt-transition-easing);

		&:hover {
			color: var(--vlt-color-gray);
			background-color: var(--vlt-color-gray-darker-0p4);
		}

		svg {
			height: 1em;
		}

	}

	.fancybox-close-small {
		top: calc(px2rem(-46px) / 2);
		right: calc(px2rem(-46px) / 2);
		opacity: 1;
	}

}

.fancybox-infobar {
	top: px2rem(16px);
	left: px2rem(16px);
}

.fancybox-toolbar {
	top: px2rem(16px);
	right: px2rem(16px);
}

.fancybox-navigation .fancybox-button--arrow_left {
	left: px2rem(16px);

	&:hover i,
	&:hover svg {
		animation: vlt_animate_icon_left var(--vlt-transition-duration) var(--vlt-transition-easing) forwards;
	}

}

.fancybox-navigation .fancybox-button--arrow_right {
	right: px2rem(16px);

	&:hover i,
	&:hover svg {
		animation: vlt_animate_icon_right var(--vlt-transition-duration) var(--vlt-transition-easing) forwards;
	}

}