/*
 * <x-loading>: M3 Expressive's loading indicator, a shape that morphs through seven Expressive
 * shapes while it turns, for a wait with no known length.
 *
 * The drawing is resources/svg/loading-indicator/, ported from androidx Compose Material 3's
 * LoadingIndicator in bin/loading-indicator.mjs (Apache-2.0): LoadingIndicatorTokens' 38px
 * indicator in a 48px container, which is the size here unless `size` (`--md-loading-size`, 24 to
 * 240px, M3's responsive range) or the caller's CSS sizes it; the SVG scales with its box, so the
 * container and the shape keep their ratio at every size. It is
 * drawn in the text colour, `primary` (ActiveIndicatorColor) unless the caller colours it;
 * `contained` puts it on a `primary-container` circle in `on-primary-container`
 * (ContainedContainerColor, ContainedIndicatorColor), for a spinner over content.
 *
 * The animated drawing is SMIL, so it runs without script. Under `prefers-reduced-motion` the
 * still drawing of the same shape takes its place: the view renders both, and this file shows one.
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@layer material.components {
    [data-md-loading] {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        inline-size: var(--md-loading-size, 48px);
        block-size: var(--md-loading-size, 48px);
        color: var(--md-sys-color-primary);

        & > svg {
            inline-size: 100%;
            block-size: 100%;
        }

        & > [data-md-loading-still] {
            display: none;
        }

        @media (prefers-reduced-motion: reduce) {
            & > [data-md-loading-animated] {
                display: none;
            }

            & > [data-md-loading-still] {
                display: block;
            }
        }
    }

    [data-md-loading][data-md-contained] {
        border-radius: var(--md-sys-shape-corner-full);
        background-color: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);
    }
}