diff --git a/docs/app/components/snippets/styles-0.css b/docs/app/components/snippets/styles-0.css
new file mode 100644
index 00000000..c7b8ce6e
--- /dev/null
+++ b/docs/app/components/snippets/styles-0.css
@@ -0,0 +1,7 @@
+:root,
+:host {
+  --ember-basic-dropdown-content-background-color: #fff;
+  --ember-basic-dropdown-content-z-index: 1000;
+  --ember-basic-dropdown-overlay-background: rgb(0 0 0 / 50%);
+  --ember-basic-dropdown-overlay-pointer-events: none;
+}
diff --git a/docs/app/templates/public-pages/docs/styles.gts b/docs/app/templates/public-pages/docs/styles.gts
index 86d7bb5f..d442a04c 100644
--- a/docs/app/templates/public-pages/docs/styles.gts
+++ b/docs/app/templates/public-pages/docs/styles.gts
@@ -6,20 +6,14 @@ import CodeExample from '../../../components/code-example';
 
   <p>
     Since this component doesn't any visual theme, you can apply styles to it
-    just with plain CSS or even adding the classes your favourite CSS framework
-    gives you.
+    just with CSS variables, plain CSS or even adding the classes your favorite
+    CSS framework gives you.
   </p>
 
-  <p>
-    If don't use any css pre-processor this is all. If you do use SASS, the
-    addon will know it and will have to
-    <code>@use</code>
-    the styles explicitly. This gives you the chance to set a few variables that
-    Ember Basic Dropdown will use.
-  </p>
+  <CodeExample @css="styles-0.css" @showResult={{false}} @activeTab="css" />
 
   <p>
-    There is only four variables you can tweak (Sass syntax)
+    If you use SASS you can override the default values by using the SASS syntax
   </p>
 
   <CodeExample @scss="styles-1.scss" @showResult={{false}} @activeTab="scss" />
diff --git a/ember-basic-dropdown-for-css-generate.scss b/ember-basic-dropdown-for-css-generate.scss
new file mode 100644
index 00000000..cbf39efe
--- /dev/null
+++ b/ember-basic-dropdown-for-css-generate.scss
@@ -0,0 +1,20 @@
+@use "scss/variables.scss" with (
+  $ember-basic-dropdown-content-background-color: var(
+      --ember-basic-dropdown-content-background-color,
+      #fff
+    ),
+  $ember-basic-dropdown-content-z-index: var(
+      --ember-basic-dropdown-content-z-index,
+      1000
+    ),
+  $ember-basic-dropdown-overlay-background: var(
+      --ember-basic-dropdown-overlay-background,
+      rgba(0, 0, 0, 0.5)
+    ),
+  $ember-basic-dropdown-overlay-pointer-events: var(
+      --ember-basic-dropdown-overlay-pointer-events,
+      none
+    )
+);
+
+@use "scss/base.scss";
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 4c4cd7ff..18180ff1 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -16,7 +16,7 @@ const tsConfig = resolve(rootDirectory, './tsconfig.publish.json');
 
 export default [
   {
-    input: './_index.scss',
+    input: './ember-basic-dropdown-for-css-generate.scss',
     output: {
       file: './src/vendor/ember-basic-dropdown.js',
       assetFileNames: '[name][extname]',
@@ -29,7 +29,7 @@ export default [
     ],
   },
   {
-    input: './_index.scss',
+    input: './ember-basic-dropdown-for-css-generate.scss',
     output: {
       file: './src/vendor/ember-basic-dropdown.js',
       assetFileNames: '[name][extname]',