@layer components {
  /* Empty states are a plain sentence under the page rule, not a box */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-6) 0;

    .empty-state__icon {
      color: var(--color-text-muted);

      svg path {
        stroke: var(--color-text-muted);
      }

      .loader {
        fill: var(--color-text);
        animation: spin 0.75s infinite linear;

        path {
          stroke: transparent;
        }
      }
    }

    h2 {
      margin: 0;
      font-size: var(--text-lg);
      font-weight: var(--font-semibold);
    }

    p {
      max-width: 60ch;
      margin: 0;
      color: var(--color-text-muted);
    }

    .empty-state__actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-3);
      margin-top: var(--space-2);
    }
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .empty-state .empty-state__icon .loader {
      animation-duration: 2s;
    }
  }
}