@import "imports/utils.less";

	// Overlay

	@fs-lightbox-overlay-background:				#000;
	@fs-lightbox-overlay-opacity:					0.75;

	// Transition

	@fs-lightbox-transition-duration:				0.25s;
	@fs-lightbox-transition-timing:					ease;

	// Lightbox

	@fs-lightbox-background:						#fff;
	@fs-lightbox-padding:							10px;
	@fs-lightbox-z-index:							100;

	@fs-lightbox-border-radius:						3px;
	@fs-lightbox-box-shadow: 						0 0 25px #000;

	// Close Button

	@fs-lightbox-close-background:					#fff;
	@fs-lightbox-close-font-family:					"Helvetica", Arial, sans-serif;
	@fs-lightbox-close-font-size:					22px;
	@fs-lightbox-close-font-weight:					700;
	@fs-lightbox-close-color:						#333;
	@fs-lightbox-close-border-radius:				100%;
	@fs-lightbox-close-width: 						30px;
	@fs-lightbox-close-height:						30px;

	// Container

	@fs-lightbox-container-background:				#fff;

	// Content

	@fs-lightbox-content-background:				#fff;

	// Controls

	@fs-lightbox-control-background:				#fff;
	@fs-lightbox-control-opacity:					1;
	@fs-lightbox-control-height:					40px;
	@fs-lightbox-control-width:						40px;

	@fs-lightbox-control-transition-duration:		0.15s;
	@fs-lightbox-control-box-shadow: 				0 0 5px fade(#000, 25);

	@fs-lightbox-control-border-radius:				100%;

	@fs-lightbox-control-previous-left:				20px;
	@fs-lightbox-control-next-right:				20px;

	// Control Carets

	@fs-lightbox-control-caret-color:				#333;
	@fs-lightbox-control-caret-size:				8px;

	@fs-lightbox-control-caret-width:				(@fs-lightbox-control-caret-size * 1.3);
	@fs-lightbox-control-caret-margin:				(@fs-lightbox-control-width - (@fs-lightbox-control-caret-size * 1.5)) / 2;

	// Loading Icons

	@fs-lightbox-loading-width:						50px;
	@fs-lightbox-loading-height:					50px;
	@fs-lightbox-loading-color:						#333;
	@fs-lightbox-loading-size:						5px;
	@fs-lightbox-loading-animation-duration:		0.75s;

	// Inline

	@fs-lightbox-inline-padding:					30px;

	// Meta

	@fs-lightbox-meta-padding:						10px 10px 0;

	// Position

	@fs-lightbox-position-font-size:				12px;
	@fs-lightbox-position-text-color:				#999;

	@fs-lightbox-position-margin:					5px 0;
	@fs-lightbox-position-padding:					0;

	// Caption

	@fs-lightbox-caption-font-size:					14px;
	@fs-lightbox-caption-text-color:				#666;

	@fs-lightbox-caption-margin:					5px 0;
	@fs-lightbox-caption-padding:					0;

	// Error

	@fs-lightbox-error-font-size:					14px;
	@fs-lightbox-error-text-color:					#900;

	@fs-lightbox-error-width:						250px;
	@fs-lightbox-error-margin:						0;
	@fs-lightbox-error-padding:						25px;

	// Mobile

	@fs-lightbox-mobile-background:					#111;

	// Mobile Close

	@fs-lightbox-mobile-close-font-size:			28px;
	@fs-lightbox-mobile-close-font-weight:			700;
	@fs-lightbox-mobile-close-text-color:			#ccc;
	@fs-lightbox-mobile-close-background:			#111;
	@fs-lightbox-mobile-close-width: 				40px;
	@fs-lightbox-mobile-close-height:				40px;

	// Mobile Container

	@fs-lightbox-mobile-container-background:		#111;

	// Mobile Content

	@fs-lightbox-mobile-content-background:			#111;
	@fs-lightbox-mobile-content-padding:			0 15px;

	// Mobile Controls

	@fs-lightbox-mobile-control-size:				50px;
	@fs-lightbox-mobile-control-background:			#111;

	// Control Carets

	@fs-lightbox-mobile-control-caret-color: 		#eee;
	@fs-lightbox-mobile-control-caret-margin:		(@fs-lightbox-mobile-control-size - (@fs-lightbox-control-caret-size * 1.5)) / 2;

	// Mobile Meta

	@fs-lightbox-mobile-meta-background:			#111;
	@fs-lightbox-mobile-meta-padding:				15px;

	// Mobile Position

	@fs-lightbox-mobile-position-font-size:			12px;
	@fs-lightbox-mobile-position-text-color:		#999;

	@fs-lightbox-mobile-position-margin:			0;
	@fs-lightbox-mobile-position-padding:			0 15px 0 0;

	// Mobile Caption

	@fs-lightbox-mobile-caption-font-size:			14px;
	@fs-lightbox-mobile-caption-text-color:			#eee;

	@fs-lightbox-mobile-caption-margin:				0;
	@fs-lightbox-mobile-caption-padding:			0;

	// Mobile Loading Icon

	@fs-lightbox-mobile-loading-color:				#999;

	// Mobile Caption

	@fs-lightbox-mobile-caption-background:			#222;
	@fs-lightbox-mobile-caption-button-font-size:	12px;
	@fs-lightbox-mobile-caption-button-text-color:	#999;

	/**
	 * @class
	 * @name .fs-lightbox-element
	 * @type element
	 * @description Target elmement
	 */

	/**
	 * @class
	 * @name .fs-lightbox
	 * @type element
	 * @description Base widget class
	 */

	/**
	 * @class
	 * @name .fs-lightbox.fs-lightbox-open
	 * @type modifier
	 * @description Indicates open state
	 */
	/**
	 * @class
	 * @name .fs-lightbox.fs-lightbox-loading
	 * @type modifier
	 * @description Indicates loading state
	 */
	/**
	 * @class
	 * @name .fs-lightbox.fs-lightbox-animating
	 * @type modifier
	 * @description Indicates animating state
	 */
	/**
	 * @class
	 * @name .fs-lightbox.fs-lightbox-mobile
	 * @type modifier
	 * @description Indicates mobile display
	 */
	/**
	 * @class
	 * @name .fs-lightbox.fs-lightbox-fixed
	 * @type modifier
	 * @description Indicates fixed positioning
	 */
	/**
	 * @class
	 * @name .fs-lightbox.fs-lightbox-inline
	 * @type modifier
	 * @description Indicates inline content
	 */
	/**
	 * @class
	 * @name .fs-lightbox.fs-lightbox-iframed
	 * @type modifier
	 * @description Indicates iFrame content
	 */

	.fs-lightbox {
		width: 200px;
		height: 200px;

		position: absolute;
		right: 0;
		left: 0;
		z-index: (@fs-lightbox-z-index + 1);

		background: @fs-lightbox-background;
		border-radius: @fs-lightbox-border-radius;
		box-shadow: @fs-lightbox-box-shadow;
		opacity: 0;
		margin: 0 auto;
		padding: @fs-lightbox-padding;

		-webkit-transform: translateZ(0);

		&,
		* {
			box-sizing: border-box;
			// transition: none;
			user-select: none !important;
		}

		// fixed

		&-fixed {
			position: fixed;
			top: 0;
			bottom: 0;

			margin: auto;
		}

		// inline

		&-inline {
			padding: @fs-lightbox-inline-padding;
		}

		// animating

		&-animating {
			transition:
				height @fs-lightbox-transition-duration @fs-lightbox-transition-timing,
				width @fs-lightbox-transition-duration @fs-lightbox-transition-timing,
				opacity @fs-lightbox-transition-duration linear,
				top @fs-lightbox-transition-duration @fs-lightbox-transition-timing;
		}

		&-animating &-container {
			transition: opacity @fs-lightbox-transition-duration linear @fs-lightbox-transition-duration;
		}

		/**
		 * @class
		 * @name .fs-lightbox-overlay
		 * @type element
		 * @description Overlay element
		 */

		&-overlay {
			width: 100%;
			height: 100%;

			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: @fs-lightbox-z-index;

			background: @fs-lightbox-overlay-background;
			opacity: 0;
			transition: opacity @fs-lightbox-transition-duration linear;
		}

		// open

		&-open {
			opacity: 1;
		}

		&-overlay&-open {
			opacity: @fs-lightbox-overlay-opacity;
		}

		/**
		 * @class
		 * @name .fs-lightbox-close
		 * @type element
		 * @description Close element
		 */

		&-close {
			.fs_button();

			width: @fs-lightbox-close-height;
			height: @fs-lightbox-close-height;

			position: absolute;
			top: -@fs-lightbox-close-height / 4;
			right: -@fs-lightbox-close-width / 4;
			z-index: (@fs-lightbox-z-index + 5);

			background: @fs-lightbox-close-background;
			border-radius: @fs-lightbox-close-border-radius;
			cursor: pointer;
			display: block;
			overflow: hidden;
			padding: 0;
			text-indent: 200%;
			white-space: nowrap;

			&:before {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;

				color: @fs-lightbox-close-color;
				content: "\00d7";
				display: block;
				font-family: @fs-lightbox-close-font-family;
				font-size: @fs-lightbox-close-font-size;
				font-weight: @fs-lightbox-close-font-weight;
				line-height: @fs-lightbox-close-height;
				margin: auto;
				text-align: center;
				text-indent: 0;
				transition: color 0.15s linear;
			}

			// IE8 - opacity check

			.no-opacity & {
				text-indent: -999px;
			}
		}

		/**
		 * @class
		 * @name .fs-lightbox-loading_icon
		 * @type element
		 * @description Loading icon element
		 */

		&-loading_icon {
			width: @fs-lightbox-loading-width;
			height: @fs-lightbox-loading-height;

			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: (@fs-lightbox-z-index + 5);

			display: block;
			margin: auto;
			opacity: 0;
			transition: opacity @fs-lightbox-transition-duration linear;

			&:before,
			&:after {
				width: 100%;
				height: 100%;

				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;

				border-radius: 110%;
				content: '';
				display: block;
			}

			&:before {
				border: @fs-lightbox-loading-size solid fade(@fs-lightbox-loading-color, 25);
			}

			&:after {
				animation: fs-lightbox-loading-spin @fs-lightbox-loading-animation-duration linear infinite;
				border: @fs-lightbox-loading-size solid transparent;
				border-top-color: @fs-lightbox-loading-color;
			}
		}

		@keyframes fs-lightbox-loading-spin {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}

		/**
		 * @class
		 * @name .fs-lightbox-container
		 * @type element
		 * @description Container element
		 */

		&-container {
			.fs_clearfix();

			width: 100%;
			height: 100%;

			position: relative;
			z-index: (@fs-lightbox-z-index + 3);

			background: @fs-lightbox-container-background;
			overflow: hidden;
		}

		/**
		 * @class
		 * @name .fs-lightbox-content
		 * @type element
		 * @description Content element
		 */

		&-content {
			.fs_clearfix();

			width: 100%;

			background: @fs-lightbox-content-background;
			opacity: 1;
			overflow: hidden;
			padding: 0;
		}

		// inline content

		&-inline &-content {
			width: auto;
		}

		// iframed content

		&-iframed &-content {
			width: 100%;
			height: 100%;

			overflow: auto;
			-webkit-overflow-scrolling: touch;
		}

		/**
		 * @class
		 * @name .fs-lightbox-image
		 * @type element
		 * @description Image element
		 */

		&-image {
			float: left;
		}

		/**
		 * @class
		 * @name .fs-lightbox-video
		 * @type element
		 * @description Video element
		 */

		&-video {
			width: 100%;
			height: 100%;
		}

		/**
		 * @class
		 * @name .fs-lightbox-iframe
		 * @type element
		 * @description iFrame element
		 */

		&-iframe {
			width: 100%;
			height: 100%;

			border: none;
			float: left;
			overflow: auto;
		}

		/**
		 * @class
		 * @name .fs-lightbox-tools
		 * @type element
		 * @description Tools element
		 */

		&-tools {
		}

		/**
		 * @class
		 * @name .fs-lightbox-meta
		 * @type element
		 * @description Meta info element
		 */

		&-meta {
			clear: both;
			padding: @fs-lightbox-meta-padding;
		}

		/**
		 * @class
		 * @name .fs-lightbox-controls
		 * @type element
		 * @description Controls container element
		 */

		&-controls {
		}

		/**
		 * @class
		 * @name .fs-lightbox-control
		 * @type element
		 * @description Control element
		 */

		&-control {
			.fs_button();

			width: @fs-lightbox-control-width;
			height: @fs-lightbox-control-height;

			position: absolute;
			top: 0;
			z-index: (@fs-lightbox-z-index + 5);

			background: @fs-lightbox-control-background;
			border-radius: @fs-lightbox-control-border-radius;
			box-shadow: @fs-lightbox-control-box-shadow;
			cursor: pointer;
			display: block;
			margin-right: auto;
			margin-left: auto;
			opacity: @fs-lightbox-control-opacity;
			overflow: hidden;
			text-indent: 200%;
			transition: opacity @fs-lightbox-control-transition-duration linear;
			white-space: nowrap;

			&:before {
				width: 0;
				height: 0;

				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;

				content: '';
				margin: auto;
			}

			// IE8 - opacity check

			.no-opacity & {
				text-indent: -999px;
			}
		}

		/**
		 * @class
		 * @name .fs-lightbox-control.fs-lightbox-control_previous
		 * @type modifier
		 * @description Indicates previous control
		 */

		&-control_previous {
			left: @fs-lightbox-control-previous-left;

			&:before {
				border-top: @fs-lightbox-control-caret-size solid transparent;
				border-bottom: @fs-lightbox-control-caret-size solid transparent;
				border-right: @fs-lightbox-control-caret-width solid @fs-lightbox-control-caret-color;
				margin-left: @fs-lightbox-control-caret-margin;
			}
		}

		/**
		 * @class
		 * @name .fs-lightbox-control.fs-lightbox-control_next
		 * @type modifier
		 * @description Indicates next control
		 */

		&-control_next {
			right: @fs-lightbox-control-next-right;

			&:before {
				border-top: @fs-lightbox-control-caret-size solid transparent;
				border-bottom: @fs-lightbox-control-caret-size solid transparent;
				border-left: @fs-lightbox-control-caret-width solid @fs-lightbox-control-caret-color;
				margin-right: @fs-lightbox-control-caret-margin;
			}
		}

		/**
		 * @class
		 * @name .fs-lightbox-control.fs-lightbox-control_disabled
		 * @type modifier
		 * @description Indicates disbaled state
		 */

		&-control_disabled {
			opacity: 0;
		}

		// controls hovers

		.no-touch & &-control {
			opacity: 0;
		}

		.no-touch &:hover &-control {
			opacity: @fs-lightbox-control-opacity;
		}

		.no-touch & &-control_disabled,
		.no-touch &:hover &-control_disabled {
			opacity: 0;
			cursor: default;
		}

		/**
		 * @class
		 * @name .fs-lightbox-position
		 * @type element
		 * @description Position element
		 */
		/**
		 * @class
		 * @name .fs-lightbox-position_current
		 * @type element
		 * @description Current position element
		 */
		/**
		 * @class
		 * @name .fs-lightbox-position_total
		 * @type element
		 * @description Total position element
		 */

		&-position {
			color: @fs-lightbox-position-text-color;
			font-size: @fs-lightbox-position-font-size;
			margin: @fs-lightbox-position-margin;
			padding: @fs-lightbox-position-padding;
		}

		/**
		 * @class
		 * @name .fs-lightbox-caption
		 * @type element
		 * @description Caption element
		 */

		&-caption {

			.fs_clearfix();

			& p {
				color: @fs-lightbox-caption-text-color;
				font-size: @fs-lightbox-caption-font-size;
				margin: @fs-lightbox-caption-margin;
				padding: @fs-lightbox-caption-padding;
			}
		}

		&-caption_toggle {
			display: none;
		}

		/**
		 * @class
		 * @name .fs-lightbox-error
		 * @type element
		 * @description Error message element
		 */

		&-error {
			width: @fs-lightbox-error-width;

			p {
				color: @fs-lightbox-error-text-color;
				font-size: @fs-lightbox-error-font-size;
				margin: @fs-lightbox-error-margin;
				padding: @fs-lightbox-error-padding;
				text-align: center;
				text-transform: uppercase;
			}
		}

		// loading

		&-loading &-container {
			opacity: 0;
			transition: opacity @fs-lightbox-transition-duration linear;
		}

		&-loading &-loading_icon {
			opacity: 1;
		}

		// mobile

		&-mobile {
			width: 100%;
			height: 100%;

			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;

			background: @fs-lightbox-mobile-background;
			border-radius: 0;
			padding: @fs-lightbox-mobile-close-height 0 0;
		}

		// close

		&-mobile &-close {
			height: @fs-lightbox-mobile-close-height;
			width: @fs-lightbox-mobile-close-width;

			top: 0;
			right: 0;

			background: @fs-lightbox-mobile-close-background;
			border-radius: 0;
		}

		&-mobile &-close:before {
			color: @fs-lightbox-mobile-close-text-color;
			font-size: @fs-lightbox-mobile-close-font-size;
			font-weight: @fs-lightbox-mobile-close-font-weight;
			line-height: @fs-lightbox-mobile-close-height;
		}

		// loading

		&-mobile &-loading_icon:before {
			border-color: fade(@fs-lightbox-mobile-loading-color, 25);
		}

		&-mobile &-loading_icon:after {
			border-top-color: @fs-lightbox-mobile-loading-color;
		}

		// container

		&-mobile &-container {
			background: @fs-lightbox-mobile-container-background;
		}

		// content

		&-mobile &-content {
			background-color: @fs-lightbox-mobile-content-background;
			padding: @fs-lightbox-mobile-content-padding;
		}

		// tools

		&-mobile &-tools {
			width: 100%;

			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;

			background-color: @fs-lightbox-mobile-meta-background;
		}

		// controls

		&-mobile &-controls {
		}

		// control

		&-mobile &-control {
			width: @fs-lightbox-mobile-control-size;
			height: 100%;
			min-height: @fs-lightbox-mobile-control-size;

			background: @fs-lightbox-mobile-control-background;
			border-radius: 0;
			box-shadow: none;
			opacity: 1;
		}

		&-mobile &-control_previous {
			left: 0;

			&:before {
				border-right-color: @fs-lightbox-mobile-control-caret-color;
				margin-left: @fs-lightbox-mobile-control-caret-margin;
			}
		}

		&-mobile &-control_next {
			right: 0;

			&:before {
				border-left-color: @fs-lightbox-mobile-control-caret-color;
				margin-right: @fs-lightbox-mobile-control-caret-margin;
			}
		}

		// controls hovers

		.no-touch &-mobile &-control,
		.no-touch &-mobile:hover &-control {
			opacity: @fs-lightbox-control-opacity;
		}

		&-mobile &-control_disabled,
		.no-touch &-mobile &-control_disabled,
		.no-touch &-mobile:hover &-control_disabled {
			opacity: 0;
			cursor: default !important;
		}

		// meta

		&-mobile &-meta {
			padding: @fs-lightbox-mobile-meta-padding (@fs-lightbox-mobile-control-size + @fs-lightbox-mobile-meta-padding);
		}

		// position

		&-mobile &-position {
			color: @fs-lightbox-mobile-position-text-color;
			font-size: @fs-lightbox-mobile-position-font-size;
			margin: @fs-lightbox-mobile-position-margin;
			padding: @fs-lightbox-mobile-position-padding;
		}

		// caption

		&-mobile &-caption {
			p {
				color: @fs-lightbox-mobile-caption-text-color;
				font-size: @fs-lightbox-mobile-caption-font-size;
				margin: @fs-lightbox-mobile-caption-margin;
				padding: @fs-lightbox-mobile-caption-padding;
			}
		}

		// image

		&-mobile &-image {
			transition: none !important;
			transform: translate(0, 0);
		}

		// animated

		&-mobile&-animated &-image {
			transition: transform 0.25s ease-out !important;
		}

		// inline / iframe content

		&-mobile&-inline &-content,
		&-mobile&-iframe &-content {
			overflow-x: hidden;
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch;
		}

		/**
		 * @class
		 * @name .fs-lightbox-lock
		 * @type modifier
		 * @description Indicates locked state; Applied to body element
		 */

		&-lock {
			overflow: hidden !important;
		}

		// touch captions

		&-mobile&-touch &-tools {
			width: auto;

			position: static;

			background: transparent;
		}

		&-mobile&-touch &-controls {
			width: 100%;
			height: @fs-lightbox-mobile-control-size;

			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: (@fs-lightbox-z-index + 5);

			background-color: @fs-lightbox-mobile-meta-background;
			padding: 0 (@fs-lightbox-mobile-meta-padding + @fs-lightbox-mobile-control-size);
		}

		&-mobile&-touch &-caption_toggle {
			color: @fs-lightbox-mobile-caption-button-text-color;
			display: block;
			font-size: @fs-lightbox-mobile-caption-button-font-size;
			line-height: @fs-lightbox-mobile-control-size;
		}

		&-mobile&-touch &-meta {
			width: 100%;
			height: 80%;

			position: fixed;
			top: 20%;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: (@fs-lightbox-z-index + 4);

			background: @fs-lightbox-mobile-caption-background;
			box-shadow: @fs-lightbox-box-shadow;
			padding: @fs-lightbox-mobile-meta-padding @fs-lightbox-mobile-meta-padding (@fs-lightbox-mobile-meta-padding + @fs-lightbox-mobile-control-size);
			transform: translate(0, 100%);
			transition: transform @fs-lightbox-transition-duration @fs-lightbox-transition-timing;
		}

		// caption open

		&-touch&-caption_open &-meta {
			transform: translate(0, 0);
		}
	}