$primary: #3759D7 !default; //the base text color from which the rest of the theme derives

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

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

//column header arrows
$sortArrowActive: $primary !default;
$sortArrowInactive: lighten($primary, 30%) !default;

//row theming
$rowBackgroundColor:#f3f3f3 !default; //table row background color
$rowAltBackgroundColor:#fff !default; //table row background color
$rowBorderColor:#fff !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:$primary !default; //footer text color
$footerBorderColor:#aaa !default; //footer border color
$footerSeparatorColor:#999 !default; //footer bottom separator color
$footerActiveColor:$primary !default; //footer bottom active text color

$handleWidth:10px !default; //width of the row handle
$handleColor: $primary !default; //color for odd numbered rows
$handleColorAlt: lighten($primary, 10%) !default; //color for even numbered rows

//range selection
$rangeBorderColor: #{darken($primary, 10%)} !default; //range border color
$rangeHandleColor: $rangeBorderColor !default; //range handle color
$rangeHeaderSelectedBackground: $rangeBorderColor !default; //header background color when selected
$rangeHeaderHighlightBackground: $primary !default; //header background color when highlighted
$rangeHeaderTextHighlightBackground: #fff !default; //header text color when highlighted



@import "../tabulator.scss";

.tabulator{

	.tabulator-header{
		border-bottom:3px solid $headerSeparatorColor;
		margin-bottom:4px;
		padding-left:$handleWidth;

		font-size: 1.1em;

		.tabulator-col{
			border-right:2px solid $headerBorderColor;
			background-color: $headerBackgroundColor;

			&:nth-child(1) {
				padding-left: $handleWidth;
			}

			.tabulator-col-content{
				.tabulator-col-title{
					.tabulator-title-editor{
						border:1px solid $primary;

						font-size: 1em;
						color: $primary;
					}
				}
			}

			&.tabulator-col-group{
				.tabulator-col-group-cols{
					border-top:2px solid $headerSeparatorColor;
				}
			}
		}

		.tabulator-frozen{
			&.tabulator-frozen-left{
				padding-left: $handleWidth;
			}
		}

		.tabulator-calcs-holder{
			border-top:2px solid $headerSeparatorColor !important;

			.tabulator-row{
				padding-left: 0 !important;

				.tabulator-cell{
					background:none;
				}
			}
		}
	}

	.tabulator-tableholder{
		.tabulator-placeholder{
			span{
				color:$primary;
			}
		}

		.tabulator-table{
			.tabulator-row{
				&.tabulator-calcs{
					&.tabulator-calcs-top{
						border-bottom:2px solid $headerSeparatorColor;
					}

					&.tabulator-calcs-bottom{
						border-top:2px solid $headerSeparatorColor;
					}
				}
			}
		}
	}

	.tabulator-footer{
		.tabulator-calcs-holder{
			border-top:3px solid $headerSeparatorColor !important;
			border-bottom:2px solid $headerSeparatorColor !important;

			.tabulator-row{
				background:lighten($footerBackgroundColor, 5%) !important;

				.tabulator-cell{
					background:none;

					&:first-child{
						border-left: $handleWidth solid transparent;
					}
				}
			}

			&:only-child{
				border-bottom:none !important;
			}
		}

		.tabulator-spreadsheet-tabs{
			.tabulator-spreadsheet-tab{
				border-color:$footerBorderColor;
				
				color:$rowTextColor;
				font-weight: normal;
				
				&.tabulator-spreadsheet-tab-active{
					font-weight: bold;
					color:$footerTextColor;
				}
			}
		}
	}
}


.tabulator-row{
	margin-bottom: 2px;

	.tabulator-cell{
		&:first-child{
			border-left: $handleWidth solid $handleColor;
		}

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


	&:nth-child(even){
		background-color: $handleColorAlt;

		.tabulator-cell{
			background-color: $rowAltBackgroundColor;

			&:first-child{
				border-left: $handleWidth solid $handleColorAlt;
			}

			&.tabulator-row-header{
				background-color: $handleColorAlt;
			}
		}
	}

	@media (hover:hover) and (pointer:fine){
		&.tabulator-selectable:hover{
			cursor: pointer;

			.tabulator-cell{
				background-color:$rowHoverBackground;
			}
		}
	}

	&.tabulator-selected{
		.tabulator-cell{
			background-color:$rowSelectedBackground;
		}
	}

	@media (hover:hover) and (pointer:fine){
		&.tabulator-selected:hover{
			.tabulator-cell{
				background-color:$rowSelectedBackgroundHover;
				cursor: pointer;
			}
		}
	}

	&.tabulator-moving{
		pointer-events: none !important;
	}

	.tabulator-cell{
		padding:6px 4px;
		border-right:2px solid $rowBorderColor;

		background-color: $rowBackgroundColor;
	}

	&.tabulator-group{
		min-width: 100%;

		margin-bottom: 2px;

		border-bottom:2px solid $primary;
		border-top:2px solid $primary;
		border-right:none;

		background:lighten($primary, 20%);

		span{
			color:$primary;
		}
	}
}

.tabulator-toggle{
	&.tabulator-toggle-on{
		background:$primary;
	}
}

.tabulator-edit-select-list{
	border:1px solid $editBoxColor;
}

.tabulator-print-table{

	.tabulator-print-table-group{
		border-bottom:2px solid $primary;
		border-top:2px solid $primary;
		background:lighten($primary, 20%);
		margin-bottom: 2px;

		span{
			color:$primary;
		}
	}
}