/* An empty state: an icon, a short title, one sentence, one button. Mandje, Bestellingen, error pages. */

@layer components {
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-6) var(--s-4);
    text-align: center;
  }

  .empty__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
  }

  .empty__icon .icon {
    width: 2rem;
    height: 2rem;
  }

  .empty__title {
    font-family: var(--font-display);
    font-style: var(--display-style);
    font-weight: var(--display-weight);
    font-size: 1.5rem;
  }

  .empty__text {
    max-width: 32ch;
    color: var(--muted);
  }

  .empty .btn {
    margin-top: var(--s-2);
  }
}