feat(overlay): add new dc-overlay atom

    BREAKING CHANGES: dc-dialog__overlay as internal part of dc-dialog has been removed, use dc-overlay externally instead

    Change your code from this:

    ```html
    <div class="dc-dialog">
        <div class="dc-dialog__overlay"></div>
        ...
    ```

    To this:

    ```html
    <div class="dc-overlay"></div>
    <div class="dc-dialog>
        ...
    ```

docs/demo/assets/styles/partials/_exceptions.scss

@@ -11,17 +11,16 @@
         margin-bottom: $dc-space100;
     }
 
-    .dc-dialog__overlay {
-        opacity: 1;
-        position: absolute;
-    }
-
     .dc-toast-container--top, .dc-toast-container--bottom {
         position: relative;
     }
     .dc-toast--top, .dc-toast--bottom {
         animation: none;
     }
+
+    .demo-wrapper {
+        position: relative;
+    }
 }
 
 .f-item-preview .dc-loading-bar {

docs/demo/materials/04-molecules/07-dialog.html

@@ -1,17 +1,21 @@
-<div class="dc-dialog">
-    <div class="dc-dialog__overlay"> </div>
-    <div class="dc-dialog__content">
-        <div class="dc-dialog__body">
-            <div class="dc-dialog__close">
-                <i class="dc-icon dc-icon--close dc-icon--interactive dc-dialog__close__icon"></i>
+<div class="demo-wrapper">
+    <div class="dc-overlay"></div>
+    <div class="dc-dialog">
+        <div class="dc-dialog__content">
+            <div class="dc-dialog__body">
+                <div class="dc-dialog__close">
+                    <i class="dc-icon dc-icon--close dc-icon--interactive dc-dialog__close__icon"></i>
+                </div>
+                <h3 class="dc-dialog__title">This is a dialog</h3>
+                <h4 class="dc-dialog__subtitle">Subtitle or step</h4>
+                <p>This is the content area. Content goes here. Actions (buttons, most of the times) should go in the
+                    bottom
+                    part.</p>
+            </div>
+            <div class="dc-dialog__actions">
+                <a href="#" class="dc-link dc-dialog__actions__link">Action</a>
+                <button class="dc-btn dc-btn--primary">Action</button>
             </div>
-            <h3 class="dc-dialog__title">This is a dialog</h3>
-            <h4 class="dc-dialog__subtitle">Subtitle or step</h4>
-            <p>This is the content area. Content goes here. Actions (buttons, most of the times) should go in the bottom part.</p>
-        </div>
-        <div class="dc-dialog__actions">
-            <a href="#" class="dc-link dc-dialog__actions__link">Action</a>
-            <button class="dc-btn dc-btn--primary">Action</button>
         </div>
     </div>
 </div>

src/styles/atoms/_overlay.scss

@@ -0,0 +1,25 @@
+// @import "../core/core";
+
+@mixin dc-overlay {
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transition: opacity .2s .2s cubic-bezier(.39, .58, .57, 1);
+    background: rgba($dc-black, .6);
+    opacity: 1;
+    z-index: 0;
+    perspective: 600px;
+    pointer-events: none;
+}
+
+//  = DIVIDERS FOR BOXES
+//  ---------------------------------------------------------------------------
+@mixin dc-overlay-selectors {
+    .dc-overlay {
+        @include dc-overlay;
+    }
+}
+

src/styles/dress-code.scss

@@ -16,6 +16,7 @@
 @import "atoms/link";
 @import "atoms/list";
 @import "atoms/loading-bar";
+@import "atoms/_overlay.scss";
 @import "atoms/placeholder";
 @import "atoms/radio";
 @import "atoms/select";
@@ -58,6 +59,7 @@
     @include dc-link-selectors;
     @include dc-list-selectors;
     @include dc-loading-bar-selectors;
+    @include dc-overlay-selectors;
     @include dc-placeholder-selectors;
     @include dc-radio-selectors;
     @include dc-select-selectors;

src/styles/molecules/_dialog.scss

@@ -11,21 +11,6 @@
     z-index: 10000;
 }
 
-@mixin dc-dialog__overlay {
-    display: flex;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transition: opacity .2s .2s cubic-bezier(.39, .58, .57, 1);
-    background: rgba($dc-black, .6);
-    opacity: 0;
-    z-index: -1;
-    perspective: 600px;
-    pointer-events: none;
-}
-
 @mixin dc-dialog__content {
     margin: $dc-space150;
 }
@@ -89,10 +74,6 @@
         @include dc-dialog;
     }
 
-    .dc-dialog__overlay {
-        @include dc-dialog__overlay;
-    }
-
     .dc-dialog__content {
         @include dc-dialog__content;
     }