@import (reference) "global";
@import (reference) "items-view";

@tableHeadLineColor: darken(@offWhite, 4%);
@tableFootLineColor: @tableHeadLineColor;
@tableRowLineColor: @tableHeadLineColor;
@tableColLineColor: @tableHeadLineColor;
@tableHeadCellPadding: 0.6em 0.6em;
@tableFootCellPadding: 0.6em 0.6em;
@tableCellPadding: 0.6em 0.6em;

@tableCellWarningBackground: @warningBackgroundColor;
@tableCellWarningTextColor: @warningTextColor;
@tableCellWarningBorderColor: @warningBorderColor;

@tableCellErrorBackground: @errorBackgroundColor;
@tableCellErrorTextColor: @errorTextColor;
@tableCellErrorBorderColor: @errorBorderColor;

@tableHeadBackground: #fbfbfb;
@tableFootBackground: @tableHeadBackground;
@tableCurrentCellBackground: fade(@primaryColor, 15%);
@tableColumnDraggingHelperBackground: @tableHeadBackground;

@rowHeight: 31px;

@tableInvertedStripedBackground: darken(@itemsViewInvertedBackground, 4%);
@tableInvertedHeadBackground: lighten(@itemsViewInvertedBackground, 6%);
@tableInvertedFootBackground: @tableInvertedHeadBackground;
@tableInvertedHeadLineColor: lighten(@tableInvertedHeadBackground, 12%);
@tableInvertedFootLineColor: lighten(@tableInvertedFootBackground, 12%);
@tableInvertedRowLineColor: transparent;
@tableInvertedColLineColor: transparent;
@tableBoxShadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.3);

