{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/LogoMarquee/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nconst slide = keyframes`\n  to {\n    transform: translateX(calc(-100% - var(--logo-marquee-gap)));\n  }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  caption: css`\n    margin: 0;\n    font-size: ${cssVar.fontSizeSM};\n    color: ${cssVar.colorTextTertiary};\n\n    a {\n      color: inherit;\n      text-decoration: none;\n      transition: color 140ms ease;\n    }\n\n    a:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  item: css`\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    font-size: ${cssVar.fontSize};\n    color: ${cssVar.colorTextTertiary};\n    white-space: nowrap;\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    align-items: center;\n\n    inline-size: 100%;\n  `,\n  track: css`\n    display: flex;\n    flex: none;\n    gap: var(--logo-marquee-gap);\n    align-items: center;\n\n    animation: ${slide} var(--logo-marquee-duration) linear infinite;\n\n    @media (prefers-reduced-motion: reduce) {\n      animation: none;\n    }\n  `,\n  viewport: css`\n    overflow: hidden;\n    display: flex;\n    gap: var(--logo-marquee-gap);\n\n    inline-size: min(100%, var(--logo-marquee-max-width));\n\n    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);\n\n    &:hover > * {\n      animation-play-state: paused;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAM,QAAQ,SAAS;;;;;AAMvB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;iBAEG,OAAO,WAAW;aACtB,OAAO,kBAAkB;;;;;;;;;eASvB,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;;iBAKM,OAAO,SAAS;aACpB,OAAO,kBAAkB;;;CAGpC,MAAM,GAAG;;;;;;;;CAQT,OAAO,GAAG;;;;;;iBAMK,MAAM;;;;;;CAMrB,UAAU,GAAG;;;;;;;;;;;;;AAaf,EAAE"}