/**
 * Fluid Framework - Empty State Component
 * @layer components
 *
 * Empty states appear when lists, tables, or content areas have no items.
 * They guide the user toward their first action.
 *
 * Usage:
 *   <div class="empty-state">
 *     <div class="empty-state__icon">🔍</div>
 *     <h3 class="empty-state__title">No results found</h3>
 *     <p class="empty-state__description">Try adjusting your search or clearing filters.</p>
 *     <div class="empty-state__actions">
 *       <button>Clear Filters</button>
 *     </div>
 *   </div>
 *
 * Variants: data-size="sm|lg"
 */

@layer components {
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-10) var(--space-5);
    gap: var(--space-3);
    max-inline-size: 28rem;
    margin-inline: auto;
  }

  .empty-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xl);
    margin-block-end: var(--space-2);
  }

  .empty-state__icon svg {
    inline-size: 2rem;
    block-size: 2rem;
  }

  .empty-state__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
  }

  .empty-state__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    max-inline-size: 24rem;
    margin: 0;
  }

  .empty-state__actions {
    display: flex;
    gap: var(--space-3);
    margin-block-start: var(--space-3);
  }


  /* ========================================
     SIZE VARIANTS
     ======================================== */

  .empty-state[data-size="sm"] {
    padding: var(--space-6) var(--space-4);
    gap: var(--space-2);
  }

  .empty-state[data-size="sm"] .empty-state__icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    font-size: var(--font-size-lg);
  }

  .empty-state[data-size="sm"] .empty-state__title {
    font-size: var(--font-size-base);
  }

  .empty-state[data-size="lg"] {
    padding: var(--space-16) var(--space-6);
    gap: var(--space-4);
  }

  .empty-state[data-size="lg"] .empty-state__icon {
    inline-size: 5rem;
    block-size: 5rem;
    font-size: var(--font-size-3xl);
  }

  .empty-state[data-size="lg"] .empty-state__title {
    font-size: var(--font-size-xl);
  }



}