@import "imports/utils.less";

	// Config

	@fs-carousel-styles:						true;

	@fs-carousel-overflow:						hidden;
	@fs-carousel-transition-duration:			0.5s;
	@fs-carousel-transition-timing:				ease;

	// Controls

	@fs-carousel-control-background:			#fff;
	@fs-carousel-control-height:				40px;
	@fs-carousel-control-width:					40px;

	@fs-carousel-control-transition-duration:	0.15s;
	@fs-carousel-control-transition-timing:		ease;

	@fs-carousel-control-box-shadow: 			0 0 5px fade(#000, 25);
	@fs-carousel-control-border-radius:			100%;

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

	@fs-carousel-control-disabled-opacity:		0;

	// Control Carets

	@fs-carousel-control-caret-color:			#333;
	@fs-carousel-control-caret-size:			7px;

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

	// Carousel pagination

	@fs-carousel-pagination-margin:				10px 0 0;
	@fs-carousel-pagination-padding:			0;

	@fs-carousel-page-background:				#333;
	@fs-carousel-page-border-radius:			100%;
	@fs-carousel-page-margin:					0 3px;
	@fs-carousel-page-opacity:					0.5;
	@fs-carousel-page-height:					10px;
	@fs-carousel-page-width:					10px;

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

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

	/**
	 * @class
	 * @name .fs-carousel.fs-enabled
	 * @type modifier
	 * @description Indicates enabled state
	 */

 	.fs-carousel {
	 	&&-enabled {
	 		.fs_clearfix();

	 		width: 100%;

	 		position: relative;

	 		overflow: @fs-carousel-overflow;
	 	}

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

		/**
		 * @class
		 * @name .fs-carousel-viewport
		 * @type element
		 * @description Carousel container
		 */

		&-enabled &-viewport {
			.fs_clearfix();

			position: relative;
			overflow: @fs-carousel-overflow;
		}

		/**
		 * @class
		 * @name .fs-carousel-wrapper
		 * @type element
		 * @description Carousel container
		 */

		&-enabled &-wrapper {
			.fs_clearfix();

			position: relative;
			overflow: @fs-carousel-overflow;
		}

		/**
		 * @class
		 * @name .fs-carousel-container
		 * @type element
		 * @description Canister container
		 */

		&-enabled &-container {
			.fs_clearfix();

			position: relative;
			overflow: @fs-carousel-overflow;
		}

		/**
		 * @class
		 * @name .fs-carousel-canister
		 * @type element
		 * @description Item container
		 */

		&-enabled &-canister {
			position: relative;

			backface-visibility: hidden;
			margin: 0;
			overflow: hidden;
			transition: transform @fs-carousel-transition-duration @fs-carousel-transition-timing;
			transform: translate3d(0, 0, 0);
		}

		/**
		 * @class
		 * @name .fs-carousel-item
		 * @type element
		 * @description Individual item
		 */

		&-enabled &-item {
			display: block;
			float: left;

			img {
				-webkit-user-drag: none;
				user-select: none;
			}
		}

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

		/**
		 * @class
		 * @name .fs-carousel-controls.fs-carousel-visible
		 * @type modifier
		 * @description Indicates visible state
		 */

		&-controls {
			display: none;
		}

		&-enabled &-controls {
			width: 100%;

			margin: 0;
			padding: 0;
		}

		&-enabled &-controls&-visible {
			display: block;
		}

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

		&-enabled &-control {
			position: absolute;
			top: 0;
			bottom: 0;

			cursor: pointer;
			display: block;
			visibility: hidden;

			& when (@fs-carousel-styles) {
				width: @fs-carousel-control-width;
				height: @fs-carousel-control-height;

				background: @fs-carousel-control-background;
				border-radius: @fs-carousel-control-border-radius;
				box-shadow: @fs-carousel-control-box-shadow;

				margin: auto;
				opacity: @fs-carousel-control-disabled-opacity;
				overflow: hidden;
				text-indent: 200%;
				transition:
					opacity @fs-carousel-control-transition-duration @fs-carousel-control-transition-timing,
					visibility @fs-carousel-control-transition-duration @fs-carousel-control-transition-timing;
				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;
				}
			}
		}

		&-enabled &-control&-visible {
			visibility: visible;

			& when (@fs-carousel-styles) {
				opacity: 1;
			}
		}

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

		&-enabled &-control_previous {
			left: @fs-carousel-control-previous-left;

			& when (@fs-carousel-styles) {
				&:before {
					border-top: @fs-carousel-control-caret-size solid transparent;
					border-bottom: @fs-carousel-control-caret-size solid transparent;
					border-right: @fs-carousel-control-caret-width solid @fs-carousel-control-caret-color;
					margin-left: @fs-carousel-control-caret-margin;
				}
			}
		}

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

		&-enabled &-control_next {
			right: @fs-carousel-control-next-right;

			& when (@fs-carousel-styles) {
				&:before {
					border-top: @fs-carousel-control-caret-size solid transparent;
					border-bottom: @fs-carousel-control-caret-size solid transparent;
					border-left: @fs-carousel-control-caret-width solid @fs-carousel-control-caret-color;
					margin-right: @fs-carousel-control-caret-margin;
				}
			}
		}

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

		&-enabled &-control_disabled {
			& when (@fs-carousel-styles) {
				opacity: 0;
			}
		}

		/**
		 * @class
		 * @name .fs-carousel-pagination
		 * @type element
		 * @description Item element
		 */

		/**
		 * @class
		 * @name .fs-carousel-pagination.fs-carousel-visible
		 * @type modifier
		 * @description Indicates visible state
		 */

		&-pagination {
			display: none;
		}

		&-enabled &-pagination {
			width: 100%;

			margin: @fs-carousel-pagination-margin;
			padding: @fs-carousel-pagination-padding;
			text-align: center;
		}

		&-enabled &-pagination&-visible {
			display: block;
		}

		/**
		 * @class
		 * @name .fs-carousel-page
		 * @type element
		 * @description Pagiantion item element
		 */

		&-enabled &-page {
			cursor: pointer;
			display: inline-block;

			& when (@fs-carousel-styles) {
				width: @fs-carousel-page-width;
				height: @fs-carousel-page-height;

				background: @fs-carousel-page-background;
				border-radius: @fs-carousel-page-border-radius;
				margin: @fs-carousel-page-margin;
				opacity: @fs-carousel-page-opacity;
				overflow: hidden;
				text-indent: 200%;
				white-space: nowrap;

				// IE8 - opacity check

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

		/**
		 * @class
		 * @name .fs-carousel-page.fs-carousel-active
		 * @type modifier
		 * @description Indicates active state
		 */

		&-enabled &-page&-active {
			& when (@fs-carousel-styles) {
				opacity: 1;
			}
		}
	}