.skeleton {
  position: relative;
  overflow: hidden;
  background: #e0e0e0;
  border-radius: 6px;
}

.skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150px;
  width: 150px;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer 1.5s infinite;
}

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

/* Specific Skeleton Types */
.btnSkeleton {
  height: 40px;
  width: 100%;
}

.btnOutlineSkeleton {
  height: 40px;
  width: 100%;
  border: 1px solid #ddd;
}

.line {
  height: 14px;
  margin-bottom: 12px;
  width: 90%;
}

.reply {
  height: 20px;
  margin-bottom: 10px;
  width: 95%;
}

.search {
  height: 38px;
  width: 100%;
  margin-bottom: 15px;
  border-radius: 25px;
}

.result {
  height: 60px;
  width: 100%;
  margin-bottom: 12px;
  border-radius: 8px;
}

.summary {
  height: 18px;
  width: 80%;
  margin-bottom: 10px;
}

.stats {
  height: 40px;
  width: 100%;
  margin-bottom: 12px;
}

.update {
  height: 50px;
  width: 100%;
  margin-bottom: 14px;
}