/**
 * Shared skeleton loading element.
 * Drop a `<div class="skeleton" role="status" aria-busy="true"></div>` (or
 * multiple) into any block while data is fetching.
 */

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

 /* Singular, horizontal loader */
.skeleton {
    display: inline-block;
    height: 0.75rem;
    width: 100%;
    border-radius: 0.25rem;
    background: linear-gradient(
        90deg,
        var(--wp--preset--color--gray-50) 25%,
        var(--wp--preset--color--gray-100) 50%,
        var(--wp--preset--color--gray-50) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s linear infinite;
}

.skeleton--pill {
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 9999px;
}

/* Singular, circular loaders */
.skeleton-circular
.skeleton--circular {
    display: inline-block;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: linear-gradient(
        90deg,
        var(--wp--preset--color--gray-50) 25%,
        var(--wp--preset--color--gray-100) 50%,
        var(--wp--preset--color--gray-50) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}

.skeleton--btn,
.skeleton-btn {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: linear-gradient(
        90deg,
        var(--wp--preset--color--gray-50) 25%,
        var(--wp--preset--color--gray-100) 50%,
        var(--wp--preset--color--gray-50) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}

/* Wrapper */
.skeletons {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}