/* app/assets/stylesheets/components/loading.css */

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

.skeleton {
  background: linear-gradient(90deg,
    var(--color-gray-100) 25%,
    var(--color-gray-050) 50%,
    var(--color-gray-100) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.skeleton--text {
  height: 14px;
  width:  80%;
  margin-bottom: var(--space-2);
}

.skeleton--chart {
  height: 160px;
  width:  100%;
}

.skeleton--stat {
  height: 32px;
  width:  60px;
}