// Lists
//
// Markup:
// <ul class="px2-list">
// 	<li>list item 1</li>
// 	<li>list item 2</li>
// 	<li>list item 3</li>
// </ul>
//
// Styleguide 3.0
.px2-list{
	padding: 0 0 0 40px;
	li{
		list-style-type: disc;
	}
}

// Horizontal List
//
// Markup:
// <ul class="px2-horizontal-list">
// 	<li><a href="#" class="px2-link px2-link--burette">list item 1</a></li>
// 	<li><a href="#" class="px2-link px2-link--burette">list item 2</a></li>
// 	<li><a href="#" class="px2-link px2-link--burette">list item 3</a></li>
// </ul>
//
// Styleguide 3.1
.px2-horizontal-list,
.px2-horizontal-list>ul{
	display: flex;
	flex-wrap: wrap;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-left: 0;

	>ul>li ,
	>li {
		list-style-type: none;
		padding-left: 0;
		padding-right: 1em;
		>p{
			margin: 0;
		}
	}
}

// Horizontal List aligning
//
// Markup:
// <ul class="px2-horizontal-list px2-horizontal-list--left">
// 	<li><a href="#" class="px2-link px2-link--burette">list item 1</a></li>
// 	<li><a href="#" class="px2-link px2-link--burette">list item 2</a></li>
// 	<li><a href="#" class="px2-link px2-link--burette">list item 3</a></li>
// </ul>
// <ul class="px2-horizontal-list px2-horizontal-list--center">
// 	<li><a href="#" class="px2-link px2-link--burette">list item 1</a></li>
// 	<li><a href="#" class="px2-link px2-link--burette">list item 2</a></li>
// 	<li><a href="#" class="px2-link px2-link--burette">list item 3</a></li>
// </ul>
// <ul class="px2-horizontal-list px2-horizontal-list--right">
// 	<li><a href="#" class="px2-link px2-link--burette">list item 1</a></li>
// 	<li><a href="#" class="px2-link px2-link--burette">list item 2</a></li>
// 	<li><a href="#" class="px2-link px2-link--burette">list item 3</a></li>
// </ul>
//
// Styleguide 3.1.1
.px2-horizontal-list{
	&--left{
		justify-content: flex-start;
	}
	&--center{
		justify-content: center;
	}
	&--right{
		justify-content: flex-end;
	}
}

// Vertical List
//
// Markup:
// <ul class="px2-vertical-list">
// 	<li><a href="#" class="px2-link px2-link--burette">list item 1</a></li>
// 	<li><a href="#" class="px2-link px2-link--burette">list item 2</a></li>
// 	<li><a href="#" class="px2-link px2-link--burette">list item 3</a></li>
// </ul>
//
// Styleguide 3.2
.px2-vertical-list,
.px2-vertical-list>ul{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	padding-left: 0;

	>ul>li ,
	>li {
		list-style-type: none;
		padding-left: 0;
		>p{
			margin: 0;
		}
	}
}

// Ordered Lists
//
// Markup:
// <ol class="px2-ordered-list">
// 	<li>list item 1</li>
// 	<li>list item 2</li>
// 	<li>list item 3</li>
// </ol>
// <ol class="px2-ordered-list" start="4">
// 	<li>list item 4</li>
// 	<li>list item 5</li>
// 	<li>list item 6</li>
// </ol>
//
// Styleguide 3.3
.px2-ordered-list{
	padding: 0 0 0 40px;
	li{
		list-style-type: decimal;
	}
}

// Note Lists
//
// Markup:
// <ul class="px2-note-list">
// 	<li>list item 1</li>
// 	<li>list item 2</li>
// 	<li>list item 3</li>
// </ul>
//
// Styleguide 3.4
.px2-note-list,
.px2-note-list>ul{
	margin-top: 1em;
	margin-bottom: 1em;
	padding-left: 1.5em;

	>ul>li,
	>li {
		list-style-type: none;
		color: #999;
		font-size: 86%;
		position: relative;
		&::before{
			content: "※";
			position: absolute;
			left: -1.5em;
		}
	}
}