@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;
@use "@wordpress/base-styles/z-index" as *;
@use "../../../dataviews/style" as *;

.dataviews-view-table {
	width: 100%;
	text-indent: 0;
	border-color: inherit;
	border-collapse: collapse;
	position: relative;
	color: $gray-700;
	margin-bottom: auto;
	background-color: inherit;

	th {
		text-align: left;
		color: $gray-900;
		font-weight: normal;
		font-size: $default-font-size;
	}
	td,
	th {
		padding: $grid-unit-15;

		&.dataviews-view-table__actions-column {
			text-align: right;
		}

		&.dataviews-view-table__actions-column--sticky {
			position: sticky;
			right: 0;
			background-color: var(--wp-dataviews-color-background, $white);
		}

		&.dataviews-view-table__actions-column--stuck {
			&::after {
				display: block;
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				width: 1px;
				background-color: $gray-100;
			}
		}

		&.dataviews-view-table__checkbox-column {
			padding-right: 0;

			.dataviews-view-table__cell-content-wrapper {
				max-width: auto;
				min-width: auto;
			}
		}
	}
	tr {
		border-top: 1px solid $gray-100;
		background-color: inherit;

		td:first-child,
		th:first-child {
			padding-left: $grid-unit-30;
		}

		td:last-child,
		th:last-child {
			padding-right: $grid-unit-30;
		}

		&:last-child {
			border-bottom: 0;
		}

		.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
			opacity: 0;
		}

		@media (hover: none) {
			// Show quick-actions on devices that do not support hover.
			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
				opacity: 1;
			}
		}

		&.is-selected {
			background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, $white);
			color: $gray-700;

			&,
			& + tr {
				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
			}

			.dataviews-view-table__actions-column--sticky {
				background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, $white);
			}
		}

		// Show action buttons on hover/focus for all rows
		&:focus-within,
		&.is-hovered,
		&:hover {
			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
				opacity: 1;
			}
		}
	}

	// Additional styles when bulk actions are available
	&.has-bulk-actions {
		tr {
			&:focus-within,
			&:hover {
				.dataviews-view-table__actions-column--sticky {
					background-color: var(--wp-dataviews-color-background, $white);
				}
			}

			&.is-selected,
			&.is-selected:hover {
				.dataviews-view-table__actions-column--sticky {
					background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, $white);
				}
			}
		}
	}

	thead {
		position: sticky;
		inset-block-start: 0;
		z-index: z-index(".dataviews-view-table thead");
		background-color: inherit;

		&.dataviews-view-table__thead--stuck {
			&::after {
				display: block;
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 1px;
				background-color: $gray-100;
			}
		}

		tr {
			border: 0;
		}
		th {
			background-color: inherit;
			padding-top: $grid-unit-10;
			padding-bottom: $grid-unit-10;
			font-size: 11px;
			text-transform: uppercase;
			font-weight: $font-weight-medium;

			&:has(.dataviews-view-table-header-button) {
				padding-left: $grid-unit-05;
				padding-right: $grid-unit-05;

				.dataviews-view-table-header-button {
					gap: $grid-unit-05;
				}
			}

			&:has(.dataviews-view-table-header-button):first-child {
				// Table cell padding minus the header button padding.
				padding-left: $grid-unit-20;
			}

			&:has(.dataviews-view-table-header-button):last-child {
				// Table cell padding minus the header button padding.
				padding-right: $grid-unit-20;
			}
		}
	}
	tbody {
		td {
			vertical-align: top;
		}
		.dataviews-view-table__cell-content-wrapper {
			min-height: $grid-unit-40;
			display: flex;
			align-items: center;
			white-space: nowrap;

			&.dataviews-view-table__cell-align-end {
				justify-content: flex-end;
				font-variant-numeric: tabular-nums;
			}

			&.dataviews-view-table__cell-align-center {
				justify-content: center;
			}
		}

		.components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
			min-height: 0;
		}
	}
	.dataviews-view-table-header-button {
		padding: $grid-unit-05 $grid-unit-10;
		font-size: 11px;
		text-transform: uppercase;
		font-weight: $font-weight-medium;

		&:not(:hover) {
			color: $gray-900;
		}

		span {
			speak: none;

			&:empty {
				display: none;
			}
		}
	}

	.dataviews-view-table-header {
		padding-left: $grid-unit-05;
	}

	.dataviews-view-table__actions-column {
		width: auto;
		white-space: nowrap;
	}


	// Density style overrides.
	&.has-compact-density {
		thead {
			th {
				&:has(.dataviews-view-table-header-button):not(:first-child) {
					padding-left: 0;
				}

				&:has(.dataviews-view-table-header-button):not(:last-child) {
					padding-right: 0;
				}
			}
		}
		td,
		th {
			padding: $grid-unit-05 $grid-unit-10;
		}
	}

	&.has-comfortable-density {
		td,
		th {
			padding: $grid-unit-20 $grid-unit-15;
		}
	}

	&.has-compact-density,
	&.has-comfortable-density {
		td,
		th {
			&.dataviews-view-table__checkbox-column {
				padding-right: 0;
			}
		}
	}
}


.dataviews-view-table-selection-checkbox {
	--checkbox-input-size: 24px;
	@include break-small() {
		--checkbox-input-size: 16px;
	}
}

.dataviews-column-primary__media {
	max-width: 60px;
	min-width: $grid-unit-40;
	min-height: $grid-unit-40;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
	background-color: $white;
	border-radius: $radius-medium;

	img {
		width: $grid-unit-40;
		height: $grid-unit-40;
		object-fit: cover;
	}

	&::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
		border-radius: $radius-medium;
	}
}

.dataviews-view-table__cell-content-wrapper,
.dataviews-view-table__primary-column-content {
	&:not(.dataviews-column-primary__media) {
		min-width: 15ch;
		max-width: 80ch;
	}
}

.dataviews-view-table__group-header-row {
	.dataviews-view-table__group-header-cell {
		font-weight: $font-weight-medium;
		padding: $grid-unit-15 $grid-unit-30;
		color: $gray-900;
	}
}

/* Column width intents via colgroup: make non-primary columns shrink-to-fit */
.dataviews-view-table col[class^="dataviews-view-table__col-"]:not(.dataviews-view-table__col-first-data):not(.dataviews-view-table__col-expand) {
	width: 1%;
}

.dataviews-view-table.is-refreshing {
	@include dataviews-refreshing();
}