{"version":3,"sources":["../../src/Checkbox/Checkbox.css.ts"],"names":["css","vars","checkboxLabelCSS","iconPosition","checkboxIconCSS"],"mappings":";AAAA,OAAS,OAAAA,MAAW,iBACpB,OAAS,QAAAC,MAAY,sBAGd,IAAMC,EAAmB,CAAC,CAAE,aAAAC,CAAa,IAC9CH,EAAI,CACF,QAAS,cACT,WAAY,SACZ,cAAeG,IAAiB,QAAU,cAAgB,MAC1D,eAAgBA,IAAiB,QAAU,gBAAkB,aAE7D,IAAKF,EAAK,QAAQ,CAAC,EAEnB,QAAS,GAAGA,EAAK,QAAQ,IAAI,CAAC,KAC9B,MAAOE,IAAiB,QAAU,OAAS,cAC3C,OAAQ,UAER,8CAA+C,CAC7C,MAAOF,EAAK,SAAS,MAAM,YAC7B,EAEA,0CAA2C,CACzC,QAAS,EACX,EAEA,uBAAwB,CACtB,OAAQ,aACV,EAEA,UAAW,CACT,wDAAyD,CACvD,aAAc,cACd,gBAAiBA,EAAK,SAAS,MAAM,kBACvC,EAEA,0DAA2D,CACzD,aAAcA,EAAK,SAAS,MAAM,WACpC,CACF,CACF,CAAC,EAEUG,EAAkBJ,EAAI,CACjC,QAAS,cACT,WAAY,SACZ,eAAgB,SAEhB,MAAO,OACP,OAAQ,OAER,gBAAiBC,EAAK,SAAS,MAAM,gBACrC,aAAc,QACd,MAAOA,EAAK,SAAS,MAAM,YAE3B,QAAS,aAAaA,EAAK,SAAS,MAAM,aAAa,GACvD,cAAe,OAEf,WAAY,qBAEZ,OAAQ,UAER,sBAAuB,CACrB,QAAS,MACX,EAEA,6BAA8B,CAC5B,gBAAiBA,EAAK,SAAS,MAAM,cACrC,aAAc,cAEd,sBAAuB,CACrB,QAAS,OACX,CACF,EAEA,8BAA+B,CAC7B,QAAS,GACT,OAAQ,cACR,MAAOA,EAAK,SAAS,MAAM,YAC7B,EAEA,4CAA6C,CAC3C,gBAAiBA,EAAK,SAAS,MAAM,uBACvC,EAEA,kDAAmD,CACjD,aAAc,cACd,gBAAiBA,EAAK,SAAS,MAAM,kBACvC,EAEA,oDAAqD,CACnD,aAAcA,EAAK,SAAS,MAAM,cAClC,gBAAiBA,EAAK,SAAS,MAAM,oBACvC,CACF,CAAC","sourcesContent":["import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { CheckboxLabelProps } from \"./Checkbox.types\";\n\nexport const checkboxLabelCSS = ({ iconPosition }: Pick<CheckboxLabelProps, \"iconPosition\">) =>\n  css({\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    flexDirection: iconPosition === \"right\" ? \"row-reverse\" : \"row\",\n    justifyContent: iconPosition === \"right\" ? \"space-between\" : \"flex-start\",\n\n    gap: vars.spacing[2],\n\n    padding: `${vars.spacing[\"05\"]} 0`,\n    width: iconPosition === \"right\" ? \"100%\" : \"fit-content\",\n    cursor: \"pointer\",\n\n    \"&:has(input:disabled) [data-checkbox-label]\": {\n      color: vars.semantic.color.textDisabled,\n    },\n\n    \"input:disabled + .clay-checkbox-wrapper\": {\n      opacity: 0.3,\n    },\n\n    \":has(input:disabled)\": {\n      cursor: \"not-allowed\",\n    },\n\n    \"&:hover\": {\n      \"input:checked:not(:disabled) + .clay-checkbox-wrapper\": {\n        outlineColor: \"transparent\",\n        backgroundColor: vars.semantic.color.actionPrimaryHover,\n      },\n\n      \"input:not(:checked, :disabled) + .clay-checkbox-wrapper\": {\n        outlineColor: vars.semantic.color.borderHover,\n      },\n    },\n  });\n\nexport const checkboxIconCSS = css({\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n\n  width: \"16px\",\n  height: \"16px\",\n\n  backgroundColor: vars.semantic.color.actionSecondary,\n  borderRadius: \"3.5px\",\n  color: vars.semantic.color.iconInverse,\n\n  outline: `1px solid ${vars.semantic.color.borderMinimal}`,\n  outlineOffset: \"-1px\",\n\n  transition: \"all ease-out 100ms\",\n\n  cursor: \"pointer\",\n\n  \".clay-checkbox-icon\": {\n    display: \"none\",\n  },\n\n  \"&:where(input:checked + &)\": {\n    backgroundColor: vars.semantic.color.actionPrimary,\n    outlineColor: \"transparent\",\n\n    \".clay-checkbox-icon\": {\n      display: \"block\",\n    },\n  },\n\n  \"&:where(input:disabled + &)\": {\n    opacity: 0.3,\n    cursor: \"not-allowed\",\n    color: vars.semantic.color.iconDisabled,\n  },\n\n  \"&:where(input:disabled:not(:checked) + &)\": {\n    backgroundColor: vars.semantic.color.actionSecondaryDisabled,\n  },\n\n  \"&:where(input:checked:not(:disabled) + &):hover\": {\n    outlineColor: \"transparent\",\n    backgroundColor: vars.semantic.color.actionPrimaryHover,\n  },\n\n  \"&:where(input:not(:checked, :disabled) + &):hover\": {\n    outlineColor: vars.semantic.color.borderMinimal,\n    backgroundColor: vars.semantic.color.actionSecondaryHover,\n  },\n});\n"]}