{"version":3,"file":"image.module.mjs","names":[],"sources":["../../../../package/common/image/image.module.pcss"],"sourcesContent":["/* Zero specificity, so a class that sizes the image wins here too, as CSS beats an img's attributes. */\n:where(.image-standIn) {\n  display: inline-block;\n  width: var(--custom-image-width, auto);\n  height: var(--custom-image-height, auto);\n  aspect-ratio: var(--custom-image-ratio, auto);\n  vertical-align: middle;\n}\n\n.image {\n  /* Out of the layout and of no size, so it holds no grid place and PanZoom does not measure it.\n     `!important` against the class that sizes the image. */\n  &-loading {\n    position: absolute !important;\n    width: 0 !important;\n    height: 0 !important;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  &-arrived {\n    animation: imageFadeIn 0.2s ease-out;\n  }\n\n  /* A small box of its own when nothing gives it a size, so a failed image still shows. */\n  &-fallback {\n    position: relative;\n    min-width: 2.5em;\n    min-height: 2.5em;\n    border-radius: var(--default-border-radius);\n    background: var(--background-accent);\n    color: var(--text-dark);\n  }\n\n  &-fallbackIcon {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.5em;\n  }\n}\n\n@keyframes imageFadeIn {\n  from {\n    opacity: 0;\n  }\n}\n"],"mappings":""}