/* wc.ui.listLayout.scss */
@import 'mixins_common.scss';

.listLayout {
	margin: 0;
	padding: 0;

	&.bar,
	&.flat,
	&.none {
		list-style-type: none;
	}

	// separators
	// NOTE: we do not output the separator as a class when the list is ordered (except NONE) so all of this is safe.
	&.bar { // bar bullets
		> li:before {
			content: '|';
			margin-right: $hgap-normal;
		}

		&.flat > li:first-child:before {
			content: '';
		}
	}

	&.dot { // 'normal' bullets
		margin-left: $list-layout-dot-spacing;

		&.flat,
		&.right {
			margin-left: 0;
		}
	}

	// Layouts
	&.flat { // horizontal list
		> li {
			display: inline-block;
			width: auto;

			> * { // this rule keeps 'block' components inline in a flat list
				display: inline-block;
				width: auto;
			}

			+ li {
				margin-left: $hgap-normal;
			}
		}

		&.dot > li + li:before { // dot bullets should be default but need pseudo-elements for flat lists.
			content: '\25cf';
			margin-right: $hgap-normal;
		}
	}

	&.center,
	&.right {
		list-style-position: inside;
		margin-left: 0;
	}

	&.striped > :nth-child(odd) {
		background-color: $wc-ui-color-highlight-bg;
		color: $wc-ui-color-highlight-fg;
	}
}

// need qualifiying element to differentiate from unordered listLayout
// scss-lint:disable QualifyingElement
ol.listLayout {
	margin-left: $list-layout-ordered-spacing;

	&.flat { // flat ordered lists use a pseudo-element with a counter
		counter-reset: li;
		margin-left: 0;

		> li:before {
			content: counter(li) '.';
			counter-increment: li;
			margin-right: $hgap-small;
		}

		&.none > li:before { // remove the counter if the separator is none
			content: '';
		}
	}
}
/* end wc.ui.listLayout.scss */
