/*
 * The grid skeleton's look. Painted from the theme's own tokens so light and dark both come
 * for free, with the shimmer as a moving highlight rather than a colour of its own.
 * Behaviour lives in grid-skeleton.js.
 */

.cmis-grid-loading { position: relative; min-height: 220px; }

.cmis-grid-skeleton {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    background: var(--vz-secondary-bg);
    border-radius: inherit;
    opacity: 1;
    transition: opacity .25s ease;
    pointer-events: none;
}

.cmis-grid-skeleton.is-done { opacity: 0; }

.cmis-skel-bar {
    display: block;
    height: 16px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        var(--vz-tertiary-bg) 25%,
        var(--vz-border-color) 42%,
        var(--vz-tertiary-bg) 60%);
    background-size: 220% 100%;
    animation: cmisSkelShimmer 1.3s ease-in-out infinite;
}

.cmis-skel-bar.is-head {
    height: 26px;
    width: 100%;
    opacity: .85;
}

/*  Rows shimmer slightly out of phase, or the whole block pulses like one object. */
.cmis-skel-bar:nth-child(2) { animation-delay: .08s; }
.cmis-skel-bar:nth-child(3) { animation-delay: .16s; }
.cmis-skel-bar:nth-child(4) { animation-delay: .24s; }
.cmis-skel-bar:nth-child(5) { animation-delay: .32s; }
.cmis-skel-bar:nth-child(6) { animation-delay: .40s; }
.cmis-skel-bar:nth-child(7) { animation-delay: .48s; }

@keyframes cmisSkelShimmer {
    0%   { background-position: 180% 0; }
    100% { background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cmis-skel-bar { animation: none; }
}