.empty {
  padding: var(--sp-6) 0;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--fs-callout);
  letter-spacing: var(--track-body);
}

.empty--inline {
  padding: var(--sp-5) 0;
  text-align: left;
  border-bottom: 1px solid var(--divider);
}

.loading {
  display: flex;
  flex-direction: column;
}

.skeleton {
  height: 64px;
  border-bottom: 1px solid var(--divider);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      var(--hover) 35%,
      var(--hover) 65%,
      transparent 100%
    ),
    linear-gradient(var(--surface-2), var(--surface-2));
  background-size:
    200% 100%,
    100% 100%;
  background-repeat: no-repeat;
  animation: skeleton-shimmer 1.6s var(--ease-standard) infinite;
  background-color: transparent;
}

@keyframes skeleton-shimmer {
  0% {
    background-position:
      200% 0,
      0 0;
  }
  100% {
    background-position:
      -200% 0,
      0 0;
  }
}

.error {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink-1);
  font-size: var(--fs-callout);
  text-align: center;
}
.error small {
  display: block;
  margin-top: var(--sp-2);
  color: var(--ink-2);
  font-size: var(--fs-footnote);
}