/* Shared skeleton loaders */

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

.fs-skeleton-bar,
.fs-skeleton-text,
.fs-skeleton-btn {
  display: block;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.11) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: fs-shimmer 1.25s ease-in-out infinite;
}

.fs-skeleton-bar {
  height: 12px;
  width: 72%;
  max-width: 140px;
}

.fs-skeleton-bar--short { width: 36px; max-width: 36px; }
.fs-skeleton-bar--label { width: 56px; max-width: 56px; height: 10px; }
.fs-skeleton-bar--wide { width: min(280px, 100%); max-width: none; height: 14px; }

.fs-skeleton-text--lg { width: 52%; height: 22px; margin-bottom: 10px; }
.fs-skeleton-text { height: 14px; }
.fs-skeleton-text--md { width: 68%; height: 16px; margin-bottom: 10px; }
.fs-skeleton-text--sm { width: 44%; height: 12px; margin-bottom: 12px; }

.fs-skeleton-btn {
  width: 100%;
  height: 38px;
  margin-top: 12px;
  border-radius: 8px;
}

.fs-row--skeleton td {
  padding-top: 14px;
  padding-bottom: 14px;
}

.fs-stat-chip--skeleton {
  pointer-events: none;
  min-width: 88px;
}

.s-card--skeleton {
  pointer-events: none;
}

.s-card--skeleton:hover {
  transform: none;
  border-color: var(--line);
}

.s-card--skeleton .s-card-media {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: fs-shimmer 1.25s ease-in-out infinite;
}

.s-card--skeleton .s-card-media::after {
  display: none;
}

.s-card--skeleton .s-card-bar i {
  background: rgba(255, 255, 255, 0.08);
}