/* Tables */

@import 'natuive-setup';

table {

	width: 100%;
	overflow: auto;
	border-collapse: collapse;
	-webkit-overflow-scrolling: touch;
	display: block;
	margin: $line-height-em 0;

	}

	table::-webkit-scrollbar {
	
	    display: none;
	
	}
	
	td, th {
		
		padding: $line-height-em $line-height-em/2;
// 		padding: var(--line-height-em) calc(var(--line-height-em)/2);
		vertical-align: middle;

	}

	th, thead td {

		color: #fff;
		font-weight: bold;
		padding-bottom: $line-height-em;
// 		padding-bottom: var(--line-height-em);
		font-size: 1.1em;
		background: rgba(0,0,0,.1);
		text-align: left;

	}

	tr:nth-child(2n+1) {

		background: rgba(0, 0, 0, .1);

	}

	tr, td, th, iframe {
		
		border: none;
		
	}
	
	div.table {
		
		overflow-x: auto;
	    scrollbar-3dlight-color: grey;
	    scrollbar-arrow-color: grey;
	    scrollbar-base-color: transparent;
	    scrollbar-darkshadow-color: grey;
	    scrollbar-face-color: transparent;
	    scrollbar-highlight-color: transparent;
	    scrollbar-shadow-color: transparent;
	    -webkit-overflow-scrolling: touch;
	
	}
	
	div.table table {
		
		display: table;

	}
	
/*
	table :not(thead) tr:hover td { // IE9 bug: hover on overflowing table makes its .table container taller
		
		background-color: #ddd;

	}
*/

	td[data-sort] {
		
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;

	}
	
	@media screen and (min-width: 1px) { // IE9+
	
		td[data-sort] {
			
			cursor: pointer;
	
		}
		
		td[data-sort]:after {
			
			content: '⇳';
			margin-left: .5em;
			
		}
	
	}

@media screen and (max-width: $screen-narrow) {

	table {
		
		display: block;
		overflow: scroll;
		table-layout: auto;
		
	}

		table td {
			
			word-break: normal;
		
		}

}