{"version":3,"sources":["../../../src/Button/SocialLoginButton/SocialLoginButton.css.ts"],"names":["css","vars","baseCss","fullWidthCss","withTextCss","sizeStyles","socialVariants"],"mappings":";AAAA,OAAS,OAAAA,MAAW,iBACpB,OAAS,QAAAC,MAAY,sBAEd,IAAMC,EAAUF,EAAI,CACzB,QAAS,OACT,WAAY,SACZ,eAAgB,SAEhB,OAAQ,UACR,UAAW,CACT,QAAS,MACX,CACF,CAAC,EAEYG,EAAeH,EAAI,CAC9B,MAAO,MACT,CAAC,EAEYI,EAAcJ,EAAI,CAC7B,IAAKC,EAAK,QAAQ,CAAC,CACrB,CAAC,EAEYI,EAAa,CACxB,OAAQL;AAAA,eACKC,EAAK,QAAQ,CAAC,CAAC,IAAIA,EAAK,QAAQ,CAAC,CAAC;AAAA,qBAC5BA,EAAK,QAAQ,MAAM;AAAA,MAClCA,EAAK,SAAS,WAAW,mBAAmB,CAAC;AAAA;AAAA;AAAA;AAAA,IAKjD,MAAOD;AAAA,eACMC,EAAK,QAAQ,CAAC,CAAC;AAAA,qBACTA,EAAK,QAAQ,MAAM;AAAA,MAClCA,EAAK,SAAS,WAAW,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA,IAKhD,cAAeD;AAAA,eACFC,EAAK,QAAQ,EAAE,CAAC;AAAA,qBACVA,EAAK,QAAQ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,IAMpC,aAAcD;AAAA,eACDC,EAAK,QAAQ,CAAC,CAAC;AAAA,qBACTA,EAAK,QAAQ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAMtC,EAEaK,EAAiB,CAC5B,MAAON,EAAI,CACT,MAAO,OACP,WAAY,UACZ,UAAW,CACT,WACE,kFACJ,EACA,WAAY,CACV,WACE,kFACJ,CACF,CAAC,EACD,MAAOA,EAAI,CACT,MAAO,sBACP,WAAY,UACZ,UAAW,CACT,WACE,kFACJ,EACA,WAAY,CACV,WACE,kFACJ,CACF,CAAC,EACD,OAAQA,EAAI,CACV,MAAOC,EAAK,SAAS,MAAM,cAC3B,WAAYA,EAAK,SAAS,MAAM,gBAChC,UAAW,mBAAmBA,EAAK,SAAS,MAAM,MAAM,GACxD,UAAW,CACT,UAAW,mBAAmBA,EAAK,SAAS,MAAM,WAAW,EAC/D,EACA,WAAY,CACV,UAAW,mBAAmBA,EAAK,SAAS,MAAM,SAAS,EAC7D,CACF,CAAC,EACD,MAAOD,EAAI,CACT,MAAOC,EAAK,SAAS,MAAM,cAC3B,WAAYA,EAAK,SAAS,MAAM,gBAChC,IAAK,CACH,MAAO,MACT,EAEA,mCAAoC,CAClC,IAAK,CACH,MAAO,MACT,CACF,EACA,UAAW,mBAAmBA,EAAK,SAAS,MAAM,MAAM,GACxD,UAAW,CACT,UAAW,mBAAmBA,EAAK,SAAS,MAAM,WAAW,EAC/D,EACA,WAAY,CACV,UAAW,mBAAmBA,EAAK,SAAS,MAAM,SAAS,EAC7D,CACF,CAAC,EACD,KAAMD,EAAI,CACR,MAAO,OACP,WAAY,UACZ,UAAW,CACT,WACE,kFACJ,EACA,WAAY,CACV,WACE,kFACJ,CACF,CAAC,EACD,SAAUA,EAAI,CACZ,MAAO,OACP,WAAY,UACZ,UAAW,CACT,WACE,kFACJ,EACA,WAAY,CACV,WACE,kFACJ,CACF,CAAC,CACH","sourcesContent":["import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\n\nexport const baseCss = css({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n\n  cursor: \"pointer\",\n  \"&:focus\": {\n    outline: \"none\",\n  },\n});\n\nexport const fullWidthCss = css({\n  width: \"100%\",\n});\n\nexport const withTextCss = css({\n  gap: vars.spacing[2],\n});\n\nexport const sizeStyles = {\n  medium: css`\n    padding: ${vars.spacing[2]} ${vars.spacing[3]};\n    border-radius: ${vars.rounded.medium};\n    ${vars.semantic.typography[\"label-medium-bold\"]}\n    svg {\n      font-size: 20px;\n    }\n  `,\n  large: css`\n    padding: ${vars.spacing[3]};\n    border-radius: ${vars.rounded.medium};\n    ${vars.semantic.typography[\"label-large-bold\"]}\n    svg {\n      font-size: 24px;\n    }\n  `,\n  \"medium-icon\": css`\n    padding: ${vars.spacing[25]};\n    border-radius: ${vars.rounded.full};\n\n    svg {\n      font-size: 20px;\n    }\n  `,\n  \"large-icon\": css`\n    padding: ${vars.spacing[3]};\n    border-radius: ${vars.rounded.full};\n\n    svg {\n      font-size: 24px;\n    }\n  `,\n};\n\nexport const socialVariants = {\n  naver: css({\n    color: \"#FFF\",\n    background: \"#03C75A\",\n    \"&:hover\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), #03C75A\",\n    },\n    \"&:active\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), #03C75A\",\n    },\n  }),\n  kakao: css({\n    color: \"rgba(0, 0, 0, 0.85)\",\n    background: \"#FEE500\",\n    \"&:hover\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), #FEE500\",\n    },\n    \"&:active\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 100%), #FEE500\",\n    },\n  }),\n  google: css({\n    color: vars.semantic.color.textSecondary,\n    background: vars.semantic.color.actionSecondary,\n    boxShadow: `inset 0 0 0 1px ${vars.semantic.color.border}`,\n    \"&:hover\": {\n      boxShadow: `inset 0 0 0 1px ${vars.semantic.color.borderHover}`,\n    },\n    \"&:active\": {\n      boxShadow: `inset 0 0 0 1px ${vars.semantic.color.borderSub}`,\n    },\n  }),\n  apple: css({\n    color: vars.semantic.color.textSecondary,\n    background: vars.semantic.color.actionSecondary,\n    svg: {\n      color: \"#000\",\n    },\n    // 애플 로고 다크모드 대응\n    '*[data-clay-theme=\"dark-only\"] &': {\n      svg: {\n        color: \"#FFF\",\n      },\n    },\n    boxShadow: `inset 0 0 0 1px ${vars.semantic.color.border}`,\n    \"&:hover\": {\n      boxShadow: `inset 0 0 0 1px ${vars.semantic.color.borderHover}`,\n    },\n    \"&:active\": {\n      boxShadow: `inset 0 0 0 1px ${vars.semantic.color.borderSub}`,\n    },\n  }),\n  line: css({\n    color: \"#FFF\",\n    background: \"#06C755\",\n    \"&:hover\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), #06C755\",\n    },\n    \"&:active\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), #06C755\",\n    },\n  }),\n  facebook: css({\n    color: \"#FFF\",\n    background: \"#1877F2\",\n    \"&:hover\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), #1877F2\",\n    },\n    \"&:active\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), #1877F2\",\n    },\n  }),\n};\n"]}