/**
 * @file
 * Shimmer Loading Skeleton Effect using EC Design Tokens
 * SMIP EC Knowledge Hub module.
 */

/* ==========================================================================
   Shimmer Base Wave Animation & Tokens
   ========================================================================== */
.ecl-shimmer-box {
  background: linear-gradient(
    90deg,
    #f2f3f7 0%,
    #e5e7ee 50%,
    #f2f3f7 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: eclShimmerWave 1.4s ease-in-out infinite !important;
  border-radius: var(--Radius-s, 4px) !important;
  display: block !important;
}

@keyframes eclShimmerWave {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ==========================================================================
   Recommended Card Shimmer Skeleton
   Identical footprint & design tokens to .ecl-recommended-card
   ========================================================================== */
.ecl-recommended-card--skeleton {
  background: var(--ec-color-white, #FFFFFF) !important;
  border: 1px solid var(--ec-color-filter-border, #EDEDF0) !important;
  border-bottom: 4px solid var(--ec-color-tab-bottom-border, #FF8A20) !important;
  border-radius: var(--Radius-s, 4px) !important;
  height: auto !important;
  min-height: 213px !important;
  max-height: none !important;
  padding: 24px 20px 20px 20px !important;
  padding: 20px 20px 16px 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow:
    0 6px 12px 0 var(--ECEffectElevation01, rgba(0, 0, 46, 0.12)),
    0 0 0.5px 0.5px var(--ECEffectElevation05, rgba(0, 0, 46, 0.18)) !important;
  pointer-events: none !important;
  user-select: none !important;
}

.ecl-shimmer-meta {
  width: 120px !important;
  height: 16px !important;
  margin-bottom: 12px !important;
}

.ecl-shimmer-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

.ecl-shimmer-title {
  width: 92% !important;
  height: 22px !important;
}

.ecl-shimmer-title--short {
  width: 60% !important;
  height: 22px !important;
}

.ecl-shimmer-desc-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
  flex: 1 1 auto !important;
}

.ecl-shimmer-desc-line {
  width: 100% !important;
  height: 14px !important;
}

.ecl-shimmer-desc-line--short {
  width: 75% !important;
  height: 14px !important;
}

.ecl-shimmer-footer {
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ecl-shimmer-tag {
  width: 130px !important;
  height: 24px !important;
  border-radius: var(--Radius-s, 4px) !important;
}

.ecl-shimmer-tag--count {
  width: 36px !important;
  height: 24px !important;
}