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

@import "../common";

/**
 *	<nav class="pagination small pill">
 *		<ul>
 *			<li><a href="" class="button">Previous</a></li>
 *			<li><a href="" class="button">1</a></li>
 *			<li><a href="" class="button">2</a></li>
 *			<li class="active"><a href="" class="button">3</a></li>
 *			<li><a href="" class="button">4</a></li>
 *			<li><a href="" class="button">5</a></li>
 *			<li class="disabled"><a href="" class="button">Next</a></li>
 *		</ul>
 *	</nav>
 */

.pagination {
	display: block;
	margin: $margin 0;

	ul,
	li {
		@include reset-inline-block;
		list-style: none;
	}

	li {
		float: left;
		margin-right: $padding / 2;

		.button {
			float: left;
		}

		&.is-active {
			z-index: 1;
		}
	}

	@include clear-fix;
}

//-------------------- Modifiers --------------------//

.pagination.pagination--grouped {
	li {
		margin-left: -1px;
		margin-right: 0;

		&:first-child { margin-left: 0; }
		&:hover, .button:hover { z-index: 1; }

		.button {
			margin: 0;
			border-radius: 0;
		}
	}

	// Shape: round
	&.round {
		ul {
			border-radius: $round;
		}

		li:first-child .button {
			border-top-left-radius: $round;
			border-bottom-left-radius: $round;
		}

		li:last-child .button {
			border-top-right-radius: $round;
			border-bottom-right-radius: $round;
		}
	}

	// Shape: pill
	&.pill {
		ul {
			border-radius: $pill;
		}

		li:first-child .button {
			border-top-left-radius: $pill;
			border-bottom-left-radius: $pill;
		}

		li:last-child .button {
			border-top-right-radius: $pill;
			border-bottom-right-radius: $pill;
		}
	}

	// Shape: oval
	&.oval {
		ul {
			border-radius: #{$oval-x} / #{$oval-y};
		}

		li:first-child .button {
			border-radius: #{$oval-x} 0 0 #{$oval-x} / #{$oval-y} 0 0 #{$oval-y};
		}

		li:last-child .button {
			border-radius: 0 #{$oval-x} #{$oval-x} 0 / 0 #{$oval-y} #{$oval-y} 0;
		}
	}

	// Shape: skew
	&.skew {
		ul {
			border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
		}

		li:first-child .button {
			border-radius: #{$skew-x} 0 0 0 / #{$skew-y} 0 0 0;
		}

		li:last-child .button {
			border-radius: 0 #{$skew-x} 0 0 / 0 #{$skew-y} 0 0;
		}
	}
}