{"version":3,"file":"gifPreview.module.mjs","names":[],"sources":["../../../../../../package/common/klipyPicker/components/gifPreview/gifPreview.module.pcss"],"sourcesContent":[".gifPreview {\n  width: min(420px, 90vw);\n  aspect-ratio: 1;\n  display: flex;\n  flex-wrap: wrap;\n\n  --gif-preview-gap-size: 5px;\n\n  gap: var(--gif-preview-gap-size);\n  position: relative;\n  justify-content: center;\n  overflow: auto;\n\n  &-image {\n    background-position: center;\n    background-size: cover;\n    width: 100%;\n    height: 100%;\n\n    &-container {\n      aspect-ratio: 1;\n      background: linear-gradient(\n        45deg,\n        var(--primary-color) 10%,\n        var(--primary-lighter),\n        var(--primary-accent),\n        var(--primary-color) 85%\n      );\n      background-size: 500% 500%;\n      animation: gradientBottomLeftToTopRight 1s infinite linear;\n      border-radius: var(--default-border-radius);\n      overflow: hidden;\n      width: min(calc(140px - var(--gif-preview-gap-size)), calc(33.3% - var(--gif-preview-gap-size)));\n    }\n  }\n}\n\n/* The gradient stops sweeping and stays a plain block, which still reads as \"loading\". */\n@media (prefers-reduced-motion: reduce) {\n  .gifPreview-image-container {\n    animation: none;\n  }\n}\n"],"mappings":""}