/* ============================================================================
   06-COMPONENTS -> #SKELETON
   ========================================================================= */

/**
 * A placeholder layout for content which hasn't yet loaded.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Skeleton
 */

.skeleton {
    --skeleton-bg: var(--bg-tertiary);
    --skeleton-height: #{$font-size-md};
    --skeleton-width: 100%;

    animation: skeleton 750ms linear infinite alternate;
    background-color: var(--skeleton-bg);
    display: block;
    height: var(--skeleton-height);
    width: var(--skeleton-width);
}

@keyframes skeleton {
    0% { opacity: .5; }
    100% { opacity: 1; }
}