@import "../variables";
@import "../mixins";

.ReactTable {
	border: 1px solid rgba(0,0,0,0.1);
	
	.rt-thead {
		&.-headerGroups {
			background: rgba(0,0,0,.03);
			border-bottom: 1px solid rgba(0,0,0,0.05);
		}

		&.-filters {
			border-bottom: 1px solid rgba(0,0,0,0.05);

			input,
			select {
				@include input-select-style;
			}

			.rt-th {
				border-right: 1px solid rgba(0,0,0,0.02);
			}
		}

		&.-header {
			box-shadow: 0 2px 15px 0 rgba(0,0,0,0.15);
		}

		.rt-tr {
			text-align: center;
		}

		.rt-th,
		.rt-td {
			padding: 5px 5px;
			border-right: 1px solid rgba(0,0,0,0.05);
			box-shadow: inset 0 0 0 0 transparent;

			&.-sort-asc {
				box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.6);
			}

			&.-sort-desc {
				box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.6);
			}
		}

		.rt-header-pivot {
			border-right-color: #f7f7f7;
		}

		.rt-header-pivot:after,
		.rt-header-pivot:before {
			border: solid transparent;
		}

		.rt-header-pivot:after {
			border-color: rgba(255,255,255,0);
			border-left-color: #FFF;
			border-width: 8px;
			margin-top: -8px;
		}

		.rt-header-pivot:before {
			border-color: rgba(102,102,102,0);
			border-left-color: #f7f7f7;
			border-width: 10px;
			margin-top: -10px;
		}
	}

	.rt-tbody {
		.rt-tr-group {
			border-bottom: solid 1px rgba(0,0,0,0.05);
		}

		.rt-td {
			border-right: 1px solid rgba(0,0,0,0.02);
		}
	}

	.rt-expander {
		color: transparent;

		&:after {
			border-left: ($expandSize * .72) solid transparent;
			border-right: ($expandSize * .72) solid transparent;
			border-top: $expandSize solid rgba(0,0,0, .8);

		}
	}

	.rt-tfoot {
		box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);

		.rt-td {
			border-right: 1px solid rgba(0,0,0,0.05);
		}
	}

	&.-striped {
		.rt-tr.-odd {
			background: rgba(0,0,0,0.03);
		}
	}

	&.-highlight {
		.rt-tbody {
			.rt-tr:not(.-padRow):hover {
				background: rgba(0,0,0,0.05);
			}
		}
	}

	.-pagination {
		padding: 3px;
		box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
		border-top: 2px solid rgba(0,0,0,0.1);

		input,
		select {
			@include input-select-style;
		}

		.-btn {
			border: none;
			border-radius: 3px;
			padding: 6px;
			font-size: 1em;
			color: rgba(0,0,0,0.6);
			background: rgba(0,0,0,0.1);

			&:not([disabled]):hover {
				background: rgba(0,0,0,0.3);
				color: white;
			}
		}

		.-previous,
		.-next {
			text-align: center;
		}

		.-center {
			text-align: center;
		}
	}

	.rt-noData {
		background: rgba(255,255,255,0.8);
		padding: 20px;
		color: rgba(0,0,0, .5);
	}

	.-loading {
		background: rgba(255,255,255,0.8);

		> div {
			font-size: 15px;
			color: rgba(0,0,0,0.6);
			transition: all .3s $easeOutQuad;
		}
	}
}

.wppt {
	&.striped {
		.rt-tr.-odd {
			background: rgba(0,0,0,.03);
		}
	}
}