Improve the multi-select behaviour/appearance and display how many selections are made/required

styles/apps/ArtBrowser.css

@@ -30,18 +30,22 @@
 		gap: 8px;
 		border-radius: 4px;
 		overflow: hidden;
-		transition: background 100ms ease-in-out;
+		position: relative;
+		transition: all 100ms ease-in-out;
 
-		&.grid {
-			&:hover {
-				background: var(--color-cool-4);
-			}
+		&: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 {
@@ -50,6 +54,10 @@
 			gap: 4px;
 			padding: 0px 4px 4px;
 		}
+
+		input[type="checkbox"] {
+			position: absolute;
+		}
 	}
 
 	.paginated {

styles/elements/checkbox.css

@@ -0,0 +1,3 @@
+.token-browser > .window-content input[type="checkbox"] {
+	--checkbox-checked-color: var(--color-level-success-border);
+}

styles/main.css

@@ -6,6 +6,7 @@
 
 /* Elements */
 @import url("./elements/utils.css") layer(elements);
+@import url("./elements/checkbox.css") layer(elements);
 @import url("./elements/lists.css") layer(elements);
 
 /* Apps */