/* =========================
   Skeleton
   Figma: Skeleton loaders.
========================= */

@use "../kit-deps" as *;

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

.skeleton {
  display: inline-block;
  border-radius: $radius-sm;
  background: linear-gradient(
    90deg,
    $neutral-100 0%,
    $neutral-200 50%,
    $neutral-100 100%
  );
  background-size: 200% 100%;
  animation: vmk-skeleton-shimmer 1.6s ease-in-out infinite;
}

.skeleton-text {
  height: 1em;
  margin-bottom: $space-2;
  border-radius: $radius-full;

  &:last-child {
    margin-bottom: 0;
  }
}

.skeleton-title {
  height: 1.25em;
  width: 60%;
  margin-bottom: $space-3;
  border-radius: $radius-full;
}

.skeleton-circle {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

.skeleton-rect {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: $radius-md;
}

.skeleton-pill {
  width: 80px;
  height: 28px;
  border-radius: $radius-full;
}

.skeleton-xs  { width: 24px;  height: 24px; }
.skeleton-sm  { width: 32px;  height: 32px; }
.skeleton-md  { width: 48px;  height: 48px; }
.skeleton-lg  { width: 64px;  height: 64px; }
.skeleton-xl  { width: 96px;  height: 96px; }

.skeleton-block {
  display: block;
  width: 100%;
}