// TABLES.LESS
//
// Styles for attractive html <table>s
// --------------------------------------------------------
@import '../variables/colors.less';
@import '../variables/pages.less';
@import '../variables/typography.less';

// Basic structure
// ----------------------------------------------
.o-table {
	background-color: transparent;
	max-width: 100%;
	width: 100%;
}

th {
	text-align: left;
}

.o-table > thead > tr > th,
.o-table > tbody > tr > th,
.o-table > tfoot > tr > th,
.o-table > thead > tr > td,
.o-table > tbody > tr > td,
.o-table > tfoot > tr > td {
	border-top: 1px solid @color-gray-x-light;
	color: @color-gray-medium;
	line-height: @font-line-height-base;
	padding: 8px;
}

.o-table > thead > tr > th {
	border-bottom: 1px solid @color-gray-light;
	vertical-align: bottom;
}

.o-table > caption + thead > tr:first-child > th,
.o-table > colgroup + thead > tr:first-child > th,
.o-table > thead:first-child > tr:first-child > th,
.o-table > caption + thead > tr:first-child > td,
.o-table > colgroup + thead > tr:first-child > td,
.o-table > thead:first-child > tr:first-child > td {
	border-top: 0;
}

.o-table > tbody + tbody {
	border-top: 1px solid @color-gray-light;
}

.o-table .o-table {
	background-color: #fff;
}

// Style modifiers for table cells
// ----------------------------------------------

// Condensed tables have less padding all around.
.o-table.is-condensed > thead > tr > th,
.o-table.is-condensed > tbody > tr > th,
.o-table.is-condensed > tfoot > tr > th,
.o-table.is-condensed > thead > tr > td,
.o-table.is-condensed > tbody > tr > td,
.o-table.is-condensed > tfoot > tr > td {
	padding: 3px;
}

// Tables with touch targets should increase padding on small screens.
.o-table.has-touch-targets > thead > tr > th,
.o-table.has-touch-targets > tbody > tr > th,
.o-table.has-touch-targets > tfoot > tr > th,
.o-table.has-touch-targets > thead > tr > td,
.o-table.has-touch-targets > tbody > tr > td,
.o-table.has-touch-targets > tfoot > tr > td {
	@media (max-width: @grid-breakpoint-sm) {
		padding-bottom: 14px;
		padding-top: 14px;
	}
}

// Bordered tables have an _exterior_ border around them.
.o-table.is-bordered {
	border: 1px solid @color-gray-x-light;
}

.o-table.is-bordered > thead > tr > th,
.o-table.is-bordered > tbody > tr > th,
.o-table.is-bordered > tfoot > tr > th,
.o-table.is-bordered > thead > tr > td,
.o-table.is-bordered > tbody > tr > td,
.o-table.is-bordered > tfoot > tr > td {
	border: 1px solid @color-gray-x-light;
}

.o-table.is-bordered > thead > tr > th,
.o-table.is-bordered > thead > tr > td {
	border-bottom-width: 1px;
}

// Striped tables have a background color on alternating rows.
.o-table.is-striped > tbody > tr:nth-child(odd) > td,
.o-table.is-striped > tbody > tr:nth-child(odd) > th {
	background-color: @color-gray-xxx-light;
}

// Use this class to get a hover effect on rows.
.o-table.has-hoverable-rows > tbody > tr > td,
.o-table.has-hoverable-rows > tbody > tr > th {
	transition: background-color 0.25s;
}

.o-table.has-hoverable-rows > tbody > tr:hover > td,
.o-table.has-hoverable-rows > tbody > tr:hover > th {
	background-color: @color-gray-xxx-light;
	cursor: pointer;
}

// Table row highlighting
//
// (The last one declared here gets priority)
// ----------------------------------------------

// Dimmed
.o-table > thead > tr > td.is-dimmed,
.o-table > tbody > tr > td.is-dimmed,
.o-table > tfoot > tr > td.is-dimmed,
.o-table > thead > tr > th.is-dimmed,
.o-table > tbody > tr > th.is-dimmed,
.o-table > tfoot > tr > th.is-dimmed,
.o-table > thead > tr.is-dimmed > td,
.o-table > tbody > tr.is-dimmed > td,
.o-table > tfoot > tr.is-dimmed > td,
.o-table > thead > tr.is-dimmed > th,
.o-table > tbody > tr.is-dimmed > th,
.o-table > tfoot > tr.is-dimmed > th {
	background-color: #ddd;
}

// Selected
.o-table > thead > tr > td.is-selected,
.o-table > tbody > tr > td.is-selected,
.o-table > tfoot > tr > td.is-selected,
.o-table > thead > tr > th.is-selected,
.o-table > tbody > tr > th.is-selected,
.o-table > tfoot > tr > th.is-selected,
.o-table > thead > tr.is-selected > td,
.o-table > tbody > tr.is-selected > td,
.o-table > tfoot > tr.is-selected > td,
.o-table > thead > tr.is-selected > th,
.o-table > tbody > tr.is-selected > th,
.o-table > tfoot > tr.is-selected > th {
	background-color: @color-info-light;
}

// Danger
.o-table > thead > tr > td.is-dangerous,
.o-table > tbody > tr > td.is-dangerous,
.o-table > tfoot > tr > td.is-dangerous,
.o-table > thead > tr > th.is-dangerous,
.o-table > tbody > tr > th.is-dangerous,
.o-table > tfoot > tr > th.is-dangerous,
.o-table > thead > tr.is-dangerous > td,
.o-table > tbody > tr.is-dangerous > td,
.o-table > tfoot > tr.is-dangerous > td,
.o-table > thead > tr.is-dangerous > th,
.o-table > tbody > tr.is-dangerous > th,
.o-table > tfoot > tr.is-dangerous > th {
	background-color: @color-danger-light;
}

// Table actions column
// ----------------------------------------------
.o-table-actions {
	font-size: 16px;
	text-align: right;

	a {
		color: @color-gray-x-dark;

		&:not(:last-child) {
			margin-right: 15px;
		}
	}
}

.o-table-action-text {
	font-size: 14px;
	padding-left: 8px;
}

// Static width using grid classes
// ----------------------------------------------
table col[class*='col-'] {
	display: table-column;
	float: none;
	position: static;
}

table td[class*='col-'],
table th[class*='col-'] {
	display: table-cell;
	float: none;
	position: static;
}

// Table thumbnail-spinner
// ----------------------------------------------
.o-table-item-thumbnail {
	background-color: #353535;
	height: auto;
	line-height: 50px;
	margin: 5px 10px 5px 0;
	max-height: 50px;
	max-width: 50px;
	min-height: 50px;
	width: 100%;
}

.o-table-item-thumbnail-fixed {
	background-color: #353535;
	font-size: 0;
	height: 50px;
	line-height: 50px;
	text-align: center;
	width: 50px;
}

.o-table-item-thumbnail-fixed--is-inline {
	float: left;
	margin-right: 15px;
}

.o-table-item-thumbnail-fixed__thumbnail {
	max-height: 50px;
	max-width: 50px;
	vertical-align: middle;
}