//
// Tables
// --------------------------------------------------
table
	max-width: 100%

th
	text-align: left

// Baseline styles
.table
	width: 100%
	margin-bottom: $line-height-computed

	// Cells
	> thead, > tbody, > tfoot
		> tr
			> th, > td
				theme-prop('border-top-color', 'bg-subtle')
				padding: $table-cell-padding
				line-height: $line-height-base
				vertical-align: top
				border-top-width: $border-width-small
				border-top-style: solid

	// Bottom align for column headings
	> thead > tr > th
		theme-prop('border-bottom-color', 'bg-subtle')
		vertical-align: bottom
		border-bottom-width: $border-width-large
		border-bottom-style: solid

	// Remove top border from thead by default
	> caption + thead, > colgroup + thead, > thead:first-child
		> tr:first-child
			> th, > td
				border-top: 0

	// Account for multiple tbody instances
	> tbody + tbody
		theme-prop('border-top-color', 'bg-subtle')
		border-top-width: $border-width-large
		border-top-style: solid

// Condensed table w/ half padding
.table-condensed
	> thead, > tbody, > tfoot
		> tr
			> th, > td
				padding: $table-condensed-cell-padding

// Bordered version
//
// Add borders all around the table and between all the columns.
.table-bordered
	theme-prop('border-color', 'bg-subtle')
	border-width: $border-width-base
	border-style: solid

	> thead, > tbody, > tfoot
		> tr
			> th, > td
				theme-prop('border-color', 'bg-subtle')
				border-width: $border-width-small
				border-style: solid

	> thead > tr
		> th, > td
			border-bottom-width: $border-width-large

// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped
	> tbody > tr:nth-child(odd)
		> td, > th
			change-bg('bg-offset')

// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover
	> tbody > tr:hover
		> td, > th
			change-bg('bg-offset')

// Table cell sizing
//
// Reset default table behavior
table col[class*='col-']
	position: static // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
	float: none
	display: table-column

table
	td, th
		&[class*='col-']
			position: static // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
			float: none
			display: table-cell

// Tabel controls
.table-controls
	@media $media-lg
		visibility: hidden

		tr:hover &
			visibility: visible

// Primary link is how you click on things in a table.
.table-primary-link
	tr:hover &
		text-decoration: underline

// Draggable table handles.
td, th
	&.drag-handle
		change-bg('gray')
		vertical-align: middle !important
		cursor: move
		user-select: none

		> .jolticon
			cursor: inherit
			color: $white

// Responsive tables
//
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
@media $media-max-sm
	.table-responsive
		theme-prop('border-color', 'bg-subtle')
		border-width: $border-width-base
		border-style: solid
		width: 100%
		margin-bottom: ($line-height-computed * 0.75)
		overflow-y: hidden
		overflow-x: scroll
		-ms-overflow-style: -ms-autohiding-scrollbar
		-webkit-overflow-scrolling: touch

		// Tighten up spacing
		> .table
			margin-bottom: 0

			// Ensure the content doesn't wrap
			> thead, > tbody, > tfoot
				> tr
					> th, > td
						white-space: nowrap

		// Special overrides for the bordered tables
		> .table-bordered
			border: 0

			// Nuke the appropriate borders so that the parent can handle them
			> thead, > tbody, > tfoot
				> tr
					> th:first-child, > td:first-child
						border-left: 0

					> th:last-child, > td:last-child
						border-right: 0

			// Only nuke the last row's bottom-border in `tbody` and `tfoot` since
			// chances are there will be only one `tr` in a `thead` and that would
			// remove the border altogether.
			> tbody, > tfoot
				> tr:last-child
					> th, > td
						border-bottom: 0

// Mobile screens are so small that it doesn't make sense to have a fixed table styling on them.
// Let's by default only apply this to sm and up.
@media $media-sm-up
	.table-fixed
		table-layout: fixed
