/*--------------------------------------------------
  Fancybox
----------------------------------------------------*/

.u-fancybox-theme .fancybox-button {
	@include px-to-rem(font-size, 20px);
	@include px-to-rem(line-height, 41px);
	@include px-to-rem(width, 44px);
	@include px-to-rem(height, 44px);
	text-align: center;
	display: inline-block;
	background-color: transparent;
	@include px-to-rem(border-width, 1px);
	border-style: solid;
	border-color: $g-color-white;
	outline: none;
	border-radius: 50%;
	opacity: .8;
	transition: opacity .3s ease;

	&::before {
		font-family: "hs-icons";
		position: static;
		opacity: 1;
		background-color: transparent;
		border: none;
		box-shadow: none;
		transform: none;
		width: auto;
		height: auto;
	}

	&--left,
	&--right {
		@include px-to-rem(margin-top, -22px);
		position: absolute;
		top: 50%;
		z-index: 99994;
		display: none;
	}

	&--left {
		@include px-to-rem(left, 20px);
		&::before {
			content: "\e901";
		}
	}

	&--right {
		@include px-to-rem(right, 20px);
		&::before {
			content: "\e902";
		}
	}

	&--close {
		&::before {
			content: "\e904";
		}
	}

	&--play {
		&::before {
			content: "\e90c";
		}
	}

	&--fullscreen {
		&::before {
			content: "\e909";
		}
	}

	&--thumbs {
		&::before {
			content: "\e906";
		}
	}

	&::after {
		display: none;
	}

	&:hover,
	&:focus {
		opacity: 1;
	}

}

.u-fancybox-theme .fancybox-buttons {
	@include px-to-rem(top, 20px);
	@include px-to-rem(right, 20px);
	@include px-to-rem(margin-left, -5px);
	@include px-to-rem(margin-right, -5px);

	.fancybox-button {
		@include px-to-rem(margin-left, 5px);
		@include px-to-rem(margin-right, 5px);
	}
}

.u-fancybox-theme .fancybox-thumbs {
	background-color: $g-color-black;

	> ul > li {
		border-color: $g-color-black;

		&::before {
			border-color: $g-color-primary;
		}
	}
}

/* Blur bg container */
.u-fancybox-blur-bg-container {
	filter: blur(2px);
}

.fancybox-controls {
	&--canzoomIn .fancybox-placeholder,
	&--canzoomOut .fancybox-placeholder {
		cursor: inherit;
	}
}
