/* =========================
   Skeleton base
========================= */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

/* =========================
   LIGHT MODE
========================= */
.skeleton {
  background-color: rgba(0, 0, 0, 0.06);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.12),
    transparent
  );
  animation: shimmer 1.4s infinite;
}

/* =========================
   DARK MODE
========================= */
.dark .skeleton {
  background-color: rgba(255, 255, 255, 0.08);
}

.dark .skeleton::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
}

/* =========================
   Animation
========================= */
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Utility */
.skeleton-text {
  display: inline-block;
}