.empty-state {
  border: var(--spruce-border-width-base) dashed var(--spruce-base-color-border-strong);
  border-radius: var(--spruce-border-radius-lg);
  padding: clamp(3rem, 5vw, 4.5rem) 1.5rem;
  text-align: center;
}
.empty-state > * {
  margin-block-end: 0;
  margin-block-start: 0;
}
.empty-state > * + * {
  margin-block-start: 1rem;
}
.empty-state__icon {
  align-items: center;
  background-color: color-mix(in srgb, var(--spruce-base-color-primary) 10%, transparent);
  block-size: 4rem;
  border-radius: 50%;
  color: var(--spruce-base-color-primary);
  display: flex;
  inline-size: 4rem;
  justify-content: center;
  margin-inline: auto;
}
.empty-state__icon svg {
  block-size: 2rem;
  inline-size: 2rem;
}
.empty-state__title {
  font-size: clamp(1.0625rem, 2vw + 1rem, 1.25rem);
}
.empty-state__text {
  color: var(--spruce-base-color-muted);
  margin-inline: auto;
  max-inline-size: 30rem;
}
.empty-state__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-block-start: 0.5rem;
}