/* wc.ui.listLayout.scss */
@import 'mixins-common';

.wc-listlayout {
	@include tight-box;

	&.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 {
			> * {
				display: inline-block; // otherwise the marker wraps
				vertical-align: middle;
				width: calc(100% - #{$hgap-normal} - 0.5em);
			}

			&:before {
				content: '|';
				display: inline-block;
				margin-right: $hgap-normal;
				text-align: right;
				width: 0.5em;
			}
		}

		&.flat > li {
			&:before {
				display: inline;
			}

			&: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;
			}
		}
	}

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

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

	&.none {
		margin-left: 0;
	}

	&.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: '';
		}
	}
}
