@layer components{:where(.x-asset-loading-frame){border-radius:inherit;background:0 0;place-items:center;min-width:0;min-height:0;display:grid;position:relative;overflow:hidden}.x-asset-loading-frame[data-loading]{background:color-mix(in oklch, var(--surface-raised), black 35%)}.x-asset-loading-frame:before{content:"";z-index:2;border-radius:inherit;background:linear-gradient(100deg, transparent 20%, color-mix(in oklch, var(--alpha), transparent 84%) 50%, transparent 80%);opacity:0;pointer-events:none;position:absolute;inset:0;transform:translate(-105%)}.x-asset-loading-frame[data-loading]:before{opacity:1;animation:x-motion-shimmer var(--motion-shimmer-duration) ease-in-out infinite}.x-asset-loading-frame[data-failed]{background:color-mix(in oklch, var(--danger), transparent 92%);box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--danger), transparent 74%)}.x-asset-loading-frame[data-failed]:before{opacity:0;animation:none}.x-asset-loading-frame>:is(img,video,audio){z-index:1;opacity:0;transition:opacity var(--motion-fast) ease;position:relative}.x-asset-loading-frame>[data-loading-visible],.x-asset-loading-frame[data-loaded]>:is(img,video,audio):not([data-hidden]){opacity:1}}