@layer components {
  .empty-state {
    text-align: center;
    padding: calc(var(--block-space-l) * 2) var(--inline-space);
    color: var(--color-ink-muted);
  }

  .empty-state__icon {
    font-size: 3rem;
    line-height: 1;
    margin-block-end: var(--block-space);
  }

  .empty-state__title {
    color: var(--color-ink);
    margin-block-end: var(--block-space-s);
  }

  .empty-state__description {
    color: var(--color-ink-muted);
    max-inline-size: 36ch;
    margin-inline: auto;
    margin-block-end: var(--block-space);
  }

  .empty-state .btn {
    margin-block-start: var(--block-space-s);
  }
}