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

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

	.image-list {
		--size: 100px;
		list-style-type: none;
		display: grid;
		grid-template-columns: repeat(4, var(--size));
		gap: 8px;
		padding: 0;
		margin: 0;
		max-height: 450px;
		overflow-y: auto;
	}

	.image {
		display: flex;
		flex-direction: column;
		gap: 8px;
		border-radius: 4px;
		overflow: hidden;
		position: relative;
		transition: all 100ms ease-in-out;

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

		img {
			width: 100%;
			aspect-ratio: 1;
			object-fit: contain;
			transition: all 100ms ease-in-out;
		}

		&:has(input[type="checkbox"]:checked) img {
			transform: scale(0.85);
		}

		.details {
			display: flex;
			flex-direction: column;
			gap: 4px;
			padding: 0px 4px 4px;
		}

		input[type="checkbox"] {
			position: absolute;
		}
	}

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

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