/* Skeleton Component Styles */

/* ========================================================================
   Breathing animation — opacity 1 ↔ 0.55 over 1.6s (3e)
   ========================================================================
   Theme-independent: it never
   relies on one surface token being lighter than another (a shimmer band
   of --bg-secondary reads as a dark stripe in dark mode). Works for atoms
   (.sk--*) and for the Skeleton.vue component's `animation='wave'` setting.
   ======================================================================== */

.skeleton-wave,
[class*='sk--'] {
  background-color: var(--bg-tertiary);
  animation: mint-skeleton-breathe 1.6s ease-in-out infinite;
}

@keyframes mint-skeleton-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-wave,
  [class*='sk--'] {
    animation: none;
  }
}

/* ========================================================================
   Atoms — reusable skeleton shapes consumers can compose for loading layouts
   Text bars are 8px so a loading line keeps the rhythm of 13/20 text.
   ======================================================================== */

.sk--line       { height: 8px;  border-radius: var(--radius-sm); width: 100%; }
.sk--line-sm    { height: 8px;  border-radius: var(--radius-sm); width: 100%; }
.sk--title      { height: 8px;  border-radius: var(--radius-sm); width: 60%; }
.sk--avatar     { width: 36px; height: 36px; border-radius: 50%; }
.sk--btn        { width: 80px; height: 32px; border-radius: var(--radius-md); }
.sk--pill       { width: 64px; height: 20px; border-radius: 9999px; }

/* ========================================================================
   Skeleton.vue shapes. Inline width/height from the props override these.
   ======================================================================== */

.mint-skeleton               { background-color: var(--bg-tertiary); }
.mint-skeleton--text         { width: 100%; height: 8px; border-radius: var(--radius-sm); }
.mint-skeleton--circular     { width: 40px; height: 40px; border-radius: 50%; }
.mint-skeleton--rectangular  { height: 96px; border-radius: 0; }
.mint-skeleton--rounded      { height: 96px; border-radius: var(--radius-md); }