.skeleton {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  animation: skeleton-pulse 2s infinite;
  background-size: 200% 100%;
  background-image: linear-gradient(
    90deg,
    var(--bg-2) 0%,
    var(--bg-1) 50%,
    var(--bg-2) 100%
  );
}

.skeleton + .skeleton {
  margin-top: var(--size-3);
}

.skeleton--line {
  height: 1rem;
  width: 100%;
}

.skeleton--box {
  width: 4rem;
  height: 4rem;
}

.skeleton--circle {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
}

.skeleton--heading {
  height: 1.5rem;
  width: 60%;
}

@keyframes skeleton-pulse {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}