@use '../tokens' as t;

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: t.space(2);
  padding-block: t.space(12);
  padding-inline: t.space(6);
  border: 1px dashed t.role('line');
  border-radius: t.radius(lg);
  color: t.role('fg-muted');
  text-align: center;
}

.icon {
  color: t.role('fg-muted');
  font-size: t.text(2xl);
}

.title {
  color: t.role('fg-strong');
  font-size: t.text(lg);
  font-weight: t.weight(semibold);
}

.description {
  max-inline-size: 44ch;
  font-size: t.text(sm);
}

.action {
  margin-block-start: t.space(2);
}