merch sizing-guide: add filter

styleguide/assets/style/merch.scss

@@ -55,6 +55,10 @@ table {
     &.currentEvent {
       border: solid 4px var(--color-primary);
     }
+
+    &.filtered {
+      display: none;
+    }
   }
 
   tbody > tr > th,
@@ -156,3 +160,66 @@ table {
     }
   }
 }
+
+div.filterBox {
+  border: solid 4px var(--color-foreground);
+  margin: 2rem 0;
+  padding: 1rem;
+  position: relative;
+  font-family: "Departure Mono", ui-monospace, monospace;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 4rem;
+  row-gap: 2rem;
+  width: fit-content;
+
+  &::before{
+    content: 'filter';
+    position: absolute;
+    top: -0.6lh;
+    background-color: var(--color-background);
+    padding: 0 0.5rem;
+  }
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    font-size: 1.2rem;
+
+    label {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      input[type='checkbox'] {
+        appearance: none;
+        background-color: var(--color-shade-1);
+        margin: 0;
+        color: currentColor;
+        width: 1.8em;
+        height: 1.8em;
+        border: 0.3em solid var(--color-shade-4);
+        border-radius: 0.15em;
+        transform: translateY(-0.075em);
+        position: relative;
+        font-family: inherit;
+
+        &::before {
+          position: absolute;
+          inset: 0;
+          content: "x";
+          text-align: center;
+          font-size: 1.2rem;
+          line-height: 0.7;
+          transform: scale(0);
+          transition: 120ms transform ease-in-out;
+        }
+
+        &:checked::before {
+          transform: scale(1);
+        }
+      }
+    }
+  }
+}