/* SkeletonLoader.css */

/* Basic styling for skeletons */
.skeleton {
  background-color: #f0f0f0;
  border-radius: 8px; /* Rounded corners for a modern look */
  overflow: hidden;
  position: relative;
  margin-bottom: 16px;
}

/* Category skeleton styles */
.skeleton-category {
  width: 100%;
  height: 30vh;
}

/* Product skeleton styles */
.skeleton-product {
  width: 100%;
  height: 40vh;
}

/* Default skeleton style if no type is specified */
.skeleton-default {
  width: 100%;
  height: 120px;
}

/* Shimmer effect styling */
.skeleton-content {
  height: 100%;
  width: 100%;
  background: linear-gradient(
    90deg,
    rgba(240, 240, 240, 1) 0%,
    rgba(220, 220, 220, 0.6) 50%,
    rgba(240, 240, 240, 1) 100%
  );
  animation: shimmer 1.6s ease-in-out infinite;
  background-size: 200% 100%; /* Wider background for smooth shimmer */
}

/* Keyframes for the shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Additional detail: Skeleton text placeholder */
.skeleton-text {
  width: 80%;
  height: 16px;
  background-color: #e0e0e0;
  margin-top: 8px;
  border-radius: 4px;
}

/* If you want to show multiple lines of text skeletons */
.skeleton-text-line {
  width: 100%;
  height: 16px;
  background-color: #e0e0e0;
  margin-top: 8px;
  border-radius: 4px;
}

.skeleton-text-line.short {
  width: 60%;
}
.skeleton-text-line.medium {
  width: 80%;
}
.skeleton-text-line.full {
  width: 100%;
}