{"version":3,"sources":["../../src/Switch/Switch.css.ts"],"names":["css","vars","switchButtonCSS"],"mappings":";AAAA,OAAS,OAAAA,MAAW,iBACpB,OAAS,QAAAC,MAAY,sBAEd,IAAMC,EAAkBF,EAAI,CACjC,SAAU,WACV,QAAS,eACT,MAAO,OACP,OAAQ,OACR,QAAS,MACT,SAAU,SAEV,gBAAiBC,EAAK,SAAS,MAAM,mBACrC,aAAc,OACd,WAAY,oBAEZ,OAAQ,UAER,6BAA8B,CAC5B,gBAAiBA,EAAK,SAAS,MAAM,cACrC,QAAS,GACT,OAAQ,aACV,EAEA,iCAAkC,CAChC,gBAAiBA,EAAK,SAAS,MAAM,uBACvC,EAEA,mCAAoC,CAClC,gBAAiBA,EAAK,SAAS,MAAM,cAErC,UAAW,CACT,gBAAiBA,EAAK,SAAS,MAAM,kBACvC,CACF,EAEA,oBAAqB,CACnB,WAAY,CACV,KAAM,mBACR,CACF,EAEA,qBAAsB,CACpB,gBAAiBA,EAAK,SAAS,MAAM,2BACrC,OAAQ,aACV,EAEA,YAAa,CACX,SAAU,WACV,QAAS,KACT,KAAM,MAEN,MAAO,OACP,OAAQ,OACR,gBAAiBA,EAAK,SAAS,MAAM,QACrC,UAAW,sCACX,aAAc,OAEd,WAAY,mBACd,CACF,CAAC","sourcesContent":["import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\n\nexport const switchButtonCSS = css({\n  position: \"relative\",\n  display: \"inline-block\",\n  width: \"40px\",\n  height: \"24px\",\n  padding: \"2px\",\n  overflow: \"hidden\",\n\n  backgroundColor: vars.semantic.color.actionPrimaryTonal,\n  borderRadius: \"50px\",\n  transition: \"all 0.1s ease-out\",\n\n  cursor: \"pointer\",\n\n  \"input:checked:disabled + &\": {\n    backgroundColor: vars.semantic.color.actionPrimary,\n    opacity: 0.3,\n    cursor: \"not-allowed\",\n  },\n\n  \"input:not(:disabled) + &:hover\": {\n    backgroundColor: vars.semantic.color.actionPrimaryTonalHover,\n  },\n\n  \"input:not(:disabled):checked + &\": {\n    backgroundColor: vars.semantic.color.actionPrimary,\n\n    \"&:hover\": {\n      backgroundColor: vars.semantic.color.actionPrimaryHover,\n    },\n  },\n\n  \"input:checked + &\": {\n    \"&:before\": {\n      left: \"calc(100% - 22px)\",\n    },\n  },\n\n  \"input:disabled + &\": {\n    backgroundColor: vars.semantic.color.actionPrimaryTonalDisabled,\n    cursor: \"not-allowed\",\n  },\n\n  \"&::before\": {\n    position: \"absolute\",\n    content: \"''\",\n    left: \"2px\",\n\n    width: \"20px\",\n    height: \"20px\",\n    backgroundColor: vars.semantic.color.surface,\n    boxShadow: \"0px 3px 8px 0px rgba(0, 0, 0, 0.15)\",\n    borderRadius: \"100%\",\n\n    transition: \"all 0.1s ease-out\",\n  },\n});\n"]}