/* Component: Skeleton Loader
 * Description: Provides animated placeholder elements to indicate loading content.
 *              Includes variants for text, title, and circular shapes.
 *              Respects user preference for reduced motion.
 */

 
.smd-component_skeleton {
    background: linear-gradient(90deg, var(--color-background-lighter) 25%, var(--color-background-medium) 50%, var(--color-background-lighter) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 8px;    
    position: relative;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    will-change: background-position;
}

@media (prefers-reduced-motion: reduce) {
    .smd-component_skeleton {
        animation: none;
        background: var(--color-background-medium);
    }
}

.smd-component_skeleton--text {
    height: 1em;
    width: 100%;
}

.smd-component_skeleton--title {
    height: 1.5em;
    width: 80%;
}

.smd-component_skeleton--circle {
    border-radius: 50%;
    aspect-ratio: 1;
}

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