/**
 * @copyright	Copyright 2010-2013, The Titon Project
 * @license		http://opensource.org/licenses/bsd-license.php
 * @link		http://titon.io
 */

@import "../common";

/**
 * Should be used in conjunction with the JavaScript Titon.Carousel module.
 *
 *	<div class="carousel">
 *		<ul class="carousel-items">
 *			<li>
 *				<img src="/path/to/image.jpg">
 *				<div class="carousel-caption">Image caption</div>
 *			</li>
 *		</ul>
 *		<ol class="carousel-tabs">
 *			<li><a href=""></a></li>
 *		</ol>
 *		<a href="javascript:;" class="carousel-prev">
 *			<span class="icon-chevron-sign-left"></span>
 *		</a>
 *		<a href="javascript:;" class="carousel-next">
 *			<span class="icon-chevron-sign-right"></span>
 *		</a>
 *	</div>
 */

.carousel {
	// 16:9
	max-width: 640px;
	max-height: 360px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: left;
	position: relative;
	overflow: hidden;
}

.carousel-items {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 1;
	@include transition(left 1s, top 1s);

	> li {
		position: relative;
		width: 100%;
		height: auto;
		z-index: 1;
		display: block;

		> img {
			display: block;
			width: 100%;
			max-width: 100%;
			height: auto;
		}

		.carousel-caption {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: $padding;
			color: #fff;
			background: black(.70);
		}
	}
}

.carousel-prev,
.carousel-next {
	display: block;
	position: absolute;
	padding: $padding;
	width: auto;
	height: auto;
	z-index: 5;
	font-size: 28px;
	color: #fff;
	opacity: .65;
	top: 50%;
	@include transform(translateY(-50%)); // move up 50% of their height

	&:hover {
		color: #fff;
		opacity: 1;
	}

	&:focus {
		outline: none;
	}

	// Large icons for large resolutions
	@include if-tablet-landscape {
		.carousel-prev,
		.carousel-next {
			font-size: 56px;
		}
	}
}

.carousel-prev { left: 0; }
.carousel-next { right: 0; }

.carousel-tabs {
	list-style: none;
	line-height: 100%;
	margin: 0;
	padding: $padding;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 5;
	@include transform(translateX(-50%)); // move left 50% of their width

	li {
		display: inline-block;
		margin: 0 3px;
	}

	a {
		display: inline-block;
		border: 2px solid #fff;
		height: 10px;
		width: 10px;
		border-radius: 50%;
		opacity: .65;

		&:hover { opacity: 1; }
		&.is-active { background: #fff; }
	}

	// Hide if no tabs
	&:empty { display: none; }
}

//-------------------- Animations --------------------//

.carousel.slide {
	.carousel-items {
		@include clear-fix;

		> li {
			float: left;
		}
	}
}

.carousel.fade {
	.carousel-items {
		height: 360px; // needs a base height because slides are absolute

		> li {
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			z-index: 1;
			@include transition(opacity 1s);

			&.show { z-index: 2; }
		}
	}
}