# Modal

## Visual Structure

```
ga-modal__backdrop
ga-modal__container (optional)
  └── ga-modal [--small|--medium|--large] [--danger|--warning|--success|--information]
      ├── ga-modal__top-section [--scrollable]
      │   ├── ga-modal__icon (optional)
      │   ├── ga-modal__heading
      │   │   ├── ga-modal__label (optional)
      │   │   ├── ga-modal__title
      │   │   └── ga-modal__description (optional)
      │   └── ga-modal__close-icon (optional)
      ├── ga-modal__content (optional)
      └── ga-modal__actions
```

## Elements Hierarchy

### Core Block

- `ga-modal` - Main container for the modal component

### Mandatory Elements

- `ga-modal__backdrop` - Semi-transparent overlay that covers the screen behind the modal
- `ga-modal__top-section` - Upper section of the modal containing title and close button
- `ga-modal__heading` - Container for title and optional label text
- `ga-modal__title` - Main title text of the modal
- `ga-modal__actions` - Container for action buttons

### Optional Elements

- `ga-modal__container` - Container used for modal positioning, can be omitted if positioning is handled manually by the framework
- `ga-modal__icon` - Icon that appears at the top of the modal (for status modals)
- `ga-modal__label` - Secondary text displayed above the title
- `ga-modal__close-icon` - Button for closing the modal
- `ga-modal__description` - Description of the modal
- `ga-modal__content` - Container for the main content area of the modal

### Modifiers

- `ga-modal__top-section--scrollable` - Allows the modal's top section to shrink and enables vertical scrolling of description when content overflows. Note: This is necessary due to technical constraints, since the description and main content are rendered in separate containers, explicit scrolling must be enabled to prevent duplicate overflow behavior.

#### Size Variants

- `ga-modal--small` - Small-sized modal
- `ga-modal--medium` - Medium-sized modal
- `ga-modal--large` - Large-sized modal

#### Type Variants

- `ga-modal--danger` - Modal with danger/error styling
- `ga-modal--warning` - Modal with warning styling
- `ga-modal--success` - Modal with success styling
- `ga-modal--information` - Modal with information styling

## Examples

### Types

#### Default

```html
<div class="ga-modal__backdrop"></div>
<div class="ga-modal__container">
  <div class="ga-modal ga-modal--small">
    <div class="ga-modal__top-section">
      <div class="ga-modal__heading">
        <h2 class="ga-modal__title">Title</h2>
        <div class="ga-modal__description">Description</div>
      </div>
      <button
        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
      >
        <!-- icon: x, size=24 -->
      </button>
    </div>
    <div class="ga-modal__actions">
      <button class="ga-button ga-button--primary">Confirm</button>
      <button class="ga-button ga-button--secondary">Cancel</button>
    </div>
  </div>
</div>
```

#### Danger

```html
<div class="ga-modal__backdrop"></div>
<div class="ga-modal__container">
  <div class="ga-modal ga-modal--small ga-modal--danger">
    <div class="ga-modal__top-section">
      <div class="ga-modal__icon"><!-- icon: octagon-alert, size=48 --></div>
      <div class="ga-modal__heading">
        <h2 class="ga-modal__title">Title</h2>
        <div class="ga-modal__description">Description</div>
      </div>
      <button
        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
      >
        <!-- icon: x, size=24 -->
      </button>
    </div>
    <div class="ga-modal__actions">
      <button class="ga-button ga-button--primary">Confirm</button>
      <button class="ga-button ga-button--secondary">Cancel</button>
    </div>
  </div>
</div>
```

#### Warning

```html
<div class="ga-modal__backdrop"></div>
<div class="ga-modal__container">
  <div class="ga-modal ga-modal--small ga-modal--warning">
    <div class="ga-modal__top-section">
      <div class="ga-modal__icon"><!-- icon: triangle-alert, size=48 --></div>
      <div class="ga-modal__heading">
        <h2 class="ga-modal__title">Title</h2>
        <div class="ga-modal__description">Description</div>
      </div>
      <button
        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
      >
        <!-- icon: x, size=24 -->
      </button>
    </div>
    <div class="ga-modal__actions">
      <button class="ga-button ga-button--primary">Confirm</button>
      <button class="ga-button ga-button--secondary">Cancel</button>
    </div>
  </div>
</div>
```

#### Success

```html
<div class="ga-modal__backdrop"></div>
<div class="ga-modal__container">
  <div class="ga-modal ga-modal--small ga-modal--success">
    <div class="ga-modal__top-section">
      <div class="ga-modal__icon"><!-- icon: circle-check, size=48 --></div>
      <div class="ga-modal__heading">
        <h2 class="ga-modal__title">Title</h2>
        <div class="ga-modal__description">Description</div>
      </div>
      <button
        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
      >
        <!-- icon: x, size=24 -->
      </button>
    </div>
    <div class="ga-modal__actions">
      <button class="ga-button ga-button--primary">Confirm</button>
      <button class="ga-button ga-button--secondary">Cancel</button>
    </div>
  </div>
</div>
```

