Implement media filtering.

src/scss/media-filter-core.scss

@@ -1,16 +0,0 @@
-:host {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-
-  // Hide scrollbar: Firefox
-  scrollbar-width: none;
-  // Hide scrollbar: IE and Edge
-  -ms-overflow-style: none;
-}
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-:host::-webkit-scrollbar {
-  display: none;
-}

src/scss/media-filter.scss

@@ -1,4 +1,20 @@
 :host {
-  display: block;
+  display: flex;
+
+  flex-direction: column;
+  overflow: auto;
+
+  // Hide scrollbar: Firefox
+  scrollbar-width: none;
+  // Hide scrollbar: IE and Edge
+  -ms-overflow-style: none;
+
   height: 100%;
+  width: 300px;
+  margin: 5px;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+:host::-webkit-scrollbar {
+  display: none;
 }

src/scss/select.scss

@@ -0,0 +1,11 @@
+@use '@graphiteds/core/css/core.css';
+
+:host {
+  // The graphite css (above) loads variables into :root, which is lost in the
+  // shadow DOM, so copy them into the host.
+  @extend :root;
+}
+
+gr-select {
+  padding: 5px;
+}