@import "../../styles/slotui-vars.scss";
@import "../../styles/presets.scss";
	[data-theme='dark'] {
		--border-color: rgba(255, 255, 255, 0.1);
	}
	[data-theme='light'] {
		--border-color: rgba(0, 0, 0, 0.1);
	}
	.dataList {
		height: 100%;
		position: relative;
	}
	.dataListHead {
		//display: flex;
		margin: 0.5rem 0;
		align-items: stretch;
		height: 32px;
		z-index: 100;
		background-color: var(--theme-color-paper-alpha-low);
		backdrop-filter: blur(20px);
		border-radius: var(--radius-tiny);
		box-shadow: var(--box-shad-1);
		border: 1px solid var(--border-color);
		.dataListCell {
			display: flex;
			align-items: stretch;
			overflow: hidden;
			border-right: 1px solid var(--border-color);
			position: relative;
			-webkit-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
			user-select:none;
			&:last-of-type {
				border-right: 1px solid transparent;
			}
			
			&[data-sortable='true'] {
				cursor: pointer;
				&:hover {
					background-color: var(--theme-color-primary-alpha);
				}
			}

			.cellHeader {
				display: flex;
				align-items: center;
				min-width: 0;
				width: 100%;
				.cellHeaderContent {
					flex: 1;
					overflow: hidden;
					padding: 0 8px;
				}
				.cellHeaderSorter {
					//padding: 0 4px;
				}
			}
		}
	}

	.dataListRow {
		// display: flex;
		border-bottom: 1px solid var(--border-color);
		// margin: 0 0.5rem;
		/* border-radius: 6px;
			margin: 0.25rem 0; */

		// content-visibility: auto;
		&:last-of-type {
			border-bottom: 1px solid transparent;
		}

		&:hover {
			background-color: var(--theme-color-paper);
			.dataListCell {
			}
		}
		&[data-selected='true'] {
			background-color: var(--theme-color-primary);
			.dataListCell {
				color: white;
			}
		}

		.dataListCell {
			padding: 0.5rem 0.5rem;
			color: var(--theme-color-text);
			border-right: 1px solid var(--border-color);
			&:last-of-type {
				border-right: 1px solid transparent;
			}
			&[data-noWrap='true'] {
				display: box;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				/* display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical; */
			}
		}
	}