/*
    Styling for the LoadingPlaceholder component: a gray rounded block, under an optional small
    label, with a band of light sweeping across it from left to right.

    A page can set this custom property on an element around a placeholder without its own height:
    - --control-height: the block's height, as tall as the controls it stands in for.
*/
.loading-placeholder
{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;

    /* The label above the block, styled like a labeled control's label. */
    .loading-placeholder-label
    {
        color: var(--neutral-surface-low-emphasis-contrast-color);
        font-size: 0.8rem;
    }

    /* The block, with every placeholder's band of light sweeping across it as one. */
    .loading-placeholder-block
    {
        display: block;
        /* About a dropdown button's height by default, or the --control-height a page sets on an
           element around it for a row of controls that line up. */
        height: var(--control-height, 1.6rem);
        border-radius: 6px;
        /* A step lighter than a table header's background, so the block shows there too. */
        background-color: var(--neutral-high-emphasis-surface-color);
        /* The band of light: a gradient from transparent at its left end to a lighter surface color
           at its middle and back to transparent at its right end. */
        background-image: linear-gradient(
            to right,
            transparent 0%,
            var(--neutral-higher-emphasis-surface-color) 50%,
            transparent 100%);
        /* The band is half as wide as the window, as tall as the block, and fixed to the window, so
           every placeholder shows the part of one band that passes over it, and all of them shimmer
           as one. */
        background-size: 50vw 100%;
        background-repeat: no-repeat;
        background-attachment: fixed;
        /* The sweep's duration is a visual choice. */
        animation: loading_placeholder_shimmer 1.4s linear infinite;
    }
}

/* The band of light sweeps from beyond the window's left edge to beyond its right edge. It starts
   its own width (50vw) left of the window, so it enters from out of sight. */
@keyframes loading_placeholder_shimmer
{
    from
    {
        background-position: -50vw 0;
    }
    to
    {
        background-position: 100vw 0;
    }
}

/* The band stays still when the user's system asks for less motion. */
@media (prefers-reduced-motion: reduce)
{
    .loading-placeholder .loading-placeholder-block
    {
        animation: none;
        background-image: none;
    }
}