/**
 * Skeleton - Loading placeholder styles
 * @countermeasure/web-components/primitives/skeleton
 */

.cmm-skeleton {
  background-color: hsl(var(--muted));
  animation: cmm-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes cmm-skeleton-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.cmm-skeleton--text {
  border-radius: var(--radius-sm);
  height: 1em;
  width: 100%;
}

.cmm-skeleton--circular {
  border-radius: 50%;
}

.cmm-skeleton--rectangular {
  border-radius: var(--radius-sm);
}
