//----------------------------------------------------------------------------------------------------------------------
// LISTS
//----------------------------------------------------------------------------------------------------------------------

/// Lists.
/// @group components
/// @example markup
///   <ul class="list">
///     <li>List item</li>
///     <li>List item</li>
///     <li>List item</li>
///   </ul>
/// @example markup
///   <ol class="list bordered">
///     <li>List item</li>
///     <li>List item</li>
///     <li>List item</li>
///   </ol>
/// @example markup
///   <dl class="list">
///     <dt>Descriptive list title</dt>
///     <dd>Descriptive list data</dd>
///     <dt>Descriptive list title</dt>
///     <dd>Descriptive list data</dd>
///     <dt>Descriptive list title</dt>
///     <dd>Descriptive list data</dd>
///   </dl>
.list {

	// Bordered lists will display horizontal lines between items
	&.bordered {
		padding: 0; // Move padding to individual elements

		> * {
			// Compensate parent left and right border
			@include border-padding($border-width, (null, rhythm(1)));

			// Divider between list items
			&:not(:first-child):not(dd) {
				border-top: $border-width-light $border-style-light $border-color-light;

				@include border-padding($border-width-light, (rhythm(0.5), null, null));
			}

			// Compensate parent top border in first list item
			&:first-child {
				@include border-padding($border-width, (rhythm(0.5), null, null));
			}

			// Compensate parent bottom border in last list item
			&:last-child {
				@include border-padding($border-width, (null, null, rhythm(0.5)));
			}
		}
	}

	// Remove padding from first and last list item if not bordered to maintain consistent vertical rhythm
	&:not(.bordered) {
		> * {
			&:first-child {
				padding-top: 0;
			}

			&:last-child {
				padding-bottom: 0;
			}
		}
	}

	// Different list types
	@at-root {
		// Nested lists
		& & {
			padding-top: rhythm(.5);
			margin-left: rhythm(1);
		}

		// Basic vertical lists
		ul#{&}, ol#{&} {
			padding-left: rhythm(1);
			> li {
				&:before {
					position: absolute;
					display: inline-block;
					margin-left: rhythm(-1);
				}
			}

			// No bullet points before list items
			&.no-bullets {
				> li {
					&:before {
						content: none;
					}
				}
			}
		}

		// Unordered lists
		ul#{&} {
			> li {
				&:before {
					content: "•";
				}
			}
		}

		// Ordered lists
		ol#{&} {
			counter-reset: num;

			> li {
				&:before {
					counter-increment: num;
					content: counters(num, ".") ".";
					font-weight: $font-weight-bold;
				}
			}
		}

		// Descriptive lists
		dl#{&} {
			dt {
				font-weight: $font-weight-bold;
			}
		}
	}

	// Larger viewports
	@include media(">=", $breakpoint-s) {
		&.bordered {
			> * {
				// Increase horizontal padding for bordered lists
				@include border-padding($border-width, (null, rhythm(2)));
			}
		}
	}
}