/* Skeleton Loading Components */

.skeleton {
    @apply animate-pulse bg-slate-200 dark:bg-slate-700/50 rounded-lg;
}

.skeleton-text {
    @apply animate-pulse bg-slate-200 dark:bg-slate-700/50 rounded-full inline-block;
}

.skeleton-circle {
    @apply animate-pulse bg-slate-200 dark:bg-slate-700/50 rounded-full;
}

/* Optional Shimmer effect if preferred over pulse */
.shimmer {
    @apply relative overflow-hidden bg-slate-200 dark:bg-slate-800 rounded-lg;
}

.shimmer::after {
    content: "";
    @apply absolute inset-0 -translate-x-full;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: shimmer-animation 1.5s infinite;
}

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

@keyframes shimmer-animation {
    100% {
        transform: translateX(100%);
    }
}