@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './size';
@import './bordered';

@table-prefix-cls: ~'@{ant-prefix}-table';
@tree-prefix-cls: ~'@{ant-prefix}-tree';
@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
@table-header-icon-color: rgba(@white, 0.75);
@table-header-icon-color-hover: darken(@table-header-icon-color, 10%);
@table-sticky-zindex: calc(@zindex-table-fixed + 1);
@table-sticky-scroll-bar-active-bg: fade(@table-sticky-scroll-bar-bg, 80%);
@table-filter-dropdown-max-height: 264px;
@table-expand-column-width: 48px;

.@{table-prefix-cls}-wrapper {
	clear: both;
	max-width: 100%;
	.clearfix();
}

.@{table-prefix-cls} {
	.reset-component();
	position: relative;
	font-size: @table-font-size;
	background: @table-bg;
	border-radius: @table-border-radius-base;

	&-content {
		border-radius: @table-border-radius-base;
	}

	// https://github.com/ant-design/ant-design/issues/17611
	table {
		width: 100%;
		text-align: left;
		border-radius: @table-border-radius-base @table-border-radius-base 0 0;
		border-collapse: separate;
		border-spacing: 0;
	}

	// ============================= Cell =============================
	&-thead > tr > th,
	&-tbody > tr > td,
	tfoot > tr > th,
	tfoot > tr > td {
		position: relative;
		padding: @table-padding-vertical @table-padding-horizontal;
		overflow-wrap: break-word;
		white-space: break-spaces;
	}

	&-cell-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		word-break: keep-all;

		// Fixed first or last should special process
		&.@{table-prefix-cls}-cell-fix-left-last,
		&.@{table-prefix-cls}-cell-fix-right-first {
			overflow: visible;

			.@{table-prefix-cls}-cell-content {
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.@{table-prefix-cls}-column-title {
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: keep-all;
		}
	}

	// ============================ Title =============================
	&-title {
		padding: @table-padding-vertical @table-padding-horizontal;
	}

	// ============================ Footer ============================
	&-footer {
		padding: @table-padding-vertical @table-padding-horizontal;
		color: @table-footer-color;
		background: @table-footer-bg;
	}

	// ============================ Header ============================
	&-thead {
		> tr {
			> th {
				position: relative;
				color: @table-header-color;
				font-weight: 500;
				text-align: left;
				background: @table-header-bg;
				border-bottom: @border-width-base @border-style-base @table-border-color;
				transition: background 0.3s ease;

				&[colspan]:not([colspan='1']) {
					text-align: center;
				}

				&:not(:last-child):not(.@{table-prefix-cls}-selection-column):not(.@{table-prefix-cls}-row-expand-icon-cell):not([colspan])::before {
					position: absolute;
					top: 50%;
					right: 0;
					width: 1px;
					height: 1.6em;
					background-color: @table-header-cell-split-color;
					transform: translateY(-50%);
					transition: background-color 0.3s;
					content: '';
				}
			}
		}

		> tr:not(:last-child) > th {
			&[colspan] {
				border-bottom: 0;
			}
		}
	}

	// ============================= Body =============================
	&-tbody {
		> tr {
			> td {
				border-bottom: @border-width-base @border-style-base @table-border-color;
				transition: background 0.3s;

				// ========================= Nest Table ===========================
				> .@{table-prefix-cls}-wrapper:only-child,
				> .@{table-prefix-cls}-expanded-row-fixed > .@{table-prefix-cls}-wrapper:only-child {
					.@{table-prefix-cls} {
						margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-expand-column-width -
									@table-padding-horizontal);

						&-tbody > tr:last-child > td {
							border-bottom: 0;

							&:first-child,
							&:last-child {
								border-radius: 0;
							}
						}
					}
				}
			}

			&.@{table-prefix-cls}-row:hover > td,
			> td.@{table-prefix-cls}-cell-row-hover {
				background: @table-row-hover-bg;
			}

			&.@{table-prefix-cls}-row-selected {
				> td {
					background: @table-selected-row-bg;
					border-color: rgba(0, 0, 0, 0.03);
				}

				&:hover {
					> td {
						background: @table-selected-row-hover-bg;
					}
				}
			}
		}
	}

	// =========================== Summary ============================
	&-summary {
		position: relative;
		z-index: @zindex-table-fixed;
		background: @table-bg;

		div& {
			box-shadow: 0 -@border-width-base 0 @table-border-color;
		}

		> tr {
			> th,
			> td {
				border-bottom: @border-width-base @border-style-base @table-border-color;
			}
		}
	}

	// ========================== Pagination ==========================
	&-pagination.@{ant-prefix}-pagination {
		margin: 16px;
	}

	&-pagination {
		display: flex;
		flex-wrap: wrap;
		row-gap: @padding-xs;

		> * {
			flex: none;
		}

		&-left {
			justify-content: flex-start;
		}

		&-center {
			justify-content: center;
		}

		&-right {
			justify-content: flex-end;
		}
	}

	// ================================================================
	// =                           Function                           =
	// ================================================================

	// ============================ Sorter ============================
	&-thead th.@{table-prefix-cls}-column-has-sorters {
		outline: none;
		cursor: pointer;
		transition: all 0.3s;

		&:hover {
			background: @primary-8;

			&::before {
				background-color: transparent !important;
			}
		}

		&:focus-visible {
			color: @warning-color;
		}

		// https://github.com/ant-design/ant-design/issues/30969
		&.@{table-prefix-cls}-cell-fix-left:hover,
		&.@{table-prefix-cls}-cell-fix-right:hover {
			background: @table-fixed-header-sort-active-bg;
		}
	}

	&-thead th.@{table-prefix-cls}-column-sort {
		background: @primary-8;

		&::before {
			background-color: transparent !important;
		}
	}

	td&-column-sort {
		background: @table-body-sort-bg;
	}

	&-column-title {
		position: relative;
		z-index: 1;
		flex: 1;
	}

	&-column-sorters {
		display: flex;
		flex: auto;
		align-items: center;
		justify-content: space-between;

		&::after {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			content: '';
		}
	}

	&-column-sorter {
		margin-left: 4px;
		color: @table-header-icon-color;
		font-size: 0;
		transition: color 0.3s;

		&-inner {
			display: inline-flex;
			flex-direction: column;
			align-items: center;
		}

		&-up,
		&-down {
			font-size: 11px;

			&.active {
				color: @warning-color;
			}
		}

		&-up + &-down {
			margin-top: -0.3em;
		}
	}

	&-column-sorters:hover &-column-sorter {
		color: darken(@table-header-icon-color, 10%);
	}

	// ============================ Filter ============================
	&-filter-column {
		display: flex;
		justify-content: space-between;
	}

	&-filter-trigger {
		position: relative;
		display: flex;
		align-items: center;
		margin: -4px (-@table-padding-horizontal / 2) -4px 4px;
		padding: 0 4px;
		color: @table-header-icon-color;
		font-size: @font-size-sm;
		border-radius: @border-radius-base;
		cursor: pointer;
		transition: all 0.3s;

		&:hover {
			color: @text-color-secondary;
			background: @table-header-filter-active-bg;
		}

		&.active {
			color: @primary-color;
		}
	}

	// Dropdown
	&-filter-dropdown {
		.reset-component();

		min-width: 120px;
		background-color: @table-filter-dropdown-bg;
		border-radius: @border-radius-base;
		box-shadow: @box-shadow-base;

		// Reset menu
		.@{dropdown-prefix-cls}-menu {
			// https://github.com/ant-design/ant-design/issues/4916
			// https://github.com/ant-design/ant-design/issues/19542
			max-height: @table-filter-dropdown-max-height;
			overflow-x: hidden;
			border: 0;
			box-shadow: none;

			&:empty::after {
				display: block;
				padding: 8px 0;
				color: @disabled-color;
				font-size: @font-size-sm;
				text-align: center;
				content: 'Not Found';
			}
		}

		&-tree {
			padding: 8px 8px 0;

			.@{tree-prefix-cls}-treenode .@{tree-prefix-cls}-node-content-wrapper:hover {
				background-color: @tree-node-hover-bg;
			}

			.@{tree-prefix-cls}-treenode-checkbox-checked .@{tree-prefix-cls}-node-content-wrapper {
				&,
				&:hover {
					background-color: @tree-node-selected-bg;
				}
			}
		}

		&-search {
			padding: 8px;
			border-bottom: @border-width-base @border-color-split @border-style-base;

			&-input {
				input {
					min-width: 140px;
				}
				.@{iconfont-css-prefix} {
					color: @disabled-color;
				}
			}
		}

		&-checkall {
			width: 100%;
			margin-bottom: 4px;
			margin-left: 4px;
		}

		&-submenu > ul {
			max-height: calc(100vh - 130px);
			overflow-x: hidden;
			overflow-y: auto;
		}

		// Checkbox
		&,
		&-submenu {
			.@{ant-prefix}-checkbox-wrapper + span {
				padding-left: 8px;
			}
		}

		// Operation
		&-btns {
			display: flex;
			justify-content: space-between;
			padding: 7px 8px;
			overflow: hidden;
			background-color: @table-filter-btns-bg;
			border-top: @border-width-base @border-style-base @table-border-color;
		}
	}

	// ========================== Selections ==========================
	&-selection-col {
		width: @table-selection-column-width;
	}

	&-bordered &-selection-col {
		width: @table-selection-column-width + 18px;
	}

	table tr th&-selection-column,
	table tr td&-selection-column {
		padding-right: @padding-xs;
		padding-left: @padding-xs;
		text-align: center;

		.@{ant-prefix}-radio-wrapper {
			margin-right: 0;
		}
	}

	table tr th&-selection-column&-cell-fix-left {
		z-index: 3;
	}

	table tr th&-selection-column::after {
		background-color: transparent !important;
	}

	&-selection {
		position: relative;
		display: inline-flex;
		flex-direction: column;

		&-extra {
			position: absolute;
			top: 0;
			z-index: 1;
			cursor: pointer;
			transition: all 0.3s;
			margin-inline-start: 100%;
			padding-inline-start: (@table-padding-horizontal / 4);

			.@{iconfont-css-prefix} {
				color: @table-header-icon-color;
				font-size: 10px;

				&:hover {
					color: @table-header-icon-color-hover;
				}
			}
		}
	}

	// ========================== Expandable ==========================
	&-expand-icon-col {
		width: @table-expand-column-width;
	}

	&-row-expand-icon-cell {
		text-align: center;
	}

	&-row-indent {
		float: left;
		height: 1px;
	}

	&-row-expand-icon {
		.operation-unit();
		position: relative;
		display: inline-flex;
		box-sizing: border-box;
		width: @expand-icon-size;
		height: @expand-icon-size;
		padding: 0;
		color: inherit;
		line-height: ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2)) * 2 + @border-width-base * 3;
		vertical-align: -3px;
		background: @table-expand-icon-bg;
		border: @border-width-base @border-style-base @table-border-color;
		border-radius: @border-radius-base;
		outline: none;
		transform: scale((unit(@checkbox-size) / unit(@expand-icon-size)));
		transition: all 0.3s;
		user-select: none;
		@expand-icon-size: ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2)) * 2 + @border-width-base * 3;

		&:focus,
		&:hover,
		&:active {
			border-color: currentcolor;
		}

		&::before,
		&::after {
			position: absolute;
			background: currentcolor;
			transition: transform 0.3s ease-out;
			content: '';
		}

		&::before {
			top: ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2));
			right: 3px;
			left: 3px;
			height: @border-width-base;
		}

		&::after {
			top: 3px;
			bottom: 3px;
			left: ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2));
			width: @border-width-base;
			transform: rotate(90deg);
		}

		// Motion effect
		&-collapsed::before {
			transform: rotate(-180deg);
		}

		&-collapsed::after {
			transform: rotate(0deg);
		}

		&-spaced {
			&::before,
			&::after {
				display: none;
				content: none;
			}
			background: transparent;
			border: 0;
			visibility: hidden;
		}

		.@{table-prefix-cls}-row-indent + & {
			margin-top: ((@font-size-base * @line-height-base - @border-width-base * 3) / 2) -
				ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2));
			margin-right: @padding-xs;
		}
	}

	tr&-expanded-row {
		&,
		&:hover {
			> td {
				background: @table-expanded-row-bg;
			}
		}

		// https://github.com/ant-design/ant-design/issues/25573
		.@{descriptions-prefix-cls}-view {
			display: flex;

			table {
				flex: auto;
				width: auto;
			}
		}
	}

	// With fixed
	.@{table-prefix-cls}-expanded-row-fixed {
		position: relative;
		margin: -@table-padding-vertical -@table-padding-horizontal;
		padding: @table-padding-vertical @table-padding-horizontal;
	}

	// ========================= Placeholder ==========================
	&-tbody > tr&-placeholder {
		text-align: center;
		.@{table-prefix-cls}-empty & {
			color: @disabled-color;
		}

		&:hover {
			> td {
				background: @component-background;
			}
		}
	}

	// ============================ Fixed =============================
	&-cell-fix-left,
	&-cell-fix-right {
		position: sticky !important;
		z-index: @zindex-table-fixed;
		background: @table-bg;
	}

	&-cell-fix-left-first::after,
	&-cell-fix-left-last::after {
		position: absolute;
		top: 0;
		right: 0;
		bottom: -1px;
		width: 30px;
		transform: translateX(100%);
		transition: box-shadow 0.3s;
		content: '';
		pointer-events: none;
	}

	&-cell-fix-right-first::after,
	&-cell-fix-right-last::after {
		position: absolute;
		top: 0;
		bottom: -1px;
		left: 0;
		width: 30px;
		transform: translateX(-100%);
		transition: box-shadow 0.3s;
		content: '';
		pointer-events: none;
	}

	.@{table-prefix-cls}-container {
		&::before,
		&::after {
			position: absolute;
			top: 0;
			bottom: 0;
			z-index: 1;
			width: 30px;
			transition: box-shadow 0.3s;
			content: '';
			pointer-events: none;
		}

		&::before {
			left: 0;
		}

		&::after {
			right: 0;
		}
	}

	&-ping-left {
		&:not(.@{table-prefix-cls}-has-fix-left) .@{table-prefix-cls}-container {
			position: relative;

			&::before {
				box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
			}
		}

		.@{table-prefix-cls}-cell-fix-left-first::after,
		.@{table-prefix-cls}-cell-fix-left-last::after {
			box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
		}

		.@{table-prefix-cls}-cell-fix-left-last::before {
			background-color: transparent !important;
		}
	}

	&-ping-right {
		&:not(.@{table-prefix-cls}-has-fix-right) .@{table-prefix-cls}-container {
			position: relative;

			&::after {
				box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
			}
		}

		.@{table-prefix-cls}-cell-fix-right-first::after,
		.@{table-prefix-cls}-cell-fix-right-last::after {
			box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
		}
	}

	&-sticky {
		&-holder {
			position: sticky;
			z-index: @table-sticky-zindex;
			background: @component-background;
			border-radius: @table-border-radius-base @table-border-radius-base 0 0;
		}

		&-scroll {
			position: sticky;
			bottom: 0;
			z-index: @table-sticky-zindex;
			display: flex;
			align-items: center;
			background: lighten(@table-border-color, 80%);
			border-top: 1px solid @table-border-color;
			opacity: 0.6;

			&:hover {
				transform-origin: center bottom;
			}

			&-bar {
				height: 8px;
				background-color: @table-sticky-scroll-bar-bg;
				border-radius: @table-sticky-scroll-bar-radius;

				&:hover {
					background-color: @table-sticky-scroll-bar-active-bg;
				}

				&-active {
					background-color: @table-sticky-scroll-bar-active-bg;
				}
			}
		}
	}
}

@media all and (-ms-high-contrast: none) {
	.@{table-prefix-cls} {
		&-ping-left {
			.@{table-prefix-cls}-cell-fix-left-last::after {
				box-shadow: none !important;
			}
		}

		&-ping-right {
			.@{table-prefix-cls}-cell-fix-right-first::after {
				box-shadow: none !important;
			}
		}
	}
}

@import './radius';
@import './rtl';