// Pagination
// 
// This is a navigation tool to shuffle you through pages, or something similar.
// 
// Styleguide 14

// Pagination
// 
// Markup:
// <div class="pagination">
// 	<ul class="list">
// 		<li class="list-item tport">
// 			<a class="txt-link" href="#">
// 				<div class="transport-left thin"></div> Previous
// 			</a>
// 		</li>
// 		<li class="list-item active">
// 			<a class="txt-link" href="#">1</a>
// 		</li>
// 		<li class="list-item">
// 			<a class="txt-link" href="#">2</a>
// 		</li>
// 		<li class="list-item">
// 			<a class="txt-link" href="#">3</a>
// 		</li>
// 		<li class="list-item">
// 			<a class="txt-link" href="#">4</a>
// 		</li>
// 		<li class="list-item">
// 			<a class="txt-link" href="#">5</a>
// 		</li>
// 		<li class="list-item tport">
// 			<a class="txt-link" href="#">
// 				Next <div class="transport-right thin"></div>
// 			</a>
// 		</li>
// 	</ul>
// </div>
// 
// Styleguide 14.1


.pagination {
	.clearfix;

	display: table;
	.list {
		display: table-cell;
	}
	.list-item {
		float: left;
		padding: 0;
		margin: 0 4px;
		&.active,
		&.inactive {
			.txt-link {
				color: @pag-txt-color-active;
				cursor: default;

				background-color: transparent;
				border-color: @pag-txt-bordercolor-active;
			}
		}
		+ .tport {
			margin-left: 50px;
		}
	}
	.txt-link {
		min-width: 33px;
		padding: 5px 0;

		text-align: center;

		background-color: @pag-bgcolor;
		border: 1px solid @pag-base-color;
		border-radius: 3px;
		&:hover {
			text-decoration: none;

			background-color: @pag-bgcolorhover;
		}
		&:focus {
			text-decoration: underline;
		}
	}
	.tport {
		.txt-link {
			padding: 5px 10px;
		}
		+ .list-item {
			margin-left: 50px;
		}
	}
	.transport {
		&-right,
		&-left {
			color: @colorS4;
			vertical-align: top;

			border-top: @pag-transport-borderwidth solid transparent;
			border-bottom: @pag-transport-borderwidth solid transparent;
		}
		&-right {
			top: 5px;
			right: 0;

			border-right-width: 0;
			border-left: @pag-transport-borderwidth solid @colorS4;
			border-left-color: @pag-transport-bordercolor;
		}
		&-left {
			top: 5px;
			left: 0;

			border-right: @pag-transport-borderwidth solid @colorS4;
			border-right-color: @pag-transport-bordercolor;
			border-left-width: 0;
		}
	}
}