/* ui/skeleton.css -- shimmer loader. */

.acms-skeleton {
  display: inline-block;
  background:
    linear-gradient(
      90deg,
      var(--bg-inset) 0%,
      var(--border-subtle) 50%,
      var(--bg-inset) 100%
    );
  background-size: 200% 100%;
  animation: acms-skeleton-shimmer 1600ms infinite linear;
  border-radius: var(--radius-sm);
}

.acms-skeleton-line {
  display: block;
  height: 14px;
  width: 100%;
  border-radius: 6px;
}

.acms-skeleton-block {
  display: block;
  height: 80px;
  width: 100%;
  border-radius: var(--radius-sm);
}

.acms-skeleton-circle {
  display: inline-block;
  border-radius: var(--radius-full);
}

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

@media (prefers-reduced-motion: reduce) {
  .acms-skeleton {
    animation: none;
    background: var(--bg-inset);
  }
}