@import '../../index';

/*
 Example:

 <ul class="table-list">
	<li class="table-list-row">
		<div class="table-list-column">
			column 1
		</div>
		<div class="table-list-column table-list-row-selected">
			column 2 is selected
		</div>
	</li>
 </ul>
*/

.table-list
	display: table;
	list-style: none;
	padding: 0;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 0.2em;
	padding: .2em;
	box-sizing: border-box;

.table-list-row
	display: table-row;

.table-list-row:over
	background-color:  $app['palette']['border-thirdary']

.table-list-column
	display: table-cell;

.table-list-row-selected
	background-color:  $app['palette']['border-primary']

.table-list-column.button
	display: inline-flex
	vertical-align: middle;
	float: right

.table-list-column.button .button
	display: inline-block
	float: right

.table-list-column.button > div
	margin: 0 0 0 1em;