feat: ✨ add styles for dialog element & its backdrop

index.html

@@ -399,6 +399,22 @@ <h2>What can you build with MVP.css?</h2>
                 <button id="close">Close</button>
             </dialog>
         </section>
+
+        <!-- Dialog HTML Element Example -->
+        <section>
+            <button style="margin-top: 6rem;" popovertarget="dialog-modal" id="openDialog">
+                Open Dialog
+            </button>
+
+            <dialog popover id="dialog-modal">
+                <h3>Hello, I am a header of the modal</h3>
+                <p>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ullam at assumenda cum placeat aperiam
+                    ab error, doloribus eligendi sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos
+                    ullam.
+                </p>
+            </dialog>
+        </section>
     </main>
     <footer>
         <hr>

mvp.css

@@ -442,15 +442,53 @@ label {
 
 /* Popups */
 dialog {
+    max-width: 90%;
+    max-height: 85dvh;
+    margin: auto;
+    padding: 0;
     border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow) var(--color-shadow);
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 50%;
-    z-index: 999;
+    border-radius: 0.5rem;
+    overscroll-behavior: contain;
+    scroll-behavior: smooth;
+    scrollbar-width: none; /* Hide scrollbar for Firefox */
+    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
+    scrollbar-color: transparent transparent;
+    animation: bottom-to-top 0.25s ease-in-out forwards;
+}
+
+dialog::-webkit-scrollbar {
+    width: 0;
+    display: none;
+}
+
+dialog::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+dialog::-webkit-scrollbar-thumb {
+    background-color: transparent;
+}
+
+@media (min-width: 650px) {
+    dialog {
+        max-width: 39rem;
+    }
+}
+
+dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+@keyframes bottom-to-top {
+    0% {
+        opacity: 0;
+        transform: translateY(10%);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 /* Tables */
@@ -535,4 +573,4 @@ blockquote footer {
 *::-webkit-scrollbar-thumb {
     background-color: var(--color-scrollbar);
     border-radius: 10px;
-}
+}