{"version":3,"file":"aspect-ratio.mjs","names":[],"sources":["../../src/patterns/aspect-ratio.js"],"sourcesContent":["import { getPatternStyles, patternFns } from '../helpers.js';\nimport { css } from '../css/index.js';\n\nconst aspectRatioConfig = {\ntransform(props, { map }) {\n  const { ratio = 4 / 3, ...rest } = props;\n  return {\n    position: \"relative\",\n    _before: {\n      content: `\"\"`,\n      display: \"block\",\n      height: \"0\",\n      paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)\n    },\n    \"&>*\": {\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      overflow: \"hidden\",\n      position: \"absolute\",\n      inset: \"0\",\n      width: \"100%\",\n      height: \"100%\"\n    },\n    \"&>img, &>video\": {\n      objectFit: \"cover\"\n    },\n    ...rest\n  };\n}}\n\nexport const getAspectRatioStyle = (styles = {}) => {\n  const _styles = getPatternStyles(aspectRatioConfig, styles)\n  return aspectRatioConfig.transform(_styles, patternFns)\n}\n\nexport const aspectRatio = (styles) => css(getAspectRatioStyle(styles))\naspectRatio.raw = getAspectRatioStyle"],"mappings":";;;AAGA,MAAM,oBAAoB,EAC1B,UAAU,OAAO,EAAE,OAAO;CACxB,MAAM,EAAE,QAAQ,IAAI,GAAG,GAAG,SAAS;CACnC,OAAO;EACL,UAAU;EACV,SAAS;GACP,SAAS;GACT,SAAS;GACT,QAAQ;GACR,eAAe,IAAI,QAAQ,MAAM,GAAG,IAAI,IAAI,IAAI,EAAE;EACpD;EACA,OAAO;GACL,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,UAAU;GACV,UAAU;GACV,OAAO;GACP,OAAO;GACP,QAAQ;EACV;EACA,kBAAkB,EAChB,WAAW,QACb;EACA,GAAG;CACL;AACF,EAAC;AAED,MAAa,uBAAuB,SAAS,CAAC,MAAM;CAClD,MAAM,UAAU,iBAAiB,mBAAmB,MAAM;CAC1D,OAAO,kBAAkB,UAAU,SAAS,UAAU;AACxD;AAEA,MAAa,eAAe,WAAW,IAAI,oBAAoB,MAAM,CAAC;AACtE,YAAY,MAAM"}