.ui.widget-table {
	border: 1px solid @borderColor;
	position: relative;
	display: block;
	box-sizing: border-box;
	min-height: 6px;

	> .inner-table {
		display: block;
		position: relative;
		overflow: hidden;
		background: @white;

		&.left, &.right {
			position: absolute;
			top: 0;
			bottom: 0;
			z-index: 2;
			.box-shadow(@tableBoxShadow);

			.cell, .header-cell, .footer-cell {
				&:last-of-type {
					border-right-width: 0;
				}
			}
		}

		&.left {
			left: 0;
		}

		&.right {
			right: 0;
		}

		&.center {
			height: 100%;

			> .table-body {
				.box-shadow(@tableBoxShadow);
			}
		}

		> .table-header, > .table-footer {
			position: absolute;
			left: 0;
			overflow: hidden;
			z-index: 1;
			.box-shadow(@tableBoxShadow);

			> table {
				table-layout: fixed;
				width: 0;
			}
		}

		> .table-header {
			top: 0;

			.row-num:before {
				content: "\f292";
				font-family: icons;
				font-weight: normal;
				color: fade(@textColor, 25%);
			}

			> .resize-handler {
				content: "";
				position: absolute !important;
				top: 0;
				bottom: 0;
				width: 8px;
				margin-left: -4px;
				z-index: 10;
				cursor: col-resize;

				&.hidden {
					display: none
				}
			}

			> .insert-indicator {
				background: rgba(0, 0, 0, 0.5);
				content: "";
				position: absolute !important;
				top: 0;
				bottom: 0;
				width: 4px;
				margin-left: -3px;
				z-index: 10;

				&.hidden {
					display: none
				}
			}
		}

		> .table-footer {
			bottom: 0;
			background: @tableFootBackground;
		}

		> .table-body {
			position: relative;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			overflow: hidden;

			&.header-1 {
				padding-top: @rowHeight * 1;
			}

			&.header-2 {
				padding-top: @rowHeight * 2;
			}

			&.header-3 {
				padding-top: @rowHeight * 3;
			}

			&.header-4 {
				padding-top: @rowHeight * 4;
			}
		}

		.items {
			padding: 0;
			margin: 0;
			overflow: visible;
			counter-reset: tablecounter;

			.cell-editor-pane {
				position: absolute;
				left: -999px;
				top: -999px;
				overflow: hidden;
				background: #fff;
				z-index: 4;

				&.hidden {
					display: none;
				}

				> * {
					width: 100%;
					height: 100%;
				}

				> .editor-container {
					display: flex;

					-webkit-justify-content: center;
					-ms-flex-pack: center;
					justify-content: center;

					-webkit-align-items: center;
					-ms-flex-align: center;
					align-items: center;
				}
			}
		}
	}

	.header-cell, .footer-cell {
		height: @rowHeight;
	}

	.cell {
		height: @rowHeight;
		line-height: @rowHeight;

		> .row-num:before {
			content: counter(tablecounter);
			counter-increment: tablecounter;
		}
	}

	.cell, .header-cell, .footer-cell {
		box-sizing: border-box;
		overflow-x: hidden;
		overflow-y: visible;
		font-size: 1rem;

		> .content {
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;

			height: 100%;
			overflow: hidden;

			-webkit-align-items: center;
			-ms-flex-align: center;
			align-items: center;

			&.default-content, > .cell-content {
				padding: 0 0.6em;
			}

			> .ui.input {
				width: 100%;
			}

			> .ui.checkbox {
				margin-left: 0.5em;
			}
		}

		&.sortable {
			&:before {
				content: "\f0dc";
				float: right;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				padding-right: 0.25em;
				font-family: Icons;
				color: @disabledTextColor;
			}

			&.asc:before {
				content: "\f0de";
				color: @darkTextColor;
			}

			&.desc:before {
				content: "\f0dd";
				color: @darkTextColor;
			}
		}

		&.h-left > .content {
			-webkit-justify-content: flex-start;
			-ms-flex-pack: start;
			justify-content: flex-start;
		}

		&.h-center > .content {
			-webkit-justify-content: center;
			-ms-flex-pack: center;
			justify-content: center;
		}

		&.h-right > .content {
			-webkit-justify-content: flex-end;
			-ms-flex-pack: end;
			justify-content: flex-end;
		}

		&.v-top > .content {
			-webkit-align-items: flex-start;
			-ms-flex-align: start;
			align-items: flex-start;
		}

		&.v-bottom > .content {
			-webkit-align-items: flex-end;
			-ms-flex-align: end;
			align-items: flex-end;
		}
	}

	.header-row {
		white-space: nowrap;
		line-height: 1;
		font-size: 0;

		.header-cell, .header-group {
			background: @tableHeadBackground;
			display: inline-block;
			cursor: pointer;
		}

		.header-cell {
			position: relative;
			border-width: 1px 1px 0 0;
			border-style: solid;
			border-color: @tableHeadLineColor @tableColLineColor;

			&.rows-2 {
				height: @rowHeight * 2;
			}

			&.rows-3 {
				height: @rowHeight * 3;
			}

			&.rows-4 {
				height: @rowHeight * 4;
			}
		}

		> .header-group > .header-cell {
			width: 100%;
		}

		&.first-row {
			position: relative;

			> .header-cell {
				border-top-width: 0;
			}
		}

		> .header-group {
			> .header-cell:first-of-type {
				border-top-width: 0;
			}
		}
	}

	.footer-row {
		white-space: nowrap;
		line-height: 1;
		font-size: 0;

		.footer-cell {
			display: inline-block;
			border-right: 1px solid @tableColLineColor;
		}
	}

	.table.item {
		position: relative;
		white-space: nowrap;
		line-height: 1;
		font-size: 0;
		box-sizing: border-box;
		overflow: visible;

		> .cell {
			display: inline-block;
			border-width: 0 1px 1px 0;
			border-style: solid;
			border-color: @tableColLineColor;

			&.warn {
				background-color: @tableCellWarningBackground !important;
				color: @tableCellWarningTextColor !important;
				box-shadow: inset 0px -1px 0px 0px @tableCellWarningTextColor;
			}

			&.error {
				background-color: @tableCellErrorBackground !important;
				color: @tableCellErrorTextColor !important;
				box-shadow: inset 0px -1px 0px 0px @tableCellErrorTextColor;
			}
		}
	}

	> .scroll-bar {
		z-index: 3;

		&.hori {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 10px;
			overflow: hidden;
			overflow-x: scroll;

			> .fake-content {
				height: 1px;
			}
		}

		&.vert {
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			width: 10px;
			overflow: hidden;
			overflow-y: scroll;
			display: none;

			> .fake-content {
				width: 1px;
			}
		}

		&::-webkit-scrollbar {
			width: 10px;
			height: 10px;
		}
	}

	&:hover {
		.scroll-bar.vert {
			display: block;
		}
	}

	&.v-scroll {
		padding-right: 10px;

		> .scroll-bar.vert {
			display: block !important;
		}

		> .inner-table.right {
			right: 10px;
		}
	}

	&.h-scroll {
		padding-bottom: 10px;

		> .inner-table.left, > .inner-table.right, > .scroll-bar.vert {
			bottom: 10px;
		}

		&.v-scroll {
			> .scroll-bar.hori {
				right: 10px;
			}
		}
	}

	&.has-right-pane {
		> .inner-table.center {
			.cell, .header-cell, .footer-cell {
				&:last-of-type {
					border-right-width: 0;
				}
			}
		}
	}

	.resize-helper {
		box-sizing: border-box;
		position: absolute;
		top: 0;
		bottom: 0;
		border-width: 0 1px;
		border-style: solid;
		border-color: @borderColor;
		background: rgba(0, 0, 0, 0.05);
		min-width: 20px;
		z-index: 20;
	}

	.loader-container {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 10;
		background: rgba(255, 255, 255, 0.5);

		> .ui.loader {
			display: block;
		}

		&.active {
			display: block;
		}
	}
}

.table-column-dragging-helper {
	box-sizing: border-box;
	overflow: hidden;
	z-index: 9999;
	background: fade(@tableColumnDraggingHelperBackground, 80%);
	.box-shadow(0.0625em 0.0625em 0.125em 0.125em rgba(0, 0, 0, 0.1));

	> .content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;

		height: 100%;
		overflow: hidden;

		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;

		&.default-content {
			padding: 0 0.6em;
		}
	}
}

.ui.widget-table.striped {
	.inner-table {
		.table.item:nth-child(2n):not(.current) > .cell {
			background: @itemsViewItemStripedBackground;
		}
	}
}

.ui.widget-table.highlight-current {
	.inner-table {
		.table.item.current > .cell {
			background: @itemsViewCurrentBackground;
		}

		.table.item > .cell.current {
			background: @tableCurrentCellBackground;
		}
	}
}