/*	<ul class="table-list table-list-basic">
		<li class="table-list-row">
				<div class="table-list-column">
					<i class="icon-plus"></i>
					First column
				</div>

				<div class="table-list-column">
					Column A
				</div>

				<div class="table-list-column">
					Column B
				</div>

				<div class="table-list-column">
					Column C
				</div>

				<div class="table-list-column">
					Column D
				</div>

				<div class="table-list-column">
					Last column
				</div>
			</li>
	</ul>
*/
.table-list-bare,
.table-list-basic {
	color: $op-gray-text;
	font-size: 1.25em;
	table-layout: fixed;
}

.table-list-bare .table-list-column,
.table-list-basic .table-list-column {
	background-color:  $app['palette']['bg-primary']
	box-shadow: 0 1px 0 $op-light-gray;
	border-top: 2px solid  $app['palette']['border-primary']
	border-bottom: 2px solid  $app['palette']['border-primary']
	line-height: 1.8em;
	position: relative;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	padding-right: 1em;
	cursor: default;
}

.table-list-bare .table-list-column {
	padding: 0.5em;
}

.table-list-bare .table-list-column > *,
.table-list-basic .table-list-column > * {
	vertical-align: middle;
}

.table-list-basic .table-list-title-col,
.table-list-basic .table-list-column:first-child {
	color: $op-primary;
	font-size: 1.4em;
	border-left: 2px solid $op-white-bg;
}

.table-list-basic .table-list-title-col,
.table-list-basic .table-list-column:first-child > i {
	background-color: $op-gray-border;
	color: $op-white-text;
	font-size: 1.3em;
	padding: 0.2em;
	vertical-align: middle;
}

.table-list-basic .table-list-column:last-child {
	border-right: 2px solid $op-white-bg;
	position: relative;
}

.table-list-basic .table-list-row:hover .table-list-column:first-child > i {
	background-color: $op-primary;
}