.empty-state {
  padding: var(--space-m);
  border: var(--border-size, 1.5px) dashed
    var(--border-color, var(--color-gray));
  text-align: center;
  border-radius: var(--border-radius);

  p {
    margin-top: 0;
    font-size: var(--font-small-responsive);
  }
}

.empty-state--small {
  padding: var(--space-xs);
}

.empty-state--left {
  text-align: left;
}

.empty-state__text {
  font-size: var(--font-size-l);
  color: var(--color-gray-dark);
  margin-bottom: var(--space-l);
  font-weight: bold;
}

.empty-state__text--small {
  font-size: var(--font-x-small-responsive);
  margin-bottom: 0;
  font-weight: normal;
}

.empty-state--only-child {
  display: none;
}

.empty-state--only-child:only-child {
  display: revert;
}