@use "sass:color";

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

//header theming
$headerBackgroundColor:#fff !default; //border to tabulator
$headerTextColor:#555 !default; //header text color
$headerBorderColor:#ddd !default;  //header border color
$headerSeparatorColor:#999 !default; //header bottom separator color
$headerMargin:4px !default; //padding round header

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

//row theming
$rowBackgroundColor:#fff !default; //table row background color
$rowAltBackgroundColor:#fff !default; //table row background color
$rowBorderColor:#ddd !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 theming
$footerBackgroundColor:#fff !default; //border to tabulator
$footerTextColor:#555 !default; //footer text color
$footerBorderColor:#aaa !default; //footer border color
$footerSeparatorColor:#999 !default; //footer bottom separator color
$footerActiveColor:#d00 !default; //footer bottom active text color

@use "../tabulator.scss" with (
	$backgroundColor: $backgroundColor,
	$borderColor: $borderColor,
	$textSize: $textSize,
	$headerBackgroundColor: $headerBackgroundColor,
	$headerTextColor: $headerTextColor,
	$headerBorderColor: $headerBorderColor,
	$headerSeparatorColor: $headerSeparatorColor,
	$headerMargin: $headerMargin,
	$sortArrowActive: $sortArrowActive,
	$sortArrowInactive: $sortArrowInactive,
	$rowBackgroundColor: $rowBackgroundColor,
	$rowAltBackgroundColor: $rowAltBackgroundColor,
	$rowBorderColor: $rowBorderColor,
	$rowTextColor: $rowTextColor,
	$rowHoverBackground: $rowHoverBackground,
	$rowSelectedBackground: $rowSelectedBackground,
	$rowSelectedBackgroundHover: $rowSelectedBackgroundHover,
	$editBoxColor: $editBoxColor,
	$errorColor: $errorColor,
	$footerBackgroundColor: $footerBackgroundColor,
	$footerTextColor: $footerTextColor,
	$footerBorderColor: $footerBorderColor,
	$footerSeparatorColor: $footerSeparatorColor,
	$footerActiveColor: $footerActiveColor
);

.tabulator{
	border:none;
	background-color: $backgroundColor;

	.tabulator-header{
		.tabulator-calcs-holder{
			background:color.adjust($headerBackgroundColor, $lightness: -5%) !important;

			border-bottom:1px solid $headerSeparatorColor;

			.tabulator-row{
				background:color.adjust($headerBackgroundColor, $lightness: -5%) !important;
			}
		}
	}

	.tabulator-tableholder{
		.tabulator-placeholder{
			span{
				color:#000;
			}
		}
	}

	.tabulator-footer{
		.tabulator-calcs-holder{
			background:color.adjust($footerBackgroundColor, $lightness: -5%) !important;

			border-bottom:1px solid $footerBackgroundColor;

			.tabulator-row{
				background:color.adjust($footerBackgroundColor, $lightness: -5%) !important;
			}
		}

		.tabulator-spreadsheet-tabs{
			.tabulator-spreadsheet-tab{
				font-weight: normal;
				
				&.tabulator-spreadsheet-tab-active{
					color:$footerActiveColor;
					font-weight: bold;
				}
			}
		}
	}
}

.tabulator-row{
	border-bottom:1px solid $rowBorderColor;

	.tabulator-cell{
		&:last-of-type{
			border-right: none;
		}

		&.tabulator-row-header{
			border-bottom:none;
		}
	}

	&.tabulator-group{
		span{
			color:#666;
		}
	}
}

.tabulator-print-table{
	.tabulator-print-table-group{
		span{
			margin-left:10px;
			color:#666;
		}
	}
}

