// Lists
//
// Lists are very handy. Here we have all the different kinds. Take a look around!
// 
// Styleguide 10

// Default Lists
//
// No classes at all
// 
// Markup:
// <ul>
//     <li>Item one</li>
//     <li>Item two</li>
//     <li>Item three</li>
// </ul>
// 
// Styleguide 10.1

// Lists Style Types
// 
// All contain a <code>.list</code> class. Most also contain a modifier class 
// 
// .disc             - Keyboard focus state
// .circle             - Keyboard focus state
// .square             - Keyboard focus state
// .decimal             - Keyboard focus state
// .lower-alpha             - Keyboard focus state
// .upper-alpha             - Keyboard focus state
// .lower-roman             - Keyboard focus state
// .upper-roman             - Keyboard focus state
// 
// Markup:
// <ul class="list {{modifier_class}}">
//     <li class="list-item">Item one</li>
//     <li class="list-item">Item two</li>
//     <li class="list-item">Item three</li>
// </ul>
// 
// Styleguide 10.2

// Other Lists Types
// 
// All contain a <code>.list</code> class. Most also contain a modifier class 
// 
// .lines             - Keyboard focus state
// .inline             - Keyboard focus state
// 
// Markup:
// <ul class="list {{modifier_class}}">
//     <li class="list-item">Item one</li>
//     <li class="list-item">Item two</li>
//     <li class="list-item">Item three</li>
// </ul>
// 
// Styleguide 10.2

ul,
ol {
	padding: 0 0 1rem 1rem;
	margin: 0;
}

// nested list - adjusts the spacing of a nested list
li {
	> ul, > ol {
		padding: .5rem 0 .5rem 1rem;
	}
}

// DEFINITION List
dl {
	padding: 0 0 1rem;
	margin: 0;
}

dd {
	padding: 0 0 .125rem 2rem;
	margin: 0;
}

// RESET LIST
ul,
ol {
	&.base {
		padding: 0;
		margin: 0;

		list-style-type: none;
		> li {
			padding: 0;
			margin: 0;
		}
	}
}

.list-kind(@kind) {
	&.@{kind} {
		& when (@kind = disc), (@kind = circle) {
		margin-left: 16px;
		}
		& when (@kind = square), (@kind = decimal), (@kind = lower-alpha), (@kind = upper-alpha), (@kind = lower-roman), (@kind = upper-roman) {
		margin-left: 25px;
		}
		list-style: @kind;
	}
}

.list {
	padding: 0;

	list-style-type: none;
	.list-item {
		padding: 0 5px 5px 0;
	}

	// loop through the lists kinds and hit the .btn-kind mixin
	@list: disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman;
	@listLength: length(@list);
	.loop(@passedIn, @index: 1) when (@index =< @passedIn) {
		@arrayVal: extract(@list, @index);
		.list-kind(@arrayVal);	 
		.loop(@passedIn, (@index + 1));
	}
	.loop(@listLength);
	// end the loop

	&.lines {
		.list-item {
			padding: 5px;
			margin: 0;

			background-color: @list-lines-bgcolor;
			&.odd,
			&:nth-child(odd) {
				background-color: @list-lines-bgcolor-odd;
			}
		}
	}
	&.inline {
		.list-item {
			display: inline;
			float: left;
			padding: 0 10px;

			border-left: 1px solid @list-inline-bordercolor;
			&:first-child {
				border-left: 0 solid transparent;
			}
		}
		&:after,
		&::after {
			display: table;
			clear: both;

			content: '';
		}
	}
}