@use "variables.scss" as *;
@use "sass:color";

// Style conversion file, bulma to tabulator

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

//header theming
$headerBackgroundColor:$table-head-background-color !default; //border to tabulator
$headerTextColor:$table-head-cell-color !default; //header text color
$headerBorderColor:#aaa !default;  //header border color
$headerSeparatorColor:#999 !default; //header bottom separator color
$headerMargin:4px !default; //padding round header

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

//row theming
$rowBackgroundColor:$table-body-background-color !default; //table row background color
$rowAltBackgroundColor:$table-striped-row-even-background-color !default; //table row background color
$rowBorderColor:#aaa !default; //table border color
$rowTextColor:$table-color !default; //table text color
$rowHoverBackground:$table-row-hover-background-color !default; //row background color on hover

$rowSelectedBackground: $table-row-active-background-color !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:$table-foot-background-color !default; //border to tabulator
$footerTextColor:$table-foot-cell-color !default; //footer text color
$footerBorderColor:$grey-lighter !default; //footer border color
// $footerSeparatorColor:#999 !default; //footer bottom separator color
// $footerActiveColor:#d00 !default; //footer bottom active text color

//range selection
$rangeBorderColor: #{color.adjust($rowSelectedBackground, $lightness: -10%)} !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


@use "../../tabulator.scss" with (
	$backgroundColor: $backgroundColor,
	$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,
	$editBoxColor: $editBoxColor,
	$errorColor: $errorColor,
	$footerBackgroundColor: $footerBackgroundColor,
	$footerTextColor: $footerTextColor,
	$footerBorderColor: $footerBorderColor,
	$rangeBorderColor: $rangeBorderColor,
	$rangeHandleColor: $rangeHandleColor,
	$rangeHeaderSelectedBackground: $rangeHeaderSelectedBackground,
	$rangeHeaderSelectedTextColor: $rangeHeaderSelectedTextColor
);

.tabulator{
	border:none;
	
	.tabulator-header{
		border:$table-cell-border;
		border-width:$table-head-cell-border-width;
		
		.tabulator-col{
			border-right:none;
			
			&.tabulator-moving{
				border:none;
			}
			
			.tabulator-col-content{
				padding:$table-cell-padding;
				
				.tabulator-col-sorter{
					right:0px;
				}
			}
			
			.tabulator-header-filter{
				input{
					border:$button-border-width solid $button-border-color;
				}
			}
		}
		
		.tabulator-calcs-holder{
			.tabulator-row{
				.tabulator-cell{
					border-bottom-width:0;
				}
			}
			
			border:$table-cell-border;
			border-width:$table-foot-cell-border-width;
		}
	}
	
	.tabulator-tableholder{
		.tabulator-table{
			.tabulator-row{
				&.tabulator-calcs{
					&.tabulator-calcs-top{
						border:$table-cell-border;
						border-width:$table-head-cell-border-width;
					}
					
					&.tabulator-calcs-bottom{
						border:$table-cell-border;
						border-width:$table-foot-cell-border-width;
					}
					
					.tabulator-cell{
						border-bottom-width:0;
					}
				}
			}
		}
	}
	
	.tabulator-footer{
		padding:$table-cell-padding;
		border:$table-cell-border;
		border-width:$table-foot-cell-border-width;
		
		.tabulator-calcs-holder{
			margin:-5px -10px 10px -10px;
			
			border:$table-cell-border;
			border-width:$table-head-cell-border-width;
			
			.tabulator-row{
				.tabulator-cell{
					border-bottom-width:0;
				}
			}
		}

		.tabulator-spreadsheet-tabs{
			margin-top: calc( -0.5em - 5px);

			.tabulator-spreadsheet-tab{
				// background-color: $spreadsheetActiveTabColor;
				border-color: $button-border-color;
				font-weight: normal;

				&.tabulator-spreadsheet-tab-active{
					// background-color:$pagination-active-bg;
					border-color:$button-active-border-color;
					color:$button-active-color;
					font-weight:bold;
				}
			}
		}
		
		.tabulator-page{
			margin:0 0.1875em;
			padding:$button-padding-vertical $button-padding-horizontal;
			
			border:$button-border-width solid $button-border-color;
			
			font-size: $textSize;
			
			&.active{
				border-color:$button-active-border-color;
				color:$button-active-color;
				font-weight:bold;
			}
			
			&:not(.disabled){
				@media (hover:hover) and (pointer:fine){
					&:hover{
						cursor:pointer;
						border-color:$button-hover-border-color;
						background:inherit;
						color:inherit;
					}
				}
			}
		}
	}
	
	//Bulma theming classes
	
	&.is-striped{
		.tabulator-row{
			&:nth-child(even){
				background-color: $rowAltBackgroundColor;
			}
		}
	}
	
	&.is-bordered{
		border:$table-cell-border;
		
		.tabulator-header{
			.tabulator-col{
				border-right:$table-cell-border;
			}
		}
		
		.tabulator-tableholder{
			.tabulator-table{
				.tabulator-row{
					.tabulator-cell{
						border-right:$table-cell-border;
					}
				}
			}
		}
	}
	
	&.is-narrow{
		.tabulator-header{
			.tabulator-col{
				.tabulator-col-content{
					padding: 0.25em 0.5em
				}
			}
		}
		
		.tabulator-tableholder{
			.tabulator-table{
				.tabulator-row{
					.tabulator-cell{
						padding: 0.25em 0.5em
					}
				}
			}
		}
	}
}

.tabulator-row{
	min-height:14px + ($headerMargin * 2);
	
	&.tabulator-row-even{
		background-color: inherit;
	}
	
	&.tabulator-selected{
		background-color:$rowSelectedBackground !important;
	}
	
	@media (hover:hover) and (pointer:fine){
		&.tabulator-selected:hover{
			background-color:color.adjust($rowSelectedBackground, $lightness: -10%) !important;
		}
	}
	
	.tabulator-cell{
		padding:$table-cell-padding;
		border:$table-cell-border;
		border-width:$table-cell-border-width;

		&.tabulator-row-header{
			border:$table-cell-border;
			border-width:$table-cell-border-width;
			border-right-width: 1px;
			background:$headerBackgroundColor;
		}
	}
	
	&.tabulator-group{
		border-bottom:1px solid #999;
		border-right:none;
		border-top:1px solid #999;
		color:$table-cell-heading-color;
	}
}

.tabulator-print-table{
	.tabulator-print-table-group{
		box-sizing:border-box;
		border-bottom:1px solid #999;
		border-right:none;
		border-top:1px solid #999;
		color:$table-cell-heading-color;
	}
}

.tabulator-popup-container{
	background: $backgroundColor,
}

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

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