/* Built from --headingColor rather than fixed greys: the token flips with the
   theme, so the placeholder is a faint tint of the text colour in light and
   dark mode alike. */
.mc-skeleton {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 6px;
    background-color: color-mix(in srgb, var(--headingColor) 9%, transparent);
}

/* The shimmer: a soft band sweeping left to right across the block. */
.mc-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--headingColor) 9%, transparent) 50%,
        transparent 100%
    );
    animation: mc-skeleton-shimmer 1.4s ease-in-out infinite;
}

.mc-skeleton.on-color { background-color: rgba(255, 255, 255, 0.22); }
.mc-skeleton.on-color::after {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
}

@keyframes mc-skeleton-shimmer {
    to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .mc-skeleton::after { animation: none; }
}

.mc-skeleton-table { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 8px; }
.mc-skeleton-table-row { display: flex; gap: 24px; padding: 0 12px; }
.mc-skeleton-table-row > .mc-skeleton { flex: 1 1 0; max-width: 100%; }
/* The "#" column is narrow in the real table, so it is here too. */
.mc-skeleton-table-row > .mc-skeleton:first-child { flex: 0 0 24px; }

.mc-skeleton-chart { display: flex; flex-direction: column; gap: 24px; padding: 12px; box-sizing: border-box; }
.mc-skeleton-chart-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    border-bottom: 1px solid color-mix(in srgb, var(--headingColor) 12%, transparent);
}