# Overlay Components

## Modal
```html
<details class="modal-wrapper">
  <summary class="modal-trigger">
    <button class="btn btn-primary">Open Modal</button>
  </summary>
  <div class="modal-container">
    <div class="modal">
      <div class="modal-header">
        <h2 class="modal-title">Modal Title</h2>
        <button class="btn btn-square close-btn">
          <span class="icon icon-cross"></span>
        </button>
      </div>
      <div class="modal-content">
        <p>Modal content...</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary">Save</button>
        <button class="btn btn-secondary close-btn">Cancel</button>
      </div>
    </div>
  </div>
</details>
```

### Modal Sizes
```html
<div class="modal modal-lg">...</div>   <!-- Large -->
<div class="modal modal-sm">...</div>   <!-- Small -->
```

## Drawer
```html
<details class="drawer-wrapper">
  <summary class="drawer-trigger">
    <button class="btn btn-primary">Open Drawer</button>
  </summary>
  <div class="drawer">
    <div class="drawer-header">
      <div class="drawer-title">Drawer Title</div>
    </div>
    <div class="drawer-content">
      <p>Drawer content...</p>
    </div>
    <div class="drawer-footer">
      <button class="btn btn-primary">Save</button>
      <button class="btn btn-secondary">Cancel</button>
    </div>
  </div>
</details>
```

## Filter Drawer
```html
<details class="drawer-wrapper">
  <summary class="drawer-trigger">
    <button class="btn btn-secondary">
      <span class="icon icon-filter mr-icon-spacing"></span>
      Filter
    </button>
  </summary>
  <div class="drawer drawer-filter">
    <!-- Filter form -->
  </div>
</details>
```