/**
 * _skeleton.css
 * Skeleton loading placeholder styles
 * Replaces inline styles in skeleton components
 */

/* ===========================================
   BASE SKELETON STYLES
   =========================================== */

.skeleton {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s infinite;
}

/* Dark theme skeleton */
.skeleton-dark {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s infinite;
}

/* ===========================================
   SKELETON SHAPES
   =========================================== */

/* Circle skeleton (avatars, icons) */
.skeleton-circle {
    border-radius: 50%;
}

/* Rounded skeleton (buttons, tags) */
.skeleton-rounded {
    border-radius: 4px;
}

/* Pill skeleton (chips, badges) */
.skeleton-pill {
    border-radius: 9999px;
}

/* ===========================================
   SKELETON SIZES
   =========================================== */

/* Avatar sizes */
.skeleton-avatar-sm {
    width: 32px;
    height: 32px;
}

.skeleton-avatar-md {
    width: 40px;
    height: 40px;
}

.skeleton-avatar-lg {
    width: 56px;
    height: 56px;
}

/* Text line sizes */
.skeleton-text-xs {
    height: 10px;
}

.skeleton-text-sm {
    height: 12px;
}

.skeleton-text-md {
    height: 14px;
}

.skeleton-text-lg {
    height: 16px;
}

/* Button sizes */
.skeleton-button-sm {
    width: 70px;
    height: 32px;
}

.skeleton-button-md {
    width: 100px;
    height: 36px;
}

.skeleton-button-lg {
    width: 140px;
    height: 40px;
}

/* Icon sizes */
.skeleton-icon-sm {
    width: 24px;
    height: 24px;
}

.skeleton-icon-md {
    width: 32px;
    height: 32px;
}

.skeleton-icon-lg {
    width: 48px;
    height: 48px;
}

/* ===========================================
   SKELETON WIDTHS
   =========================================== */

.skeleton-w-25 {
    width: 25%;
}

.skeleton-w-50 {
    width: 50%;
}

.skeleton-w-75 {
    width: 75%;
}

.skeleton-w-full {
    width: 100%;
}

.skeleton-w-70 {
    width: 70px;
}

.skeleton-w-80 {
    width: 80px;
}

.skeleton-w-100 {
    width: 100px;
}

.skeleton-w-120 {
    width: 120px;
}

.skeleton-w-140 {
    width: 140px;
}

/* ===========================================
   POST CARD SKELETON SPECIFIC
   =========================================== */

.skeleton-post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.skeleton-post-header-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton-post-caption {
    padding: 0 16px 12px;
}

.skeleton-post-caption .skeleton:first-child {
    width: 100%;
    margin-bottom: 8px;
}

.skeleton-post-caption .skeleton:last-child {
    width: 75%;
}

.skeleton-post-media {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.skeleton-post-footer {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
}

.skeleton-post-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
}

/* ===========================================
   CREATOR CARD SKELETON SPECIFIC
   =========================================== */

.skeleton-creator-card {
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.skeleton-creator-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

.skeleton-mt-4 {
    margin-top: 4px;
}

.skeleton-mt-8 {
    margin-top: 8px;
}

.skeleton-gap-4 {
    gap: 4px;
}

.skeleton-gap-6 {
    gap: 6px;
}

.skeleton-gap-8 {
    gap: 8px;
}

.skeleton-gap-12 {
    gap: 12px;
}