:root {
  --empty-content-gap: var(--space-2);
  --empty-content-compact-padding: var(--space-6) 0;
  --empty-content-centered-padding: var(--space-6);
  --empty-content-centered-height: var(--size-240);
  --empty-content-copy-width: var(--size-480);
  --empty-content-title-font: var(--font-type-heading-small);
  --empty-content-description-font: var(--font-type-body);
  --empty-content-action-spacing: var(--space-2);
}

.empty-content {
  --empty-content-padding: var(--empty-content-compact-padding);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--empty-content-gap);
  min-inline-size: 0;
  max-inline-size: none;
  inline-size: 100%;
  margin: 0;
  padding: var(--empty-content-padding);
  color: var(--color-foreground);
  text-align: start;
  overflow-wrap: anywhere;
}

.empty-content--empty {
  --empty-content-padding: var(--empty-content-centered-padding);
  align-items: center;
  justify-content: center;
  min-block-size: var(--empty-content-centered-height);
  text-align: center;
}

.empty-content__title {
  margin: 0;
  max-inline-size: 100%;
  font: var(--empty-content-title-font);
}

.empty-content__description {
  margin: 0;
  max-inline-size: min(100%, var(--empty-content-copy-width));
  color: var(--color-muted-foreground);
  font: var(--empty-content-description-font);
}

.empty-content__icon {
  display: flex;
  color: var(--color-muted-foreground);
}

.empty-content__actions {
  max-inline-size: 100%;
  margin-block-start: var(--empty-content-action-spacing);
}