// -------------------------------------------------------------------
// :: TABLES - #TBD
// -------------------------------------------------------------------

@mixin tableRoot() {
	display: block;
	border-spacing: 0;
	table-layout: fixed;
	margin: 0;
}

table {
	@include tableRoot();

	overflow-x: auto;
	border-collapse: collapse;
	width: fit-content;
	max-width: 100%;
	//background: rgba($black, 0.01);
	//border-bottom: 1px solid $border-color;
}

// Dropdown menus and checkboxes in tables
// shouldn't have additional margin values

table .input,
table [class*='input__'] {
	margin: 0;
}

table select {
	font-weight: 400;
	border-color: transparent !important;
}

table select + [class*='icon'] {
	padding-top: 0.15em;
}


// -------------------------------------------------------------------
// :: TYPOGRAPHIC TABLE SCALE
// -------------------------------------------------------------------
// Table padding should follow a typographic scale
// - default height: 52px @ $base-font-size of 16px
// - default height: 50px @ $base-font-size of 15px

th:not(.has-no-padding),
td:not(.has-no-padding) {
	padding: rem(13px) rem(21px);
}


// -------------------------------------------------------------------
// :: TABLE HEADERS
// -------------------------------------------------------------------

@mixin tableHeader() {
	&:not(.is-empty) {
		font-size: rem(15px);
		font-weight: 700;
		text-align: left;
		text-transform: uppercase;
		background: transparent;
		font-family: $font-family-bold;
		color: darken($medium, 5%);
		letter-spacing: rem(1px);

		.input select{
			background-color: transparent;
			border: none;
			color: $light-extra;
			box-shadow: none;

			&.has-no-value{
				color: $light-extra;
			}

			+ [class*='icon'],
			&.has-no-value + [class*='icon']{
				color: $light-extra;
				font-size: 1.5em;
				margin: 0.13rem 0.5rem;
			}
		}
	}
}

th {
	@include tableHeader();
}

thead tr {
	background: transparent !important;
}


// -------------------------------------------------------------------
// :: TABLE DATA
// -------------------------------------------------------------------


@mixin tableRow() {
	border-bottom: 1px solid $medium;

	&:nth-child(odd) {
		background: $light;
	}
}

@mixin tableCell() {
	vertical-align: top;
	position: relative;

	// Add a transparant border to
	// enforce the default height as
	// set in the typographic scale

	padding: rem(13px) 2rem;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;

	.a-input,
	.a-toggle{

		label{
			width: 40%;
			float: left;
			//padding: 0.6rem 0 0.4rem;
		}

		div{
			width: 59%;
			float: right;
		}

		&.text-right input{
			text-align: right;
		}

		&.text-primary-color input{
			color: $primary-color;
		}
	}

	a {
		display: block;
		color: $dark-extra;
		text-decoration: none;
		margin: -0.8125rem -1.3125rem;
		padding: 0.8125rem 1.3125rem;

		&:hover {
			opacity: 0.7;
		}
	}
}

tr {
	@include tableRow();
}

td {
	@include tableCell();
}



.a-table {
	@include tableRoot();
	display: table;
	width: 100%;
	margin: 0 0 rem($grid-gutter-width);

	@include FLOW-to($tablet) {
		border-top: 1px solid $border-color;
	}

	.a-table__header {
		@include tableHeader();
		@include FLOW-to($tablet) {
			display: none;
		}
		width: 100%;

		.a-table__row {
			background: transparent !important;
		}

		.a-table__th {
			overflow: visible;
		}
	}

	.a-table__cell,
	.a-table__th {
		@include tableCell();
		display: inline-block !important;
		font-size: 1rem; //rem($font-size);

		@include FLOW-to($tablet) {
			display: block !important;
			clear: both;
		}
	}

	.a-table__row {
		@include tableRow();
		font-size: 0;
	}

	.a-table__cell_th {
		@include FLOW-at($tablet) {
			display: none;
		}
	}

}

// sizing classes

@mixin percentageWidth($width) {
	.w-#{$width*5} {
		display: block !important;
		clear: both;
		position: relative;

		@include FLOW-at($tablet){
			width: #{$width*5% - 0.5%};
			display: table-cell !important;
			vertical-align: middle !important;
		}
	}
}

@for $i from 1 through 20 {
	@include percentageWidth($i);
}