/* styles/default/components/c-skeleton.css — #16 skeleton (shimmer) a spinner
   Created :: 2026-10-21
   Updated :: 2026-10-28
   2026-10-28 :: M9 – úklid a revize (viz 04 kap. 3) */

.c-skeleton {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--color-surface-2);
  color: transparent;
  user-select: none;
}
.c-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--color-surface-hover), transparent);
  animation: c-shimmer 1.4s var(--ease-in-out) infinite;
}
.c-skeleton--line { height: 1.2rem; width: 100%; }
.c-skeleton--line + .c-skeleton--line { margin-top: var(--sp-2); }
.c-skeleton--short { width: 60%; }
.c-skeleton--block { height: 8rem; }
.c-skeleton--avatar { width: 2.4rem; height: 2.4rem; border-radius: var(--r-full); }
.c-skeleton--row { height: var(--row-h); border-radius: 0; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }

.c-spinner {
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon);
  height: var(--icon);
  border: var(--stroke-2) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--r-full);
  animation: c-spin .7s linear infinite;
}
.c-spinner--sm { width: var(--icon-sm); height: var(--icon-sm); }
.c-spinner--lg { width: var(--icon-lg); height: var(--icon-lg); }

@keyframes c-spin { to { transform: rotate(360deg); } }
@keyframes c-shimmer { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .c-skeleton::after { display: none; }
}