/* =========================================================
   AJUS skeleton
   Loading placeholders that mirror the shape of the content that is
   about to arrive, so the layout never jumps.

       <div class="ajus-skeleton-group">
           <span class="ajus-skeleton ajus-skeleton--title"></span>
           <span class="ajus-skeleton ajus-skeleton--text"></span>
           <span class="ajus-skeleton ajus-skeleton--text"></span>
       </div>

   Shapes: --text --text-sm --title --avatar --thumb --button.
   Wrap several in `.ajus-skeleton-group` (column, or `--row`).
   Mark the container `aria-busy="true"` while loading.
   ========================================================= */

.ajus-skeleton {
    display: block;
    width: 100%;
    height: 1rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--color-bg-surface-muted) 25%,
        var(--color-bg-surface-soft) 37%,
        var(--color-bg-surface-muted) 63%
    );
    background-size: 400% 100%;
    animation: ajus-skeleton-shimmer 1.4s ease infinite;
}

.ajus-skeleton--text {
    height: 0.75rem;
    border-radius: var(--radius-pill);
}

.ajus-skeleton--text-sm {
    height: 0.6rem;
    border-radius: var(--radius-pill);
}

.ajus-skeleton--title {
    height: 1.15rem;
    width: 45%;
    border-radius: var(--radius-sm);
}

.ajus-skeleton--avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

.ajus-skeleton--thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
}

.ajus-skeleton--button {
    width: 6.5rem;
    height: 2.4rem;
    border-radius: var(--radius-md);
}

.ajus-skeleton-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.ajus-skeleton-group--row {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.ajus-skeleton-group--row .ajus-skeleton:not(.ajus-skeleton--avatar) {
    flex: 1 1 auto;
}

@keyframes ajus-skeleton-shimmer {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}