Moved filter sections to their own components.

assets/css/inputs.css

@@ -22,6 +22,9 @@
 }
 
 .button {
+	display: inline-flex;
+	align-items: center;
+	box-sizing: border-box;
     padding: .5rem 1rem;
     border: none;
     border-radius: .25rem;
@@ -29,10 +32,18 @@
     font-size: 1rem;
     font-weight: bold;
 
+	.icon {
+		padding: .5rem;
+	}
+
 	&:hover {
 		cursor: pointer;
 		background: var(--primary);
 		color: var(--text-light);
+
+		.icon {
+			fill: var(--text-light);
+		}
 	}
 
     &:focus {
@@ -54,6 +65,34 @@
 	}
 }
 
+.button-inline {
+    border: none;
+    background: none;
+	color: var(--grey-dark-20);
+	padding: 0 0 .5rem 0;
+    font-size: 1rem;
+    font-weight: bold;
+
+	.icon {
+		fill: var(--grey-dark-20);
+		padding-left: none;
+	}
+
+	&:hover {
+		cursor: pointer;
+		background: none;
+		color: var(--primary);
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+
+    &:focus {
+		outline: none;
+    }
+}
+
 .button-cancel {
     background: none;
     color: var(--shadow-strong-10);
@@ -80,6 +119,7 @@
 }
 
 .label-values {
+	flex-shrink: 0;
 	font-weight: normal;
 }
 

assets/css/theme.css

@@ -25,6 +25,7 @@
 	--background-level-10: #fff;
 	--background-level-20: #eee;
 	--background-level-30: #eee;
+	--background-dim: var(--shadow-weak-10);
 
     --shadow-weak-40: rgba(0, 0, 0, .05);
     --shadow-weak-30: rgba(0, 0, 0, .1);