@use '../abstracts/mixins' as *;

.skeleton {
    display: inline-block;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    @include shimmer;

    &--text  { width: 60%; height: 1em; margin: 2px 0; }
    &--line  { width: 100%; height: .75rem; }
    &--block { width: 100%; height: 4rem; }
    &--avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
    &--card  { display: block; width: 100%; height: 8rem; border-radius: var(--radius-lg); }
}