/* ============================================
   RSL Skeleton Loader Component
   Version: 1.0.0
   Description: Animated placeholder shapes for content loading states
   ============================================ */

/* Base Skeleton */
.rsl-skeleton {
    background: linear-gradient(90deg, #f0f0f0 0%, #f8f8f8 20%, #f0f0f0 40%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: rsl-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

/* Shimmer Animation */
@keyframes rsl-skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Pulse Animation Variant */
.rsl-skeleton-pulse {
    animation: rsl-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes rsl-skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* Wave Animation Variant */
.rsl-skeleton-wave {
    animation: rsl-skeleton-wave 1.5s linear infinite;
}

@keyframes rsl-skeleton-wave {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* ============================================
   Shape Variants
   ============================================ */

/* Text Line Skeleton */
.rsl-skeleton-text {
    height: 0.875rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.rsl-skeleton-text:last-child {
    margin-bottom: 0;
}

/* Text line width variants */
.rsl-skeleton-text-full { width: 100%; }
.rsl-skeleton-text-75 { width: 75%; }
.rsl-skeleton-text-50 { width: 50%; }
.rsl-skeleton-text-25 { width: 25%; }

/* Title/Heading Skeleton */
.rsl-skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: 1rem;
}

.rsl-skeleton-title-lg {
    height: 2rem;
    width: 70%;
}

.rsl-skeleton-title-sm {
    height: 1.25rem;
    width: 50%;
}

/* Paragraph Skeleton (multiple lines) */
.rsl-skeleton-paragraph {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rsl-skeleton-paragraph .rsl-skeleton-text:last-child {
    width: 60%;
}

/* Circle Skeleton (avatars, icons) */
.rsl-skeleton-circle {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.rsl-skeleton-circle-sm {
    width: 32px;
    height: 32px;
}

.rsl-skeleton-circle-lg {
    width: 64px;
    height: 64px;
}

.rsl-skeleton-circle-xl {
    width: 96px;
    height: 96px;
}

/* Rectangle Skeleton (images, cards) */
.rsl-skeleton-rect {
    width: 100%;
    height: 200px;
    border-radius: 4px;
}

.rsl-skeleton-rect-sm {
    height: 120px;
}

.rsl-skeleton-rect-lg {
    height: 300px;
}

.rsl-skeleton-rect-xl {
    height: 400px;
}

/* Square Skeleton */
.rsl-skeleton-square {
    width: 100px;
    height: 100px;
    border-radius: 4px;
}

.rsl-skeleton-square-sm {
    width: 60px;
    height: 60px;
}

.rsl-skeleton-square-lg {
    width: 150px;
    height: 150px;
}

/* Button Skeleton */
.rsl-skeleton-button {
    height: 40px;
    width: 120px;
    border-radius: 6px;
}

.rsl-skeleton-button-sm {
    height: 32px;
    width: 100px;
}

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

/* Input Field Skeleton */
.rsl-skeleton-input {
    height: 40px;
    width: 100%;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* ============================================
   Composite Skeletons (Common Patterns)
   ============================================ */

/* Card Skeleton */
.rsl-skeleton-card {
    background: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
}

.rsl-skeleton-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rsl-skeleton-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* List Item Skeleton */
.rsl-skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.rsl-skeleton-list-item:last-child {
    border-bottom: none;
}

.rsl-skeleton-list-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Avatar + Text Skeleton */
.rsl-skeleton-avatar-text {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rsl-skeleton-avatar-text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Table Row Skeleton */
.rsl-skeleton-table-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

/* Form Skeleton */
.rsl-skeleton-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rsl-skeleton-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ============================================
   Dark Mode Support
   ============================================ */

[data-theme="dark"] .rsl-skeleton {
    background: linear-gradient(90deg, #2a2a2a 0%, #333333 20%, #2a2a2a 40%, #2a2a2a 100%);
}

[data-theme="dark"] .rsl-skeleton-card {
    border-color: #404040;
}

[data-theme="dark"] .rsl-skeleton-list-item {
    border-bottom-color: #404040;
}

[data-theme="dark"] .rsl-skeleton-table-row {
    border-bottom-color: #404040;
}

/* ============================================
   Accessibility
   ============================================ */

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .rsl-skeleton,
    .rsl-skeleton-pulse,
    .rsl-skeleton-wave {
        animation: none;
        opacity: 0.6;
    }
}

/* Screen reader only text */
.rsl-skeleton[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Loading state container */
.rsl-skeleton-container {
    position: relative;
}

.rsl-skeleton-container[aria-busy="true"] {
    pointer-events: none;
}

/* ============================================
   Utility Classes
   ============================================ */

/* Remove animation (static skeleton) */
.rsl-skeleton-static {
    animation: none;
}

/* Spacing utilities for skeleton groups */
.rsl-skeleton-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rsl-skeleton-group-sm {
    gap: 0.5rem;
}

.rsl-skeleton-group-lg {
    gap: 1.5rem;
}

/* Horizontal skeleton group */
.rsl-skeleton-group-horizontal {
    flex-direction: row;
    align-items: center;
}

/* ============================================
   Responsive Behavior
   ============================================ */

@media (max-width: 767px) {
    .rsl-skeleton-title {
        width: 80%;
    }

    .rsl-skeleton-card {
        padding: 1rem;
    }

    .rsl-skeleton-table-row {
        grid-template-columns: 1fr;
    }
}