.image-tagger.data-browser {
	min-height: 350px;
	min-width: 630px;

	> .window-content {
		display: grid;
		grid-template-columns: 175px auto;
		gap: 0;
	}

	.filters {
		--spacing: 12px;
		border-right: var(--sidebar-separator);
		margin-right: var(--spacing);
		padding-right: var(--spacing);
	}

	.entry-list {
		--size: 100px;
		list-style-type: none;
		gap: 8px;
		padding: 0;
		margin: 0;
		max-height: 450px;
		overflow-y: auto;

		&.grid {
			display: grid;
			grid-template-columns: repeat(4, var(--size));
		};

		&.list {
			display: flex;
			flex-direction: column;
		}
	}

	.entry {
		transition: all 100ms ease-in-out;
		border-radius: 4px;

		&:hover,
		&[data-selected="true"]
		&:has(input[type="checkbox"]:checked) {
			background: var(--color-warm-3);
		}
	}

	.paginated {
		display: flex;
		flex-direction: column;
		gap: 6px; /* Due to the grow element, this actually means 12px */
	}

	.page-nav {
		justify-content: center;
	}
}