From a8c94ee16f45d9d34c8192e82b6787ec60b0c090 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Sat, 13 Apr 2024 12:36:32 -0600
Subject: [PATCH] Add common SCSS for all custom components

---
 styles/v3/components/common.scss      | 7 +++++++
 styles/v3/components/icon.scss        | 4 +++-
 styles/v3/components/incrementer.scss | 7 ++++---
 3 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 styles/v3/components/common.scss

diff --git a/styles/v3/components/common.scss b/styles/v3/components/common.scss
new file mode 100644
index 0000000..59f812d
--- /dev/null
+++ b/styles/v3/components/common.scss
@@ -0,0 +1,7 @@
+// Disclaimer: This CSS is used by a custom web component and is scoped to JUST
+// the corresponding web component. This should only be imported by web component
+// style files.
+
+:host {
+	display: inline-block;
+}
diff --git a/styles/v3/components/icon.scss b/styles/v3/components/icon.scss
index 22cfc17..012593f 100644
--- a/styles/v3/components/icon.scss
+++ b/styles/v3/components/icon.scss
@@ -1,10 +1,12 @@
 /*
 Disclaimer: This CSS is used by a custom web component and is scoped to JUST
-the corresponding web component. Importing this into other files is forbidden.
+the corresponding web component. Importing this into other files is forbidden
 */
 
 $default-size: 1rem;
 
+@use "./common.scss";
+
 div {
 	display: flex;
 	justify-content: center;
diff --git a/styles/v3/components/incrementer.scss b/styles/v3/components/incrementer.scss
index c7eb63b..abe9478 100644
--- a/styles/v3/components/incrementer.scss
+++ b/styles/v3/components/incrementer.scss
@@ -1,13 +1,14 @@
 /*
 Disclaimer: This CSS is used by a custom web component and is scoped to JUST
-the corresponding web component. Importing this into other files is forbidden.
+the corresponding web component. Importing this into other files is forbidden
 */
 
-@use "../mixins/material";
-
 $default-border-radius: 4px;
 $default-height: 1.5rem;
 
+@use "../mixins/material";
+@use "./common.scss";
+
 div {
 	display: grid;
 	grid-template-columns: var(--height, $default-height) var(--width, 50px) var(--height, $default-height);