#### Information

```html
<div class="ga-modal__backdrop"></div>
<div class="ga-modal__container">
  <div class="ga-modal ga-modal--small ga-modal--information">
    <div class="ga-modal__top-section">
      <div class="ga-modal__icon"><!-- icon: info, size=48 --></div>
      <div class="ga-modal__heading">
        <h2 class="ga-modal__title">Title</h2>
        <div class="ga-modal__description">Description</div>
      </div>
      <button
        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
      >
        <!-- icon: x, size=24 -->
      </button>
    </div>
    <div class="ga-modal__actions">
      <button class="ga-button ga-button--primary">Confirm</button>
      <button class="ga-button ga-button--secondary">Cancel</button>
    </div>
  </div>
</div>
```

### Sizes

#### Small

```html
<div class="ga-modal__backdrop"></div>
<div class="ga-modal__container">
  <div class="ga-modal ga-modal--small">
    <div class="ga-modal__top-section">
      <div class="ga-modal__heading">
        <h2 class="ga-modal__title">Title</h2>
        <div class="ga-modal__description">Description</div>
      </div>
      <button
        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
      >
        <!-- icon: x, size=24 -->
      </button>
    </div>
    <div class="ga-modal__actions">
      <button class="ga-button ga-button--primary">Confirm</button>
      <button class="ga-button ga-button--secondary">Cancel</button>
    </div>
  </div>
</div>
```

#### Medium

```html
<div class="ga-modal__backdrop"></div>
<div class="ga-modal__container">
  <div class="ga-modal ga-modal--medium">
    <div class="ga-modal__top-section">
      <div class="ga-modal__heading">
        <h2 class="ga-modal__title">Title</h2>
        <div class="ga-modal__description">Description</div>
      </div>
      <button
        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
      >
        <!-- icon: x, size=24 -->
      </button>
    </div>
    <div class="ga-modal__actions">
      <button class="ga-button ga-button--primary">Confirm</button>
      <button class="ga-button ga-button--secondary">Cancel</button>
    </div>
  </div>
</div>
```

#### Large

```html
<div class="ga-modal__backdrop"></div>
<div class="ga-modal__container">
  <div class="ga-modal ga-modal--large">
    <div class="ga-modal__top-section">
      <div class="ga-modal__heading">
        <h2 class="ga-modal__title">Title</h2>
        <div class="ga-modal__description">Description</div>
      </div>
      <button
        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
      >
        <!-- icon: x, size=24 -->
      </button>
    </div>
    <div class="ga-modal__actions">
      <button class="ga-button ga-button--primary">Confirm</button>
      <button class="ga-button ga-button--secondary">Cancel</button>
    </div>
  </div>
</div>
```

### With Label

```html
<div class="ga-modal__backdrop"></div>
<div class="ga-modal__container">
  <div class="ga-modal ga-modal--small">
    <div class="ga-modal__top-section">
      <div class="ga-modal__heading">
        <div class="ga-modal__label">Label</div>
        <h2 class="ga-modal__title">Title</h2>
        <div class="ga-modal__description">Description</div>
      </div>
      <button
        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
      >
        <!-- icon: x, size=24 -->
      </button>
    </div>
    <div class="ga-modal__actions">
      <button class="ga-button ga-button--primary">Confirm</button>
      <button class="ga-button ga-button--secondary">Cancel</button>
    </div>
  </div>
</div>
```

### Full Example

```html
<div class="ga-modal__backdrop"></div>
<div class="ga-modal__container">
  <div class="ga-modal ga-modal--medium ga-modal--danger">
    <div class="ga-modal__top-section">
      <div class="ga-modal__icon"><!-- icon: octagon-alert, size=48 --></div>
      <div class="ga-modal__heading">
        <div class="ga-modal__label">Label</div>
        <h2 class="ga-modal__title">Title</h2>
        <div class="ga-modal__description">
          The data could not be updated due to a server error. Please check your
          internet connection and try again.
        </div>
      </div>
      <button
        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
      >
        <!-- icon: x, size=24 -->
      </button>
    </div>
    <div class="ga-modal__content">
      <div class="ga-form-field">
        <label class="ga-form-field__label" for="input2">
          <span class="ga-form-field__label-text">Send invitation(s) to:</span>
        </label>
        <div class="ga-input">
          <input id="input2" type="text" placeholder="user@domain.example" />
        </div>
        <div class="ga-form-field__info">
          Please make sure no sensitive data is shared.
        </div>
      </div>
    </div>
    <div class="ga-modal__actions">
      <button class="ga-button ga-button--primary">Accept</button>
      <button class="ga-button ga-button--secondary">Decline</button>
    </div>
  </div>
</div>
```