Added scene tags filter.

components/filters/filters.vue

@@ -68,6 +68,18 @@ function toggleFilters(state) {
 </script>
 
 <style>
+.filter {
+	padding: .5rem;
+
+	.input {
+		width: 100%;
+	}
+
+	&:not(:last-child) {
+		border-bottom: solid 1px var(--shadow-weak-30);
+	}
+}
+
 .filter-mode {
 	width: 100%;
 	color: var(--shadow);
@@ -83,6 +95,17 @@ function toggleFilters(state) {
 	}
 }
 
+.filters-sort {
+	display: flex;
+	border-bottom: solid 1px var(--shadow-weak-30);
+}
+
+.filters-search {
+	flex-grow: 1;
+	border-bottom: none;
+	width: 0;
+}
+
 .filter-clear {
 	display: flex;
 	align-items: center;
@@ -116,6 +139,19 @@ function toggleFilters(state) {
 	}
 }
 
+.filter-items {
+	max-height: 15rem;
+	overflow-y: auto;
+
+	&.selected {
+		box-shadow: 0 -1px 3px var(--shadow-weak-30);
+	}
+
+	&.available {
+		box-shadow: inset 0 -1px 3px var(--shadow-weak-30);
+	}
+}
+
 .filter-items .filter-item {
 	display: flex;
 	align-items: stretch;
@@ -179,6 +215,45 @@ function toggleFilters(state) {
 .filter-name:hover {
 	background: var(--shadow-weak-30);
 }
+
+.filter-sort {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	align-self: stretch;
+	justify-content: center;
+	padding: 0 .5rem;
+	cursor: pointer;
+	font-weight: bold;
+	color: var(--shadow);
+
+	&.order {
+		padding: 0 1rem 0 .25rem;
+	}
+
+	.icon {
+		fill: var(--shadow);
+	}
+
+	&:hover {
+		color: var(--primary);
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
+
+.filter-count {
+	width: 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0 .25rem;
+	overflow: hidden;
+	color: var(--shadow-weak-10);
+	font-size: .9rem;
+}
 </style>
 
 <style scoped>