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

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

//header themeing
$headerBackgroundColor:#fff; //border to tablulator
$headerTextColor:$primary; //header text colour
$headerBorderColor:#fff;  //header border color
$headerSeperatorColor:$primary; //header bottom seperator color
$headerMargin:4px; //padding round header

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

//row themeing
$rowBackgroundColor:#f3f3f3; //table row background color
$rowAltBackgroundColor:#fff; //table row background color
$rowBorderColor:#fff; //table border color
$rowTextColor:#333; //table text color
$rowHoverBackground:#bbb; //row background color on hover

$rowSelectedBackground: #9ABCEA; //row background color when selected
$rowSelectedBackgroundHover: #769BCC;//row background color when selected and hovered

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

//footer themeing
$footerBackgroundColor:#fff; //border to tablulator
$footerTextColor:$primary; //footer text colour
$footerBorderColor:#aaa; //footer border color
$footerSeperatorColor:#999; //footer bottom seperator color

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


//Tabulator Containing Element
.tabulator{
	position: relative;
	border: 1px solid $borderColor;
	background-color: $backgroundColor;
	overflow:hidden;
	font-size:$textSize;
	text-align: left;

	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
	-ms-transform: translatez(0);
	-o-transform: translatez(0);
	transform: translatez(0);

	&[tabulator-layout="fitDataFill"]{
		.tabulator-tableHolder{
			.tabulator-table{
				min-width:100%;
			}
		}
	}

	&.tabulator-block-select{
		user-select: none;
	}

	//column header containing element
	.tabulator-header{
		position:relative;
		box-sizing: border-box;

		width:100%;

		border-bottom:3px solid $headerSeperatorColor;
		margin-bottom:4px;
		background-color: $headerBackgroundColor;
		color: $headerTextColor;
		font-weight:bold;

		white-space: nowrap;
		overflow:hidden;

		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-o-user-select: none;

		padding-left:$handleWidth;

		font-size: 1.1em;

		//individual column header element
		.tabulator-col{
			display:inline-block;
			position:relative;
			box-sizing:border-box;
			border-right:2px solid $headerBorderColor;
			background-color: $headerBackgroundColor;
			text-align:left;
			vertical-align: bottom;
			overflow: hidden;

			&.tabulator-moving{
				position: absolute;
				border:1px solid  $headerSeperatorColor;
				background:darken($headerBackgroundColor, 10%);
				pointer-events: none;
			}

			//hold content of column header
			.tabulator-col-content{
				position: relative;
				padding:4px;

				//hold title of column header
				.tabulator-col-title{
					box-sizing:border-box;
					width: 100%;

					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					vertical-align:bottom;

					//element to hold title editor
					.tabulator-title-editor{
						box-sizing: border-box;
						width: 100%;

						border:1px solid $primary;

						padding:1px;

						background: #fff;

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

				//column sorter arrow
				.tabulator-arrow{
					display: inline-block;
					position: absolute;
					top:9px;
					right:8px;
					width: 0;
					height: 0;
					border-left: 6px solid transparent;
					border-right: 6px solid transparent;
					border-bottom: 6px solid $sortArrowInactive;
				}

			}

			//complex header column group
			&.tabulator-col-group{

				//gelement to hold sub columns in column group
				.tabulator-col-group-cols{
					position:relative;
					display: flex;

					border-top:2px solid $headerSeperatorColor;
					overflow: hidden;

					.tabulator-col:last-child{
						margin-right:-1px;
					}
				}
			}


			//hide left resize handle on first column
			&:first-child{
				.tabulator-col-resize-handle.prev{
					display: none;
				}
			}

			//placeholder element for sortable columns
			&.ui-sortable-helper{
				position: absolute;
				background-color: darken($headerBackgroundColor, 10%) !important;
				border:1px solid $headerBorderColor;
			}

			//header filter containing element
			.tabulator-header-filter{
				position: relative;
				box-sizing: border-box;
				margin-top:2px;
				width:100%;
				text-align: center;

				//styling adjustment for inbuilt editors
				textarea{
					height:auto !important;
				}

				svg{
					margin-top: 3px;
				}
			}

			//styling child elements for sortable columns
			&.tabulator-sortable{
				.tabulator-col-title{
					padding-right:25px;
				}

				&:hover{
					cursor:pointer;
					background-color:darken($headerBackgroundColor, 10%);
				}


				&[aria-sort="none"]{
					.tabulator-col-content .tabulator-arrow{
						border-top: none;
						border-bottom: 6px solid $sortArrowInactive;
					}
				}

				&[aria-sort="asc"]{
					.tabulator-col-content .tabulator-arrow{
						border-top: none;
						border-bottom: 6px solid $sortArrowActive;
					}
				}

				&[aria-sort="desc"]{
					.tabulator-col-content .tabulator-arrow{
						border-top: 6px solid $sortArrowActive;
						border-bottom: none;
					}
				}
			}

		}

		.tabulator-frozen{
			display: inline-block;
			position: absolute;

			// background-color: inherit;

			z-index: 10;

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

				border-right:2px solid $rowBorderColor;
			}

			&.tabulator-frozen-right{
				border-left:2px solid $rowBorderColor;
			}
		}

		.tabulator-calcs-holder{
			box-sizing:border-box;
			min-width:200%;

			border-top:2px solid $headerSeperatorColor !important;

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

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

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

				.tabulator-col-resize-handle{
					display: none;
				}

				.tabulator-cell{
					background:none;
				}
			}

			border-top:1px solid $rowBorderColor;
			border-bottom:1px solid $headerBorderColor;

			overflow: hidden;
		}
	}

	//scrolling element to hold table
	.tabulator-tableHolder{
		position:relative;
		width:100%;
		white-space: nowrap;
		overflow:auto;
		-webkit-overflow-scrolling: touch;

		&:focus{
			outline: none;
		}

		//default placeholder element
		.tabulator-placeholder{
			position: absolute;
			box-sizing:border-box;
			display: flex;
			align-items:center;

			top:0;
			left:0;
			height:100%;
			width:100%;

			span{
				display: inline-block;

				margin:0 auto;
				padding:10px;

				color:$primary;
				font-weight: bold;
				font-size: 20px;
			}
		}

		//element to hold table rows
		.tabulator-table{
			position:relative;
			display:inline-block;
			background-color:$rowBackgroundColor;
			white-space: nowrap;
			overflow:visible;
			color:$rowTextColor;

			.tabulator-row{
				&.tabulator-calcs{
					font-weight: bold;
					background:darken($rowAltBackgroundColor, 5%) !important;

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

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

	//row element
	.tabulator-row{
		position: relative;
		box-sizing: border-box;

		box-sizing: border-box;
		min-height:$textSize + ($headerMargin * 2);

		background-color: $handleColor;

		padding-left: $handleWidth !important;

		margin-bottom: 2px;

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

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

		&.tabulator-selectable:hover{
			cursor: pointer;

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

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

		&.tabulator-selected:hover{
			.tabulator-cell{
				background-color:$rowSelectedBackgroundHover;
				cursor: pointer;
			}
		}

		&.tabulator-moving{
			position: absolute;

			border-top:1px solid  $rowBorderColor;
			border-bottom:1px solid  $rowBorderColor;

			pointer-events: none !important;
			z-index:15;
		}

		.tabulator-frozen{
			display: inline-block;
			position: absolute;

			background-color: inherit;

			z-index: 10;

			&.tabulator-frozen-left{
				padding-left: $handleWidth;
				border-right:2px solid $rowBorderColor;
			}

			&.tabulator-frozen-right{
				border-left:2px solid $rowBorderColor;
			}
		}

		//cell element
		.tabulator-cell{
			display:inline-block;
			position: relative;
			box-sizing:border-box;
			padding:6px 4px;
			border-right:2px solid $rowBorderColor;
			vertical-align:middle;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;

			background-color: $rowBackgroundColor;

			&.tabulator-editing{
				border:1px solid  $editBoxColor;
				padding: 0;

				input, select{
					border:1px;
					background:transparent;
				}
			}

			&.tabulator-validation-fail{
				border:1px solid $errorColor;
				input, select{
					border:1px;
					background:transparent;

					color: $errorColor;
				}
			}

			//hide left resize handle on first column
			&:first-child{
				.tabulator-col-resize-handle.prev{
					display: none;
				}
			}

			//movable row handle
			&.tabulator-row-handle{

				display: inline-flex;
				align-items:center;

				-moz-user-select: none;
				-khtml-user-select: none;
				-webkit-user-select: none;
				-o-user-select: none;

				//handle holder
				.tabulator-row-handle-box{
					width:80%;

					//Hamburger element
					.tabulator-row-handle-bar{
						width:100%;
						height:3px;
						margin:2px 10% 0 10%;
						background:#666;
					}
				}
			}
		}

		//row grouping element
		&.tabulator-group{

			box-sizing:border-box;
			border-bottom:2px solid $primary;
			border-top:2px solid $primary;
			padding:5px;
			padding-left:10px;
			background:lighten($primary, 20%);
			font-weight:bold;
			color:fff;
			margin-bottom: 2px;

			min-width: 100%;

			&:hover{
				cursor:pointer;
				background-color:rgba(0,0,0,.1);
			}


			&.tabulator-group-visible{
				.tabulator-arrow{
					margin-right:10px;
					border-left: 6px solid transparent;
					border-right: 6px solid transparent;
					border-top: 6px solid $sortArrowActive;
					border-bottom: 0;
				}
			}

			&.tabulator-group-level-1{
				.tabulator-arrow{
					margin-left:20px;
				}
			}

			&.tabulator-group-level-2{
				.tabulator-arrow{
					margin-left:40px;
				}
			}

			&.tabulator-group-level-3{
				.tabulator-arrow{
					margin-left:60px;
				}
			}

			&.tabulator-group-level-4{
				.tabulator-arrow{
					margin-left:80px;
				}
			}

			&.tabulator-group-level-5{
				.tabulator-arrow{
					margin-left:1000px;
				}
			}

			//sorting arrow
			.tabulator-arrow{
				display: inline-block;
				width: 0;
				height: 0;
				margin-right:16px;
				border-top: 6px solid transparent;
				border-bottom: 6px solid transparent;
				border-right: 0;
				border-left: 6px solid $sortArrowActive;
				vertical-align:middle;
			}

			span{
				margin-left:10px;
				color:$primary;
			}
		}
	}
	//column resize handles
	.tabulator-col-resize-handle{
		position:absolute;
		right:0;
		top:0;
		bottom:0;
		width:5px;

		&.prev{
			left:0;
			right:auto;
		}

		&:hover{
			cursor:ew-resize;
		}
	}


	//footer element
	.tabulator-footer{
		padding:5px 10px;
		border-top:1px solid $footerSeperatorColor;
		background-color: $footerBackgroundColor;
		text-align:right;
		color: $footerTextColor;
		font-weight:bold;
		white-space:nowrap;
		user-select:none;

		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-o-user-select: none;

		.tabulator-calcs-holder{
			box-sizing:border-box;
			width:calc("100% + 20px");
			margin:-5px -10px 5px -10px;

			text-align: left;

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

			border-top:3px solid $headerSeperatorColor !important;
			border-bottom:2px solid $headerSeperatorColor !important;

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

				.tabulator-col-resize-handle{
					display: none;
				}

				.tabulator-cell{
					background:none;
				}
			}

			border-bottom:1px solid $rowBorderColor;
			border-top:1px solid $rowBorderColor;

			overflow: hidden;

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

		//pagination container element
		.tabulator-pages{
			margin:0 7px;
		}

		//pagination button
		.tabulator-page{
			display:inline-block;
			margin:0 2px;
			border:1px solid $footerBorderColor;
			border-radius:3px;
			padding:2px 5px;
			background:rgba(255,255,255,.2);
			color: $footerTextColor;
			font-family:inherit;
			font-weight:inherit;
			font-size:inherit;

			&.active{
				color:$primary;
			}

			&:disabled{
				opacity:.5;
			}

			&:not(.disabled){
				&:hover{
					cursor:pointer;
					background:rgba(0,0,0,.2);
					color:#fff;
				}
			}
		}
	}

	//holding div that contains loader and covers tabulator element to prevent interaction
	.tablulator-loader{
		position:absolute;
		display: flex;
		align-items:center;

		top:0;
		left:0;
		z-index:100;

		height:100%;
		width:100%;
		background:rgba(0,0,0,.4);
		text-align:center;

		//loading message element
		.tabulator-loader-msg{
			display:inline-block;

			margin:0 auto;
			padding:10px 20px;

			border-radius:10px;

			background:#fff;
			font-weight:bold;
			font-size:16px;

			//loading message
			&.tabulator-loading{
				border:4px solid #333;
				color:#000;
			}

			//error message
			&.tabulator-error{
				border:4px solid #D00;
				color:#590000;
			}
		}
	}
}