{"version":3,"sources":["../../src/Skeleton/Skeleton.styles.ts"],"names":["css","keyframes","vars","horizontalSkeletonKeyframes","width","diagonalSkeletonKeyframes","horizontalCSS","height","duration","diagonalCSS"],"mappings":";AAAA,OAAS,OAAAA,EAAK,aAAAC,MAAiB,iBAC/B,OAAS,QAAAC,MAAY,sBAIrB,IAAMC,EAA+BC,GAAkCH;AAAA;AAAA,0BAE7CG,CAAK;AAAA;AAAA;AAAA,8BAGDA,CAAK;AAAA;AAAA,EAI7BC,EAA6BD,GAAmCH;AAAA;AAAA,qBAEjDG,CAAK,cAAcA,CAAK;AAAA;AAAA;AAAA,yBAGpBA,CAAK;AAAA;AAAA,IAIjBE,EAAgB,CAAC,CAC5B,MAAAF,EACA,OAAAG,EACA,SAAAC,CACF,IACER,EAAI,CACF,MAAAI,EACA,OAAAG,EACA,gBAAiBL,EAAK,SAAS,MAAM,WACrC,gBAAiB,GAAG,0BAA0BA,EAAK,SAAS,MAAM,UAAU,KAAKA,EAAK,SAAS,MAAM,OAAO,KAAKA,EAAK,SAAS,MAAM,UAAU,GAAG,GAClJ,iBAAkB,YAElB,UAAW,GAAGC,EAA4BC,CAAK,CAAC,IAAII,CAAQ,wBAC9D,CAAC,EAEUC,EAAc,CAAC,CAC1B,MAAAL,EACA,OAAAG,EACA,SAAAC,CACF,IACER,EAAI,CACF,MAAAI,EACA,OAAAG,EACA,WAAYL,EAAK,SAAS,MAAM,WAChC,SAAU,WACV,SAAU,SAEV,WAAY,CACV,QAAS,KACT,UAAW,gBACX,gBAAiB,0BAA0BA,EAAK,SAAS,MAAM,UAAU,SAASA,EAAK,SAAS,MAAM,OAAO,SAASE,CAAK,QAAQF,EAAK,SAAS,MAAM,UAAU,IAAIE,CAAK,IAC1K,SAAU,WACV,iBAAkB,WAClB,KAAM,UAAUA,CAAK,YAAYA,CAAK,eACtC,MAAO,QAAQA,CAAK,QACpB,OAAQ,OACR,UAAW,GAAGC,EAA0BD,CAAK,CAAC,IAAII,CAAQ,uBAC5D,CACF,CAAC","sourcesContent":["import { css, keyframes } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { CSSProperties } from \"react\";\nimport type { SkeletonProps } from \".\";\n\nconst horizontalSkeletonKeyframes = (width: CSSProperties[\"width\"]) => keyframes`\n0% {\n  background-position: -${width} 0;\n}\n100% {\n  background-position: calc(${width} + 100%) 0;\n}\n`;\n\nconst diagonalSkeletonKeyframes = (width?: CSSProperties[\"width\"]) => keyframes`\n  0% {\n      left: -(calc(${width}/2) + calc(${width} * 2));\n    }\n    100% {\n      left: calc(3/2 * ${width});\n    }\n  `;\n\nexport const horizontalCSS = ({\n  width,\n  height,\n  duration,\n}: Pick<SkeletonProps<\"div\">, \"width\" | \"height\" | \"duration\">) =>\n  css({\n    width,\n    height,\n    backgroundColor: vars.semantic.color.surfaceSub,\n    backgroundImage: `${`linear-gradient(90deg, ${vars.semantic.color.surfaceSub}, ${vars.semantic.color.surface}, ${vars.semantic.color.surfaceSub})`}`,\n    backgroundRepeat: \"no-repeat\",\n\n    animation: `${horizontalSkeletonKeyframes(width)} ${duration} ease-in-out infinite;`,\n  });\n\nexport const diagonalCSS = ({\n  width,\n  height,\n  duration,\n}: Pick<SkeletonProps<\"div\">, \"width\" | \"height\" | \"duration\">) =>\n  css({\n    width,\n    height,\n    background: vars.semantic.color.surfaceSub,\n    position: \"relative\",\n    overflow: \"hidden\",\n\n    \"&:before\": {\n      content: '\"\"',\n      transform: \"skewX(-45deg)\",\n      backgroundImage: `linear-gradient(90deg, ${vars.semantic.color.surfaceSub} 0px, ${vars.semantic.color.surface} calc(${width}/2), ${vars.semantic.color.surfaceSub} ${width})`,\n      position: \"absolute\",\n      backgroundRepeat: \"repeat-x\",\n      left: `calc(((${width} / 2) + (${width} * 2)) * -1)`,\n      width: `calc(${width} * 2)`,\n      height: \"100%\",\n      animation: `${diagonalSkeletonKeyframes(width)} ${duration} ease-in-out infinite`,\n    },\n  });\n"]}