@import "variables_table.scss";

//Main Theme Variables
$backgroundColor: $background !default; //background color of tabulator
$textSize:14px !default; //table text size

//header theming
$headerBackgroundColor:$headerBackground !default; //border to tabulator
$headerTextColor:$headerColor !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
$rowBorderColor:#ddd !default; //table border color
$rowTextColor:#333 !default; //table text color

$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

@import "../../tabulator.scss";

.tabulator{
	width: 100%;

	margin: $margin;
	border: $border;
	box-shadow: $boxShadow;
	border-radius: $borderRadius;
	color: $color;

	.tabulator-header{
		border-right:none;
		border-bottom: $headerBorder;
		background-color: $headerBackgroundColor;

		box-shadow: $headerBoxShadow;

		color: $headerTextColor;
		font-style: $headerFontStyle;
		font-weight: $headerFontWeight;
		text-transform: $headerTextTransform;

		.tabulator-col{
			border-right: none;
			background-color: $headerBackgroundColor;

			.tabulator-col-content{
				padding: $headerVerticalPadding $headerHorizontalPadding;
			}
		}
	}

	.tabulator-tableholder{
		.tabulator-table{
			background-color:transparent;
			.tabulator-row{
				&.tabulator-calcs{
					background:darken($background, 5%) !important;

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

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

	.tabulator-footer{
		padding: $footerVerticalPadding $footerHorizontalPadding;

		border-top: $footerBorder;
		box-shadow: $footerBoxShadow;

		background: $footerBackground;

		text-align:right;
		color: $footerColor;

		font-style: $footerFontStyle;
		font-weight: $footerFontWeight;
		text-transform: $footerTextTransform;

		.tabulator-calcs-holder{
			margin:(-$footerVerticalPadding) (-$footerHorizontalPadding) $footerVerticalPadding (-$footerHorizontalPadding);

			background:lighten($footerBackground, 5%) !important;

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

			&:only-child{
				margin-bottom:-$footerVerticalPadding;
				border-bottom:none;
			}
		}

		.tabulator-spreadsheet-tabs{
			margin-top: calc( -0.78571em - 5px);
			
			.tabulator-spreadsheet-tab{
				&.tabulator-spreadsheet-tab-active{
					color:$footerActiveColor;
				}
			}
		}
	}

	.tabulator-tableholder{
		.tabulator-table{
			.tabulator-row{
				&.positive, .tabulator-cell.positive{
					box-shadow: $positiveBoxShadow;
					background: $positiveBackgroundColor !important;
					color: $positiveColor !important;

					@media (hover:hover) and (pointer:fine){
						&:hover{
							background: $positiveBackgroundHover !important;
							color: $positiveColorHover !important;
						}
					}
				}

				&.negative, .tabulator-cell.negative{
					box-shadow: $negativeBoxShadow;
					background: $negativeBackgroundColor !important;
					color: $negativeColor !important;

					@media (hover:hover) and (pointer:fine){
						&:hover{
							background: $negativeBackgroundHover !important;
							color: $negativeColorHover !important;
						}
					}
				}

				&.error, .tabulator-cell.error{
					box-shadow: $errorBoxShadow;
					background: $errorBackgroundColor !important;
					color: $errorColor !important;

					@media (hover:hover) and (pointer:fine){
						&:hover{
							background: $errorBackgroundHover !important;
							color: $errorColorHover !important;
						}
					}
				}

				&.warning, .tabulator-cell.warning{
					box-shadow: $warningBoxShadow;
					background: $warningBackgroundColor !important;
					color: $warningColor !important;

					@media (hover:hover) and (pointer:fine){
						&:hover{
							background: $warningBackgroundHover !important;
							color: $warningColorHover !important;
						}
					}
				}

				&.active, .tabulator-cell.active{
					box-shadow: $activeBoxShadow;
					background: $activeBackgroundColor !important;
					color: $activeColor !important;

					@media (hover:hover) and (pointer:fine){
						&:hover{
							background: $positiveBackgroundHover !important;
							color: $positiveColorHover !important;
						}
					}
				}

				&.active, .tabulator-cell.active{
					pointer-events: none;
					color: $disabledTextColor;
				}

				@media (hover:hover) and (pointer:fine){
					&.disabled:hover{
						pointer-events: none;
						color: $disabledTextColor;
					}
				}
			}
		}
	}


	&.inverted{

		background: $invertedBackground;
		color: $invertedCellColor;
		border: $invertedBorder;

		.tabulator-header{
			background-color: $invertedHeaderBackground;
			border-color: $invertedHeaderBorderColor !important;
			color: $invertedHeaderColor;

			.tabulator-col{
				border-color: $invertedCellBorderColor !important;
			}
		}

		.tabulator-tableholder{
			.tabulator-table{
				.tabulator-row{
					color: $invertedCellColor;
					border: $invertedBorder;

					.tabulator-cell{
						border-color: $invertedCellBorderColor !important;
					}
				}
			}
		}

		.tabulator-footer{
			background: $definitionPageBackground;
		}
	}

	&.striped{
		.tabulator-row{
			&:nth-child(even){
				background-color: $basicTableStripedBackground;
			}
		}
	}

	&.celled{
		border:1px solid $borderColor;

		.tabulator-header{
			.tabulator-col{
				border-right:$cellBorder;
			}
		}

		.tabulator-tableholder{
			.tabulator-table{
				.tabulator-row{
					.tabulator-cell{
						border-right:$cellBorder;
					}
				}
			}
		}

	}


	&[class*="single line"]{
		.tabulator-tableholder{
			.tabulator-table{
				.tabulator-row{
					.tabulator-cell{
						border-right:none;
					}
				}
			}
		}
	}

	//coloured table varients
	/* Red */
	&.red {
		border-top: $coloredBorderSize solid $red;
	}
	&.inverted.red {
		background-color: $red !important;
		color: $white !important;
	}

	/* Orange */
	&.orange {
		border-top: $coloredBorderSize solid $orange;
	}
	&.inverted.orange {
		background-color: $orange !important;
		color: $white !important;
	}

	/* Yellow */
	&.yellow {
		border-top: $coloredBorderSize solid $yellow;
	}
	&.inverted.yellow {
		background-color: $yellow !important;
		color: $white !important;
	}

	/* Olive */
	&.olive {
		border-top: $coloredBorderSize solid $olive;
	}
	&.inverted.olive {
		background-color: $olive !important;
		color: $white !important;
	}

	/* Green */
	&.green {
		border-top: $coloredBorderSize solid $green;
	}
	&.inverted.green {
		background-color: $green !important;
		color: $white !important;
	}

	/* Teal */
	&.teal {
		border-top: $coloredBorderSize solid $teal;
	}
	&.inverted.teal {
		background-color: $teal !important;
		color: $white !important;
	}

	/* Blue */
	&.blue {
		border-top: $coloredBorderSize solid $blue;
	}
	&.inverted.blue {
		background-color: $blue !important;
		color: $white !important;
	}

	/* Violet */
	&.violet {
		border-top: $coloredBorderSize solid $violet;
	}
	&.inverted.violet {
		background-color: $violet !important;
		color: $white !important;
	}

	/* Purple */
	&.purple {
		border-top: $coloredBorderSize solid $purple;
	}
	&.inverted.purple {
		background-color: $purple !important;
		color: $white !important;
	}

	/* Pink */
	&.pink {
		border-top: $coloredBorderSize solid $pink;
	}
	&.inverted.pink {
		background-color: $pink !important;
		color: $white !important;
	}

	/* Brown */
	&.brown {
		border-top: $coloredBorderSize solid $brown;
	}
	&.inverted.brown {
		background-color: $brown !important;
		color: $white !important;
	}

	/* Grey */
	&.grey {
		border-top: $coloredBorderSize solid $grey;
	}
	&.inverted.grey {
		background-color: $grey !important;
		color: $white !important;
	}

	/* Black */
	&.black {
		border-top: $coloredBorderSize solid $black;
	}
	&.inverted.black {
		background-color: $black !important;
		color: $white !important;
	}

	&.padded{
		.tabulator-header{
			.tabulator-col{
				.tabulator-col-content{
					padding: $paddedVerticalPadding $paddedHorizontalPadding;

					.tabulator-arrow{
						top:20px;
					}
				}
			}
		}
		.tabulator-tableholder{
			.tabulator-table{
				.tabulator-row{
					.tabulator-cell{
						padding: $paddedVerticalPadding $paddedHorizontalPadding;
					}
				}
			}
		}

		&.very{
			.tabulator-header{
				.tabulator-col{
					.tabulator-col-content{
						padding: $veryPaddedVerticalPadding $veryPaddedHorizontalPadding;

						.tabulator-arrow{
							top:26px;
						}
					}
				}
			}
			.tabulator-tableholder{
				.tabulator-table{
					.tabulator-row{
						.tabulator-cell{
							padding: $veryPaddedVerticalPadding $veryPaddedHorizontalPadding;
						}
					}
				}
			}
		}
	}

	&.compact{
		.tabulator-header{
			.tabulator-col{
				.tabulator-col-content{
					padding: $compactVerticalPadding $compactHorizontalPadding;

					.tabulator-arrow{
						top:12px;
					}
				}
			}
		}
		.tabulator-tableholder{
			.tabulator-table{
				.tabulator-row{
					.tabulator-cell{
						padding: $compactVerticalPadding $compactHorizontalPadding;
					}
				}
			}
		}

		&.very{
			.tabulator-header{
				.tabulator-col{
					.tabulator-col-content{
						padding: $veryCompactVerticalPadding $veryCompactHorizontalPadding;

						.tabulator-arrow{
							top:10px;
						}
					}
				}
			}
			.tabulator-tableholder{
				.tabulator-table{
					.tabulator-row{
						.tabulator-cell{
							padding: $veryCompactVerticalPadding $veryCompactHorizontalPadding;
						}
					}
				}
			}
		}
	}
}

.tabulator-row{
	border-bottom: $rowBorder;

	&.tabulator-row-even{
		background-color: $rowBackgroundColor;
	}

	@media (hover:hover) and (pointer:fine){
		&.tabulator-selectable:hover{
			box-shadow: $activeBoxShadow;
			background: $activeBackgroundColor !important;
			color: $activeColor !important;
		}
	}

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

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

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

	.tabulator-cell{
		padding: $cellVerticalPadding $cellHorizontalPadding;
		border-right:none;
		vertical-align:middle;

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

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

		.tabulator-responsive-collapse-toggle{
			color:#fff;
		}
	}

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

.tabulator-menu{
	background:$backgroundColor;

	.tabulator-menu-item{
		@media (hover:hover) and (pointer:fine){
			&:not(.tabulator-menu-item-disabled):hover{
				background: $headerBackgroundColor;
			}
		}
	}
}

.tabulator-edit-select-list{
	background:$backgroundColor;

	.tabulator-edit-select-list-item{
		&.active{
			color:$backgroundColor;

			&.focused{
				outline:1px solid rgba($backgroundColor, .5);
			}
		}

		@media (hover:hover) and (pointer:fine){
			&:hover{
				color:$backgroundColor;
			}
		}
	}

	.tabulator-edit-select-list-notice{
		color:inherit;
	}
}

.tabulator-print-table{
	.tabulator-print-table-group{
		background:#fafafa;

		span{
			color:#666;
		}
	}
}