{"version":3,"sources":["../../../src/Badge/NumberBadge/NumberBadge.css.ts"],"names":["css","vars","variantMap","numberBadgeCSS"],"mappings":";AAAA,OAAS,OAAAA,MAAW,iBACpB,OAAS,QAAAC,MAAY,sBAEd,IAAMC,EAAa,CACxB,QAAS,CACP,QAAS,CACP,qBAAsBD,EAAK,SAAS,MAAM,eAC1C,UAAWA,EAAK,SAAS,MAAM,WACjC,EACA,UAAW,CACT,qBAAsBA,EAAK,SAAS,MAAM,sBAC1C,UAAWA,EAAK,SAAS,MAAM,OACjC,EACA,OAAQ,CACN,qBAAsBA,EAAK,SAAS,MAAM,wBAC1C,UAAWA,EAAK,SAAS,MAAM,IACjC,EACA,SAAU,CACR,qBAAsBA,EAAK,SAAS,MAAM,uBAC1C,UAAWA,EAAK,SAAS,MAAM,IACjC,EACA,kBAAmB,CACjB,qBAAsBA,EAAK,SAAS,MAAM,QAC1C,UAAWA,EAAK,SAAS,MAAM,IACjC,EACA,oBAAqB,CACnB,qBAAsBA,EAAK,SAAS,MAAM,QAC1C,UAAWA,EAAK,SAAS,MAAM,OACjC,EACA,iBAAkB,CAChB,qBAAsBA,EAAK,SAAS,MAAM,QAC1C,UAAWA,EAAK,SAAS,MAAM,UACjC,EACA,mBAAoB,CAClB,qBAAsBA,EAAK,SAAS,MAAM,QAC1C,UAAWA,EAAK,SAAS,MAAM,YACjC,CACF,EACA,KAAM,CACJ,MAAO,CACL,YAAa,GAAGA,EAAK,QAAQ,CAAG,CAAC,IAAIA,EAAK,QAAQ,EAAI,CAAC,GACvD,cAAe,OAEf,cAAeA,EAAK,SAAS,SAAS,EACtC,gBAAiBA,EAAK,WAAW,CAAC,EAClC,gBAAiBA,EAAK,WAAW,QACnC,EACA,OAAQ,CACN,YAAa,GAAGA,EAAK,QAAQ,IAAI,CAAC,IAAIA,EAAK,QAAQ,EAAI,CAAC,GACxD,cAAe,OAEf,cAAeA,EAAK,SAAS,OAC7B,gBAAiBA,EAAK,WAAW,CAAC,EAClC,gBAAiBA,EAAK,WAAW,QACnC,EACA,MAAO,CACL,YAAa,KAAKA,EAAK,QAAQ,EAAI,CAAC,GACpC,cAAe,OAEf,cAAeA,EAAK,SAAS,MAC7B,gBAAiBA,EAAK,WAAW,CAAG,EACpC,gBAAiBA,EAAK,WAAW,QACnC,CACF,CACF,EAEaE,EAAiBH,EAAI,CAChC,QAAS,eACT,cAAe,SACf,UAAW,SAGX,gBAAiB,0BACjB,MAAO,eAGP,QAAS,iBACT,SAAU,mBACV,SAAU,mBACV,WAAY,qBACZ,WAAY,qBAEZ,iBAAkB,CAChB,gBAAiBC,EAAK,SAAS,MAAM,WACrC,MAAOA,EAAK,SAAS,MAAM,YAC7B,EAEA,aAAcA,EAAK,QAAQ,IAC7B,CAAC","sourcesContent":["import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\n\nexport const variantMap = {\n  variant: {\n    primary: {\n      \"--background-color\": vars.semantic.color.surfaceInverse,\n      \"--color\": vars.semantic.color.textInverse,\n    },\n    secondary: {\n      \"--background-color\": vars.semantic.color.surfaceSlateSecondary,\n      \"--color\": vars.semantic.color.textSub,\n    },\n    accent: {\n      \"--background-color\": vars.semantic.color.surfaceHighlightPrimary,\n      \"--color\": vars.semantic.color.text,\n    },\n    critical: {\n      \"--background-color\": vars.semantic.color.surfaceCriticalPrimary,\n      \"--color\": vars.semantic.color.text,\n    },\n    \"primary-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.text,\n    },\n    \"secondary-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.textSub,\n    },\n    \"accent-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.textAccent,\n    },\n    \"critical-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.textCritical,\n    },\n  } as Record<string, Record<string, string>>,\n  size: {\n    small: {\n      \"--padding\": `${vars.spacing[\"1\"]} ${vars.spacing[\"15\"]}`,\n      \"--min-width\": \"20px\",\n      // label-xsmall\n      \"--font-size\": vars.fontSize[\"2xsmall\"],\n      \"--line-height\": vars.lineHeight[3],\n      \"--font-weight\": vars.fontWeight.semibold,\n    },\n    medium: {\n      \"--padding\": `${vars.spacing[\"05\"]} ${vars.spacing[\"15\"]}`,\n      \"--min-width\": \"20px\",\n      // label-small-bold\n      \"--font-size\": vars.fontSize.xsmall,\n      \"--line-height\": vars.lineHeight[4],\n      \"--font-weight\": vars.fontWeight.semibold,\n    },\n    large: {\n      \"--padding\": `0 ${vars.spacing[\"15\"]}`,\n      \"--min-width\": \"24px\",\n      // label-medium-bold\n      \"--font-size\": vars.fontSize.small,\n      \"--line-height\": vars.lineHeight[\"6\"],\n      \"--font-weight\": vars.fontWeight.semibold,\n    },\n  } as Record<string, Record<string, string>>,\n};\n\nexport const numberBadgeCSS = css({\n  display: \"inline-block\",\n  verticalAlign: \"middle\",\n  textAlign: \"center\",\n\n  // variant styles\n  backgroundColor: \"var(--background-color)\",\n  color: \"var(--color)\",\n\n  // size styles\n  padding: \"var(--padding)\",\n  minWidth: \"var(--min-width)\",\n  fontSize: \"var(--font-size)\",\n  lineHeight: \"var(--line-height)\",\n  fontWeight: \"var(--font-weight)\",\n\n  \"*:disabled > &\": {\n    backgroundColor: vars.semantic.color.surfaceSub,\n    color: vars.semantic.color.textDisabled,\n  },\n\n  borderRadius: vars.rounded.full,\n});\n"]}