/*
Currently in use at:
- NDN
		perl/Ndn/Dhwebpanel/Billing/Account.pm.tp
		perl/Ndn/Dhwebpanel/Domain/Secure.pm.tp
		perl/Ndn/Dhwebpanel/Home/Overview.pm.tp
		perl/Ndn/Dhwebpanel/Mail/Addresses.pm.tp
- DH.com
		Numerous Pages
- Signup
		signup/src/presentation/components/AddDomain/DomainsSearch.js
		signup/src/presentation/components/AddDomain/TldPrices.js
		signup/src/presentation/components/PlanPicker/PlanOption.js

	Default list component

	.List is for a general purpose list of text
	.List--disc gives the list dots, for an unordered list
	.List--dec give the list numbered value for an ordered list
	.List--tick give the list tick icons
	.List--double gives lists double line height
	.List--inline makes the list horizontal
	.List--50 makes list items 50% width
	.List__menu formats list item links like a product menu
*/
.List {text-align: left; @include fontsize($t-1);} // All lists should be left aligned unless specified
.List > li:last-child {margin-bottom: 0;}

.List--disc {list-style-type: disc; list-style-position: outside;}
.List--disc > li {margin-left: 2rem;}

.List--dec {list-style-type: decimal-leading-zero;}
.List--dec > li {margin-left: 2rem;}

.List--check {list-style-type: none;}
.List--check > li {margin: 0;}
.List--check > li:before {
	content: "";
	display: inline-block;
	height: 1rem;
	width: 1rem;
	vertical-align: middle;
	margin-right: 0.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10.4 18.8l14-15.4c1.7-1.8 4.5-1.9 6.3-.1 1.7 1.7 1.8 4.5.2 6.3L14.3 27.9c-1.3 2.1-4 2.8-6.1 1.4-.4-.3-.8-.6-1.1-1l-5.8-6c-1.7-1.8-1.6-4.7.1-6.5 1.7-1.7 4.4-1.7 6.2 0l2.8 3z' fill='#{$c-b300}'/%3E%3C/svg%3E");
}

.List--check.List--double > li:before {
	margin-right: 1rem;
}

.List--double > li{
	margin-bottom: 1rem;
}

.List--double > li:last-of-type{
	margin-bottom: none;
}

.List--inline > li {
	padding: 0;
	display: inline;
	margin-right: 2rem;
}

.List--inline > li:last-child {margin-right: 0;}

.List--50 {
	font-size: 0;
}

.List--50 > li {
	width: 50%;
	display: inline-block;
}

// List as a menu
.List__menu {

	li {
		vertical-align: top;

		&:last-of-type .List__menu--description {
			padding-bottom: 0;
			margin-bottom: 0;
		}
	}

	li a {
		display: block;
		padding: 0;

		&:hover {
			text-decoration: none;
		}

		&:hover > .List__menu--title {
			color: $c-b300;
		}
	}

	&.List--50{
		li {
			&:nth-last-of-type(2) .List__menu--description, &:last-of-type .List__menu--description{
				padding-bottom: 0;
				margin-bottom: 0;
			}
		}
	}
}

.List__menu--title {
	text-transform: uppercase;
	letter-spacing: .666px;
	color: $c-g500;
	@include fontsize($t-1, $t-h-1);
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.List__menu--description {
	color: $c-g400;
	@include fontsize($t-1);
}

/*
	List style variations

	Add to the default .list component for consistent styles
	- list--padding adds some default padding around the list items for larger click areas
	- list--small-bold is a slightly smaller and bolder list with no link underlines
*/
// .list--padding
.List.List--padding {padding-top: 0.5rem; padding-bottom: 0.5rem;}
.List__menu.List--padding {padding: 1rem 0};
.List__menu.List--padding > li {padding: 0 0.5rem};
.List.List--padding > li {margin-bottom: 0;}

.List.List--padding > li > * {
	display: block;
	padding: 0.5rem 1rem;

	transition-duration: 0.1s;
	transition-timing-function: linear
}

// .list--small-bold
.List--small-bold > li > * {
	font-weight: $t-bold;
	color: $black;
	text-decoration: none;
	@include fontsize($t-1);
}

.List--small-bold > li span {
	color: $c-g400;
	@include fontsize($t-1);
	padding: auto 0.5rem;
}

// Don't give hover states to non-links
.List--small-bold > li > a:hover,
.List--small-bold > li > button:hover,
.List--small-bold > li > .is-link:hover {
	color: $c-b300;
}

// Disabled state
.List--small-bold > li > .is-disabled {
	pointer-events: none;
	opacity: .3;
}

/*
	Makes icons display in a right-aligned column in the list, instead of left

	<ul class="list list--icon-right">
		<li><a><svg class="icon">...</svg>Link</a></li>
	</ul>
*/
.List--icon-right > li {position: relative;}
.List--icon-right > li > * {padding-right: 3.5em;}

.List--icon-right .icon {
	position: absolute;
	top: 50%;
	margin-top: -.725em;
	margin-right: 0;
	right: 1.5em;
}