// ============================================================
//          Matrix                                  
// ------------------------------------------------------------*/

+route(style,base)

	// Create a grid of items out of a single list, e.g.:

	//  <ul class="matrix  three-cols">
	//      <li class=all-cols>Lorem</li>
	//      <li>Ipsum <a href=#>dolor</a></li>
	//      <li><a href=# class=matrix__link>Sit</a></li>
	//      <li>Amet</li>
	//      <li class=all-cols>Consectetuer</li>
	//  </ul>
	.matrix
		list-style: none
		margin-left: 0
		border-top-width: 1px
		+cf

		> li
			border-bottom-width: 1px
			padding: $spacing-half-allsides + px
			float: left
			border-right-width: 1px
			@if $activate-box-sizing == true
				+box-sizing(border-box)


	.matrix--link
		display: block
		padding: $spacing-half-allsides + px
		margin: -$spacing-half-allsides + px


	// The `.multi-list` object is a lot like the `.matrix` object only without the
	// blocky borders and padding.

	//   <ul class="multi-list  four-cols">
	//       <li>Lorem</li>
	//       <li>Ipsum</li>
	//       <li>Dolor</li>
	//       <li>Sit</li>
	//   </ul>

	.multi-list 
		list-style: none
		margin-left: 0
		+cf

		> li
			float: left

	.matrix, .multi-list
		&.two-cols > li
			width: 50%

		&.three-cols > li
			width: 33.333%

		&.four-cols > li
			width: 25%

		&.five-cols > li
			width: 20%
		
		&.six-cols > li 
			width: 16.666%

		&.seven-cols > li
			width: 14.285%

		&.eight-cols > li 
			width: 12.5%

		&.nine-cols > li
			width: 11.111%

		&.ten-cols > li
			width: 10%

		> .all-cols
			width: 100%