Convert scss files to modern api & update docs

Author: mkszepp

docs/app/components/snippets/installation-1.scss

@@ -1 +1 @@
-@import "ember-basic-dropdown";
+@use "ember-basic-dropdown";

docs/app/components/snippets/styles-2.scss

@@ -1,5 +1,7 @@
 // Define your variables first
-$ember-basic-dropdown-overlay-background: rgba(#3b5998, 0.5);
+@use "ember-basic-dropdown/scss/variables.scss" with (
+  $ember-basic-dropdown-overlay-background: rgba(#3b5998, 0.5)
+);
 
-// Then import the styles, which will use your variable
-@import "ember-basic-dropdown";
+// Then use the styles, which will use your variable
+@use "ember-basic-dropdown";

docs/app/styles/app.scss

@@ -1,5 +1,5 @@
 // Basic dropdown
-@import "ember-basic-dropdown";
+@use "ember-basic-dropdown";
 
 @import "variables";
 @import "base";

docs/app/templates/public-pages/docs/migrate-8-0-to-9-0.gts

@@ -41,6 +41,14 @@ import { LinkTo } from '@ember/routing';
         <code>sass-embedded</code>.
       </p>
     </li>
+    <li>
+      <p>
+        Our SCSS files have been migrated to the modern API. Please update their
+        usage in your app. See the
+        <LinkTo @route="public-pages.docs.styles">Styles</LinkTo>
+        section for details.
+      </p>
+    </li>
     <li>
       <p>
         The

docs/app/templates/public-pages/docs/styles.gts

@@ -11,9 +11,9 @@ import CodeExample from '../../../components/code-example';
   </p>
 
   <p>
-    If don't use any css pre-processor this is all. If you do use SASS or LESS,
-    the addon will know it and will have to
-    <code>@import</code>
+    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>
@@ -27,7 +27,7 @@ import CodeExample from '../../../components/code-example';
   <p>
     If by example you want to change the colour of the overlay to be blue, you
     could do this in your
-    <code>app.scss</code>/<code>app.less</code>.
+    <code>app.scss</code>.
   </p>
 
   <CodeExample @scss="styles-2.scss" @showResult={{false}} @activeTab="scss" />

ember-basic-dropdown/_index.scss

@@ -1 +1 @@
-@import "./ember-basic-dropdown.scss";
+@use "./ember-basic-dropdown.scss";

ember-basic-dropdown/ember-basic-dropdown.scss

@@ -1,2 +1 @@
-@import "./scss/variables.scss";
-@import "./scss/base.scss";
+@use "scss/base.scss";

ember-basic-dropdown/scss/base.scss

@@ -1,7 +1,4 @@
-$ember-basic-dropdown-content-background-color: #fff !default;
-$ember-basic-dropdown-content-z-index: 1000 !default;
-$ember-basic-dropdown-overlay-background: rgba(0, 0, 0, 0.5) !default;
-$ember-basic-dropdown-overlay-pointer-events: none !default;
+@use "variables";
 
 .ember-basic-dropdown {
   position: relative;
@@ -14,8 +11,8 @@ $ember-basic-dropdown-overlay-pointer-events: none !default;
 .ember-basic-dropdown-content {
   position: absolute;
   width: auto;
-  z-index: $ember-basic-dropdown-content-z-index;
-  background-color: $ember-basic-dropdown-content-background-color;
+  z-index: variables.$ember-basic-dropdown-content-z-index;
+  background-color: variables.$ember-basic-dropdown-content-background-color;
 }
 .ember-basic-dropdown-content--left {
   left: 0;
@@ -26,13 +23,13 @@ $ember-basic-dropdown-overlay-pointer-events: none !default;
 
 .ember-basic-dropdown-overlay {
   position: fixed;
-  background: $ember-basic-dropdown-overlay-background;
+  background: variables.$ember-basic-dropdown-overlay-background;
   width: 100%;
   height: 100%;
   z-index: 10;
   top: 0;
   left: 0;
-  pointer-events: $ember-basic-dropdown-overlay-pointer-events;
+  pointer-events: variables.$ember-basic-dropdown-overlay-pointer-events;
 }
 
 .ember-basic-dropdown-content-wormhole-origin {

test-app/app/styles/app.scss

@@ -1,2 +1,2 @@
 // Basic dropdown
-@import "ember-basic-dropdown";
+@use "ember-basic-dropdown";