## Modals

Modal dialogs for displaying content that requires user interaction.

### Basic Modal

### Modal Title

This is the modal body content. You can place any content here.

HTML

    <button
                class="button"
                onclick="document.getElementById('modal-basic').classList.add('show')"
            >
                Open Modal
            </button>

            <div id="modal-basic" class="modal">
                <div
                    class="modal__overlay"
                    onclick="this.parentElement.classList.remove('show')"
                ></div>
                <div class="modal__container">
                    <header class="modal__header">
                        <h3 class="modal__title">Modal Title</h3>
                        <button
                            class="modal__close"
                            onclick="this.closest('.modal').classList.remove('show')"
                        >
                            &times;
                        </button>
                    </header>
                    <div class="modal__body">
                        <p>
                            This is the modal body content. You can place any
                            content here.
                        </p>
                    </div>
                    <footer class="modal__footer">
                        <button
                            class="button button--secondary"
                            onclick="this.closest('.modal').classList.remove('show')"
                        >
                            Cancel
                        </button>
                        <button class="button button--primary">Confirm</button>
                    </footer>
                </div>
            </div>

### Modal Sizes

### Small Modal

Compact modal for quick confirmations.

### Large Modal

Spacious modal for detailed content or forms.

HTML

    <div style="display: flex; gap: 16px; flex-wrap: wrap">
                <button
                    class="button"
                    onclick="document.getElementById('modal-sm').classList.add('show')"
                >
                    Small
                </button>
                <button
                    class="button"
                    onclick="document.getElementById('modal-lg').classList.add('show')"
                >
                    Large
                </button>
            </div>

            <div id="modal-sm" class="modal modal--small">
                <div
                    class="modal__overlay"
                    onclick="this.parentElement.classList.remove('show')"
                ></div>
                <div class="modal__container">
                    <header class="modal__header">
                        <h3 class="modal__title">Small Modal</h3>
                        <button
                            class="modal__close"
                            onclick="this.closest('.modal').classList.remove('show')"
                        >
                            &times;
                        </button>
                    </header>
                    <div class="modal__body">
                        <p>Compact modal for quick confirmations.</p>
                    </div>
                </div>
            </div>

            <div id="modal-lg" class="modal modal--large">
                <div
                    class="modal__overlay"
                    onclick="this.parentElement.classList.remove('show')"
                ></div>
                <div class="modal__container">
                    <header class="modal__header">
                        <h3 class="modal__title">Large Modal</h3>
                        <button
                            class="modal__close"
                            onclick="this.closest('.modal').classList.remove('show')"
                        >
                            &times;
                        </button>
                    </header>
                    <div class="modal__body">
                        <p>Spacious modal for detailed content or forms.</p>
                    </div>
                </div>
            </div>

### Confirmation Modal

### Confirm Deletion

Are you sure you want to delete this item? This action cannot be undone.

HTML

    <button
                class="button button--danger"
                onclick="document.getElementById('modal-confirm').classList.add('show')"
            >
                Delete Item
            </button>

            <div id="modal-confirm" class="modal">
                <div
                    class="modal__overlay"
                    onclick="this.parentElement.classList.remove('show')"
                ></div>
                <div class="modal__container">
                    <header class="modal__header">
                        <h3 class="modal__title">Confirm Deletion</h3>
                    </header>
                    <div class="modal__body">
                        <p>
                            Are you sure you want to delete this item? This action
                            cannot be undone.
                        </p>
                    </div>
                    <footer class="modal__footer">
                        <button
                            class="button button--secondary"
                            onclick="this.closest('.modal').classList.remove('show')"
                        >
                            Cancel
                        </button>
                        <button class="button button--danger">Delete</button>
                    </footer>
                </div>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!