.token-browser.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;
		transition: background 100ms ease-in-out;

		&.grid {
			&:hover {
				background: var(--color-cool-4);
			}
		}

		img {
			width: 100%;
			aspect-ratio: 1;
			object-fit: contain;
		}

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

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

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