/* natUIve – List */

@import 'natuive-setup';

ul {
	
	padding: 0;
// 	font-size: $font-size;
	line-height: $line-height;
// 	line-height: var(--line-height);
	min-height: $line-height-em;
// 	min-height: var(--line-height-em);
// 	margin: 0;
	margin: $line-height-em/2 0 $line-height-em/2 0;
// 	margin: var(--line-height-em)/2 0 var(--line-height-em)/2 0;

}

ul.indent {
	
	margin-left: 1.5em;

}

ul li {

	display: block;
	margin-left: 1em;
	position: relative;

}

ul li:before {
	
	content: '·';
	position: absolute;
	margin-left: -.75em;

}

ul.inline, ul.inline li, nav.scroll ul li {
	
	vertical-align: top;
	display: inline-block;
// 	margin: $line-height-em/2 0;
// 	margin: var(--line-height-em) 0 0 0;

}

ul.inline li:before, nav ul li:before {
	
	display: none;

}

/*
ul.vertical li > a[href] { // Ugly when underlined
	
	display: block;

}
*/

ol {

    list-style-type: none;
    counter-reset: level1;
	padding: 0;
	margin: 0 0 $line-height-em 0;

}

ol > li {

	text-indent: -2.3em;
	margin: $line-height-em 0 $line-height-em/2 2.3em;
// 	margin: calc(var(--line-height-em)/2) 0 calc(var(--line-height-em)/2) 2.3em;

}

[dir=rtl] ol > li {

	margin: $line-height-em 2.3em $line-height-em/2 0;
// 	margin: calc(var(--line-height-em)/2) 2.3em calc(var(--line-height-em)/2) 0;

}

ol li > * {
	
	text-indent: 0;
	display: inline-block;

}

ol li > ul {
	
	display: block;

}

ol > li:before {

    content: counter(level1);
    counter-increment: level1;
    font-weight: bold;
    background: #999;
    padding: 0 .5em;
//     padding: calc(var(--line-height-em)/4) .6em calc(var(--line-height-em)/4) .6em;
    border-radius: 50%;
    margin-right: .5em;
    color: #fff;
//     min-width: 1.5em;
    min-height: 1em;
    display: inline-block;
    text-indent: 0;
    text-align: center;

}

[dir=rtl] ol > li:before {

    margin: 0 0 0 .5em;

}

ol > li ol {

    list-style-type: none;
    counter-reset: level2;
	display: block;

}

ol > li ol > li:before {

    content: counter(level1) '.' counter(level2) ' ';
    counter-increment: level2;
//     padding: $line-height-em/4 .4em $line-height-em/4 .5em;
//     padding: calc(var(--line-height-em)/4) .4em calc(var(--line-height-em)/4) .5em;
    border-radius: 1em;
    background: #999;
    color: #fff;

}

ol ol > li ol {

    list-style-type: none;
    counter-reset: level3;
    margin-left: 1em;

}

ol ol > li ol > li:before {

    content: counter(level1) '.' counter(level2) '.' counter(level3) ' ';
    counter-increment: level3;

}

ol ol > li {

	text-indent: -3em;

}

ol ol ol > li {

	text-indent: -3.9em;

}

ol ul {

	text-indent: .1em;

}

ol p {

	text-indent: 0;

}
