dtx-table {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	/* HEADER */
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 4px 10px 12px 0; /* right padding accounts for the scorllbar */

		.actions {
			display: flex;
			align-items: center;
			gap: 4px;
		}

		.search-input {
			display: contents;

			span { padding: 14px; }

			input {
				width: 0;
				margin-left: -56px;
				padding: 12px 4px 12px 48px;
				border: none;
				background: transparent;
				color: var(--text);
				outline: none;
				transition: .2s;
			}
			input:is(:not(:placeholder-shown), :focus) { width: 300px; }
		}
	}

	/* TABLE */
	table {
		flex-grow: 1;
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		thead, tbody { display: block; }
		tbody {
			flex-grow: 1;
			overflow-y: auto;
			scrollbar-gutter: stable;
		}

		tr {
			display: grid;
			grid-template-columns: var(--template-columns);
			overflow: hidden;
			transition: .2s, background-position 0s;
		}
		tr.filtered-out {
			height: 0;
			border-bottom-width: 0;
		}
		tr.highlight {
			position: relative;
			&::after {
				content: '';
				position: absolute;
				inset: 0;
				background: radial-gradient(circle, var(--accent-light) 1%, transparent 1%) center / 0% no-repeat;
				animation: ripple 2s;
				z-index: -1;
			}
		}
		/* HEAD */
		thead { width: calc(100% - 10px); } /* to account for the scrollbar */
		th {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			min-width: 0;
			padding: 20px;
			color: var(--text);
			background: var(--border);
			transition: filter .3s;

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

			&[sortable]::before {
				content: 'arrow_upward_alt';
				display: block;
				width: 0;
				height: 20px;
				margin-inline: -4px 4px;
				color: var(--text-light);
				font-family: 'Material Symbols Outlined';
				font-size: 20px;
				overflow: hidden;
				transition: .2s;
			}
			&[sortable]:hover {
				filter: brightness(.9);
				cursor: pointer;
			}
			&:is([sort="asc"], [sort="desc"])::before { width: 20px; }
			&[sort="desc"]::before { scale: 1 -1; }
			&.actions { padding: 20px 0; }
		}

		/* BODY */
		tbody tr { border-bottom: 1px solid var(--border); }
		td {
			display: flex;
			gap: 4px;
			align-content: center;
			justify-content: start;
			flex-wrap: wrap;
			padding: 20px;
			line-height: 1.25;
			word-break: break-word;
		}
		td.chips div {
			padding: 8px 12px;
			border-radius: 50px;
			background: var(--accent-light);
		}

		td.images {
			gap: 12px;
			padding-bottom: calc(20px - 8px); /* original - scrollbar */
			overflow-x: auto;
			scrollbar-gutter: stable;

			a { flex-shrink: 0; }

			img {
				width: 52px;
				height: 52px;
				border-radius: 12px;
				object-fit: cover;
				cursor: pointer;
				transition: .2s;
			}
			img:hover { scale: 1.1; }
		}

		td.boolean {
			display: flex;
			align-items: center;

			&.success { color: var(--success); }
			&.error { color: var(--error); }
		}

		td.actions {
			justify-content: flex-end;
			padding: 20px 0;
			opacity: 0;
			transition: .2s
		}
		td.code {
			font-family: monospace;
		}
		tr:hover td.actions, td.actions:has(:focus-visible) { opacity: 1; }

		/* SELECTION */
		.select-all, .select-row {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
		}

		/* SKELETON */
		.skeleton {
			margin: 4px 0;
			border-radius: 12px;
			/* background: var(--border); */
			opacity: .5;

			& td {
				height: 15px;
				margin: 20px;
				padding: 0;
				border-radius: 4px;
				background: linear-gradient(-60deg, var(--border) 4%, var(--background-light) 25%, var(--border) 36%);
				background-size: 100vw 100%;
				background-attachment: fixed;
				animation: shimmer 4s infinite linear;
			}
		}

		/* EMPTY */
		.empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 12px;
			height: 100%;
			width: 500px;
			margin-inline: auto;
			padding-bottom: 72px;
			opacity: .3;

			span {
				display: block;
				text-align: center;
				line-height: 1.25;
			}
			& > .material-symbols-outlined { font-size: 128px; }
		}
	}

	.paginator {
		display: flex;
		align-items: center;
		width: fit-content;
		margin: 12px auto;
		padding: 2px;
		border-radius: 14px;
		border: 1px solid var(--border);

		.paginator-text {
			display: flex;
			align-items: center;
			margin-inline: 2px;
			border-radius: 2px;
			height: 44px;
		}
		.page-count { padding: 12px 8px 12px 24px; }

		input {
			field-sizing: content;
			height: 44px;
			min-width: 44px;
			padding: 12px 12px 12px 0;
			border: none;
			outline: none;
			border-radius: 2px;
			color: var(--text);
			background: transparent;
			text-align: center;
		}

		input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
		input[type=number] { -moz-appearance: textfield; appearance: textfield; }

		dtx-button { width: 44px; }
	}

	&[optimized] {
		tr {
			content-visibility: auto;
			contain-intrinsic-size: 90px;
		}
		td {
			overflow: hidden;
			flex-wrap: nowrap;
		}
		td.text {
			display: block;
			place-content: center;
			height: 53px;
			margin: 20px;
			padding: 0;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
}

@keyframes shimmer {
	0% { background-position: -100vw 0; }
	100% { background-position: 100vw 0; }
}

@keyframes ripple {
	0% { background-size: 0%; }
	20% { opacity: 1; }
	70% { background-size: 15000%; }
	100% { background-size: 15000%; opacity: 0; }
}