//Main Theme Variables
$backgroundColor: #fff !default; //background color of tabulator
$borderColor:#222 !default; //border to tabulator
$textSize:14px !default; //table text size

//header themeing
$headerBackgroundColor:#222 !default; //border to tabulator
$headerTextColor:#fff !default; //header text colour
$headerBorderColor:#aaa !default;  //header border color
$headerSeperatorColor:#3FB449 !default; //header bottom seperator color
$headerMargin:4px !default; //padding round header

//column header arrows
$sortArrowActive: #3FB449 !default;
$sortArrowInactive: #bbb !default;

//row themeing
$rowBackgroundColor:#fff !default; //table row background color
$rowAltBackgroundColor:#EFEFEF !default; //table row background color
$rowBorderColor:#aaa !default; //table border color
$rowTextColor:#333 !default; //table text color
$rowHoverBackground:#bbb !default; //row background color on hover

$rowSelectedBackground: #9ABCEA !default; //row background color when selected
$rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered

$editBoxColor:#1D68CD !default; //border color for edit boxes
$errorColor:#dd0000 !default; //error indication

//footer themeing
$footerBackgroundColor:#222 !default; //border to tabulator
$footerTextColor:#222 !default; //footer text colour
$footerBorderColor:#aaa !default; //footer border color
$footerSeperatorColor:#3FB449 !default; //footer bottom seperator color
$footerActiveColor:$footerSeperatorColor !default; //footer bottom active text color

@import "../tabulator.scss";

.tabulator{
	border:none;
	border-bottom: 5px solid $borderColor;

	&[tabulator-layout="fitColumns"]{
		.tabulator-row{
			.tabulator-cell{
				&:last-of-type{
					border-right: none;
				}
			}
		}
	}

	.tabulator-header{
		border-bottom:3px solid $headerSeperatorColor;

		.tabulator-col{
			background-color: $headerBackgroundColor;

			.tabulator-col-content{
				padding:8px;
			}
		}

		.tabulator-calcs-holder{
			background:lighten($headerBackgroundColor, 10%) !important;

			.tabulator-row{
				background:lighten($headerBackgroundColor, 10%) !important;
			}

			border-top:1px solid $rowBorderColor;
			border-bottom:none;
		}
	}

	.tabulator-tableholder{
		.tabulator-placeholder{
			span{
				color:$headerSeperatorColor;
			}
		}
		.tabulator-table{
			.tabulator-row{
				&.tabulator-calcs{
					font-weight: bold;
					background:lighten($headerBackgroundColor, 15%) !important;
					color:$headerTextColor;
				}

				&.tabulator-calcs-top{
					border-bottom:none;
				}

				&.tabulator-calcs-bottom{
					border-top:none;
				}
			}
		}
	}

	.tabulator-footer{
		padding:5px 10px;
		padding-top:8px;
		border-top:3px solid $footerSeperatorColor;

		.tabulator-calcs-holder{
			margin:-8px -10px 8px -10px;

			background:lighten($footerBackgroundColor, 10%) !important;

			.tabulator-row{
				background:lighten($footerBackgroundColor, 10%) !important;
				color:$headerTextColor !important;
			}

			border-top:none;
			border-bottom:1px solid $rowBorderColor;
		}

		.tabulator-paginator{
			label{
				color:#fff;
			}
		}

		.tabulator-page-counter{
			color:#fff;
		}

		.tabulator-page{
			background-color:#fff;

			color: $footerTextColor;
			font-family:inherit;
			font-weight:inherit;
			font-size:inherit;
		}
	}
}

.tabulator-row{
	.tabulator-cell{
		padding:6px;

		&.tabulator-row-handle{
			.tabulator-row-handle-box{
				.tabulator-row-handle-bar{
					background:$sortArrowActive;
				}
			}
		}
	}

	&.tabulator-group{
		border-right:1px solid $rowBorderColor;
		border-top:1px solid #000;
		border-bottom:2px solid $headerSeperatorColor;
		background:$headerBackgroundColor;
		color:$headerTextColor;

		&:hover{
			background-color:darken($headerBackgroundColor, 10%);
		}

		span{
			color:$headerSeperatorColor;
		}
	}
}

.tabulator-print-table{
	border-collapse: collapse;

	.tabulator-print-table-group{
		border-bottom:2px solid $headerSeperatorColor;
		background:$headerBackgroundColor;
		color:$headerTextColor;

		&:hover{
			background-color:darken($headerBackgroundColor, 10%);
		}

		span{
			color:$headerSeperatorColor;
		}
	}
}