//  =================
//      Imports
//  =================

@import '../../assets/base/color_variables';    // Color Variables
@import '../../assets/base/fonticons';              // Fonticons Variables
@import '../../assets/base/urls';                   // URLS Variables
@import '../../assets/base/utilities_variables';  // Utilities Variables

/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */

.pswp {
	display: none;
	position: $pos-abs;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	overflow: hidden;
	-ms-touch-action: none;
	touch-action: none;
	z-index: 1500;
	-webkit-text-size-adjust: 100%;
	-webkit-backface-visibility: hidden;
	outline: none;
	* {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	img {
		max-width: none;
	}
}

/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
	opacity: 0.001;
	will-change: opacity;
	-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
	transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp--open {
	display: block;
}
.pswp--zoom-allowed {
	.pswp__img {
		cursor: -webkit-zoom-in;
		cursor: -moz-zoom-in;
		cursor: zoom-in;
	}
}
.pswp--zoomed-in {
	.pswp__img {
		cursor: -webkit-grab;
		cursor: -moz-grab;
		cursor: grab;
	}
}
.pswp--dragging {
	.pswp__img {
		cursor: -webkit-grabbing;
		cursor: -moz-grabbing;
		cursor: grabbing;
	}
}

/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
	position: $pos-abs;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: $black;
	opacity: 0;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	will-change: opacity;
	will-change: opacity;
	-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
	transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp__scroll-wrap {
	position: $pos-abs;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
/* Prevent selection and tap highlights */
.pswp__container {
	-ms-touch-action: none;
	touch-action: none;
	position: $pos-abs;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-backface-visibility: hidden;
}
.pswp__zoom-wrap {
	-ms-touch-action: none;
	touch-action: none;
	position: $pos-abs;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: $pos-abs;
	width: 100%;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
	-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
	transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
	-webkit-backface-visibility: hidden;
}
.pswp__img {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	position: $pos-abs;
	width: auto;
	height: auto;
	top: 0;
	left: 0;
}
.pswp--animated-in {
	.pswp__bg {
		-webkit-transition: none;
		transition: none;
	}
	.pswp__zoom-wrap {
		-webkit-transition: none;
		transition: none;
	}
}
.pswp__item {
	position: $pos-abs;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
}
/*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
	-webkit-backface-visibility: hidden;
}

/*
	div element that matches size of large image
	large image loads on top of it
*/
.pswp__img--placeholder--blank {
	background: $color_353;
}
.pswp--ie {
	.pswp__img {
		width: 100% !important;
		height: auto !important;
		left: 0;
		top: 0;
	}
}
/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg {
	position: $pos-abs;
	left: 0;
	top: 50%;
	width: 100%;
	text-align: $align-center;
	font-size: 14px;
	line-height: 16px;
	margin-top: -8px;
	color: $color_103;
	a {
		color: $color_103;
		text-decoration: underline;
	}
}