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

//header theming
$headerBackgroundColor:#222 !default; //border to tabulator
$headerTextColor:#fff !default; //header text color
$headerBorderColor:#aaa !default;  //header border color
$headerSeparatorColor:#3FB449 !default; //header bottom separator color
$headerMargin:4px !default; //padding round header

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

//row theming
$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: #70c28e !default; //row background color when selected
$rowSelectedBackgroundHover: #269b51 !default;//row background color when selected and hovered


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

//footer theming
$footerBackgroundColor:#222 !default; //border to tabulator
$footerTextColor:#222 !default; //footer text color
$footerBorderColor:#aaa !default; //footer border color
$footerSeparatorColor:#3FB449 !default; //footer bottom separator color
$footerActiveColor:$footerSeparatorColor !default; //footer bottom active text color

//range selection
$rangeBorderColor: $rowSelectedBackgroundHover !default; //range border color
$rangeHandleColor: $rangeBorderColor !default; //range handle color
$rangeHeaderSelectedBackground: $rangeBorderColor !default; //header background color when selected
$rangeHeaderSelectedTextColor: #FFFFFF !default; //header text color when selected
$rangeHeaderHighlightBackground: $rowSelectedBackground !default; //header background color when highlighted
$rangeHeaderTextHighlightBackground: #000000 !default; //header text color when highlighted

@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 $headerSeparatorColor;

		.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:$headerSeparatorColor;
			}
		}
		.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 $footerSeparatorColor;

		.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-spreadsheet-tabs{
			margin-top: -13px;
			margin-bottom: -8px;

			.tabulator-spreadsheet-tab{
				padding: 8px;
				margin: 0 2px;

				border-color: $footerActiveColor;
				border-width: 0 2px 2px 2px;
				background-color: #333;

				color: #fff;

				&.tabulator-spreadsheet-tab-active{
					background-color:$footerActiveColor;
					color: #000;
				}
			}
		}

		.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-toggle{
	&.tabulator-toggle-on{
		background:$headerSeparatorColor;
	}
}

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

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

		&.tabulator-row-header{
			color:#fff;
		}
	}

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

		@media (hover:hover) and (pointer:fine){
			&:hover{
				background-color:darken($headerBackgroundColor, 10%);
			}
		}

		span{
			color:$headerSeparatorColor;
		}
	}
}

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

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

		@media (hover:hover) and (pointer:fine){
			&:hover{
				background-color:darken($headerBackgroundColor, 10%);
			}
		}

		span{
			color:$headerSeparatorColor;
		}
	}
}