@use './tabulator.scss';

.tabulator {
	@apply bg-primary border-none;

	.tabulator-header {
		@apply border-border bg-background;

		.tabulator-header-contents {
			@apply bg-background;
		}

		.tabulator-col-content {
			@apply bg-background hover:bg-muted;
		}

		.tabulator-calcs-holder {
			@apply !border-border !bg-background !border;

			.tabulator-row {
				@apply !bg-background;
			}
		}

		.tabulator-col {
			@apply bg-background;

			&.tabulator-sortable {
				@media (hover: hover) and (pointer: fine) {
					@apply border-border;
					&.tabulator-col-sorter-element:hover {
						@apply bg-background cursor-pointer;
					}
				}
			}
		}

		.tabulator-col-title-holder {
			@apply text-black dark:text-white;

			.tabulator-col-title {
				@apply text-black dark:text-white;
			}
		}

		.tabulator-col-title input {
			@apply border-border border;
		}
	}

	.tabulator-row {
		@apply border-border bg-background border-b text-black dark:text-white;

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

		.tabulator-cell {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			&:last-of-type {
				border-right: none;
			}

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

			.tabulator-data-tree-control {
				@apply border-primary bg-primary;

				.tabulator-data-tree-control-collapse {
					background: transparent;
					&:after {
						@apply bg-primary-foreground;
					}
				}

				.tabulator-data-tree-control-expand {
					@apply bg-primary-foreground;

					&:after {
						@apply bg-primary-foreground;
					}
				}
			}
		}

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

		.tabulator-frozen input {
			@apply opacity-40;
			background-color: rgb(63 63 70) !important;
			@apply border-border border;
		}
	}

	.tabulator-tableholder {
		.tabulator-cell {
			.tabulator-data-tree-control {
				@apply bg-primary;
			}
		}

		@apply bg-background;
		.tabulator-placeholder {
			span {
				@apply text-secondary;
			}
			.tabulator-placeholder-contents {
				@apply text-secondary;
			}
		}
	}

	.tabulator-footer {
		@apply border-border bg-background;

		.tabulator-footer-contents {
			@apply text-black dark:text-white;

			.tabulator-paginator {
				label {
					@apply text-black dark:text-white;
				}

				select {
					@apply border-border bg-primary text-black dark:text-white;
				}

				.tabulator-page {
					@apply border-border bg-primary-foreground hover:border-primary/10 hover:bg-primary/10 dark:bg-muted hover:dark:border-muted hover:dark:bg-muted/10 text-black dark:text-white;

					&.active {
						@apply !bg-primary !text-secondary;
					}

					&:disabled {
						opacity: 0.4;
					}
				}
			}
		}

		.tabulator-calcs-holder {
			.tabulator-row {
				@apply !bg-primary;
			}
		}

		.tabulator-spreadsheet-tabs {
			.tabulator-spreadsheet-tab {
				font-weight: normal;

				&.tabulator-spreadsheet-tab-active {
					color: tabulator.$footerActiveColor;
					font-weight: bold;
				}
			}
		}
	}
}

.tabulator-table .tabulator-row-odd {
	@apply border-border bg-background border-b border-none text-black dark:text-white;

	.tabulator-frozen {
		@apply bg-secondary;
	}

	@media (hover: hover) and (pointer: fine) {
		&.tabulator-selectable:hover {
			// @apply bg-background hover:bg-muted;
			cursor: pointer;
		}
	}
}

.tabulator-table .tabulator-row-even {
	@apply border-border bg-background border-b border-none text-black dark:text-white;

	.tabulator-frozen {
		@apply bg-secondary;
	}

	.tabulator-frozen input {
		@apply border-border border;
	}

	@media (hover: hover) and (pointer: fine) {
		&.tabulator-selectable:hover {
			// @apply bg-background hover:bg-muted;
			cursor: pointer;
		}
	}
}

.tabulator-table .tabulator-selected {
	@apply !bg-muted;
}

.tabulator-table .tabulator-tree-level-0 .tabulator-cell:first-of-type {
	padding-left: 9px;
}

.tabulator-table .tabulator-tree-level-1 .tabulator-cell:first-of-type {
	padding-left: 5px;
}

.tabulator-table .tabulator-tree-level-2 .tabulator-cell:first-of-type {
	padding-left: 12px;
}

.tabulator-table .tabulator-tree-level-3 .tabulator-cell:first-of-type {
	padding-left: 12px;
}

.tabulator-print-table {
	.tabulator-print-table-group {
		span {
			margin-left: 10px;
			color: #666;
		}
	}
}
