@layer components {
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    max-inline-size: var(--measure-tight);
    margin-inline: auto;
    padding: var(--space-8) var(--gutter-fluid);
    text-align: center;
  }

  .empty__icon {
    --icon-size: var(--button-icon-size-large);

    display: grid;
    place-items: center;
    inline-size: var(--button-size-large);
    block-size: var(--button-size-large);
    border-radius: var(--radius-card);
    background-color: var(--color-surface-sunken);
    color: var(--color-ink-muted);
  }

  .empty__message {
    font: var(--type-body);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }
}