@layer infine.components {
/* ===========================================================
   Placeholders for an answer on its way — `common/skeleton`,
   shared by every module.
   =========================================================== */

/* Still for the first 300 ms, then a sheen: an answer inside that window
   replaces a still shape and nothing is seen to move. The delay is the
   same number as `common/pending-motion-delay-ms`; the minimum the sheen
   then stays is enforced there, not here. The colour is the house hairline
   blue and never a data colour, so a placeholder bar cannot be read as a
   value. Component stylesheets load after this one, so where a component
   rule sets the same property on the same element, the component wins. */
.infine-sk {
    position: relative;
    display: inline-block;
    overflow: hidden;
    background: var(--infine-blue-light-fade);
    border-radius: 4px;
    vertical-align: middle;
}

.infine-sk::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
    animation: infine-sk-sheen 1.5s ease-in-out 300ms infinite;
}

@keyframes infine-sk-sheen {
    to { transform: translateX(100%); }
}

/* Read by screen readers and drawn nowhere: the words a placeholder carries
   for sighted readers are announced from here. */
.infine-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

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