{"version":3,"sources":["styles.js"],"names":["inputLoadingAnimation","keyframes","StyledErrorMessage","styled","span","Colors","StyledIconError","StyledIconLoading","Input","input","disabled","loading","error","success"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,qBAAqB,OAAGC,2BAAH,oBAA3B;;AAMO,IAAMC,kBAAkB,GAAGC,6BAAOC,IAAV,qBACpBC,mBAAO,SAAP,CADoB,CAAxB;;;;AAUA,IAAMC,eAAe,GAAGH,6BAAOC,IAAV,qBACfC,mBAAO,SAAP,CADe,EAmBAA,mBAAO,SAAP,CAnBA,CAArB;;;;AAuBA,IAAME,iBAAiB,GAAGJ,6BAAOC,IAAV,qBAaNC,mBAAO,eAAP,CAbM,EAcNA,mBAAO,UAAP,CAdM,EAebL,qBAfa,CAAvB;;;;AAmBA,IAAMQ,KAAK,GAAGL,6BAAOM,KAAV,qBAEIJ,mBAAO,eAAP,CAFJ,EAIPA,mBAAO,eAAP,CAJO,EAiBLA,mBAAO,eAAP,CAjBK,EAoBd;AAAA,MAAGK,QAAH,QAAGA,QAAH;AAAA,SAAkBA,QAAQ,2BACjBL,mBAAO,eAAP,CADiB,sCAENA,mBAAO,cAAP,CAFM,kCAGVA,mBAAO,eAAP,CAHU,8EAMbA,mBAAO,eAAP,CANa,aAA1B;AAAA,CApBc,EA6Bd;AAAA,MAAGM,OAAH,SAAGA,OAAH;AAAA,SAAiBA,OAAO,2BACfN,mBAAO,gBAAP,CADe,sCAEJA,mBAAO,SAAP,CAFI,kCAGRA,mBAAO,gBAAP,CAHQ,uEAMXA,mBAAO,gBAAP,CANW,aAAxB;AAAA,CA7Bc,EAsCd;AAAA,MAAGO,KAAH,SAAGA,KAAH;AAAA,SAAeA,KAAK,2BACXP,mBAAO,SAAP,CADW,kCAEJA,mBAAO,SAAP,CAFI,oDAIPA,mBAAO,SAAP,CAJO,aAApB;AAAA,CAtCc,EA6Cd;AAAA,MAAGQ,OAAH,SAAGA,OAAH;AAAA,SAAiBA,OAAO,2BACfR,mBAAO,WAAP,CADe,kCAERA,mBAAO,WAAP,CAFQ,oDAIXA,mBAAO,WAAP,CAJW,aAAxB;AAAA,CA7Cc,CAAX;;;eAsDQG,K","sourcesContent":["import styled, { keyframes } from 'styled-components'\nimport Colors from '../Colors'\n\nconst inputLoadingAnimation = keyframes`\n  to {\n    transform: rotate(360deg);\n  }\n`\n\nexport const StyledErrorMessage = styled.span`\n  color: ${Colors['Red-600']};\n  top: 45px;\n  position: absolute;\n  width: 100%;\n  overflow: hidden;\n  height: 15px;\n  font-size: 12px;\n`\n\nexport const StyledIconError = styled.span`\n    color: ${Colors['Red-700']};\n    top: 45px;\n    position: absolute;\n    width: 100%;\n    :before {\n        content: '!';\n        color: #fff ;\n        padding-left: 6px;\n        box-sizing: border-box;\n        position: absolute;\n        top: -21px;;\n        right: 21px;\n        width: 20px;\n        height: 20px;\n        margin-top: -10px;\n        margin-left: -10px;\n        border-radius: 50%;\n        border: 2px solid #fff;\n        background-color: ${Colors['Red-500']};\n    }\n`\n\nexport const StyledIconLoading = styled.span`\n  cursor: wait;\n  :before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    top: 50%;\n    right: 12px;\n    width: 20px;\n    height: 20px;\n    margin-top: -10px;\n    margin-left: -10px;\n    border-radius: 50%;\n    border: 1px solid ${Colors['Blue-Grey-200']};\n    border-top-color: ${Colors['Blue-500']};\n    animation: ${inputLoadingAnimation} .6s linear infinite;\n  }\n`\n\nexport const Input = styled.input`\n  position: relative;\n  border: 1px solid ${Colors[\"Blue-Grey-100\"]};\n  border-radius: 6px;\n  color: ${Colors[\"Blue-Grey-500\"]};\n  font-size: 14px;\n  padding: 9px 12px;\n  width: 100%;\n  box-sizing: border-box;\n\n  ::placeholder {\n    font-size: 14px;\n    font-weight: normal;\n    font-stretch: normal;\n    font-style: normal;\n    line-height: 1.53;\n    letter-spacing: normal;\n    color: ${Colors[\"Blue-Grey-100\"]};\n  }\n\n  ${({ disabled }) => disabled && `\n    color: ${Colors[\"Blue-Gray-500\"]};\n    background-color: ${Colors['Blue-Grey-50']};\n    border-color: ${Colors[\"Blue-Gray-500\"]};\n    cursor: not-allowed;\n    ::placeholder {\n        color: ${Colors[\"Blue-Gray-100\"]};\n    }`}\n\n  ${({ loading }) => loading && `\n    color: ${Colors[\"Light-Blue-500\"]};\n    background-color: ${Colors['Blue-50']};\n    border-color: ${Colors[\"Light-Blue-500\"]};\n    cursor: wait;\n    ::placeholder {\n        color: ${Colors[\"Light-Blue-100\"]};\n    }`}\n\n  ${({ error }) => error && `\n    color: ${Colors[\"Red-500\"]};\n    border-color: ${Colors[\"Red-500\"]};\n    ::placeholder {\n        color: ${Colors[\"Red-100\"]};\n    }`}\n\n  ${({ success }) => success && `\n    color: ${Colors[\"Green-500\"]};\n    border-color: ${Colors[\"Green-500\"]};\n    ::placeholder {\n        color: ${Colors[\"Green-100\"]};\n    }`}\n\n`;\n\nexport default Input"]}