{
  "version": 3,
  "sources": ["../../src/components/wallets/styles.ts"],
  "sourcesContent": ["import { motion } from 'framer-motion';\nimport { styled } from 'styled-components';\n\nexport const WalletsContainer = styled(motion.div)`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n`;\n\nexport const WalletIconContainer = styled(motion.div)`\n  height: 22px;\n  width: 22px;\n  border-radius: 6px;\n  overflow: hidden;\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n`;\n\nexport const WalletLable = styled(motion.div)<{\n  $customLable?: boolean;\n}>`\n  position: absolute;\n  margin: auto 16px;\n  right: 0;\n  height: 25px;\n  background: ${(props) =>\n    props.$customLable ? 'var(--pcm-wallet-lable-background)' : 'var(--pcm-body-background-secondary)'};\n  color: ${(props) => (props.$customLable ? 'var(--pcm-wallet-lable-color)' : 'var(--pcm-body-color-secondary)')};\n  font-size: 12px;\n  font-weight: 300;\n  text-align: center;\n  line-height: 25px;\n  padding: 0 10px 0 21px;\n  border-radius: 25px;\n  max-width: 40%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition-property: opacity, transform;\n  opacity: 1;\n  transition-duration: 200ms;\n\n  &:before {\n    content: '';\n    position: absolute;\n    height: 7px;\n    width: 7px;\n    background: ${(props) => (props.$customLable ? 'var(--pcm-wallet-lable-color)' : 'var(--pcm-accent-color)')};\n    border-radius: 50%;\n    top: 9px;\n    left: 10px;\n  }\n`;\n\nexport const ForwardContainer = styled(motion.div)`\n  margin: auto 0;\n  position: absolute;\n  right: 26px;\n  opacity: 0;\n  transition-property: opacity, transform;\n  transition-duration: 200ms;\n  color: var(--pcm-body-color);\n`;\n\nexport const WalletItem = styled(motion.div)`\n  width: 100%;\n  height: 47px;\n  border: 1px solid var(--pcm-button-border-color);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  padding: 0 16px;\n  border-radius: var(--pcm-rounded-lg);\n  gap: 12px;\n  position: relative;\n  user-select: none;\n\n  @media only screen and (min-width: 560px) {\n    &:hover {\n      box-shadow: var(--pcm-button-hover-shadow);\n      ${WalletLable} {\n        opacity: 0;\n        transform: translateX(-15px);\n      }\n\n      ${ForwardContainer} {\n        opacity: 1;\n        transform: translateX(10px);\n      }\n    }\n  }\n\n  @media only screen and (max-width: 560px) {\n    &:hover:active {\n      box-shadow: var(--pcm-button-hover-shadow);\n      ${WalletLable} {\n        opacity: 0;\n        transform: translateX(-15px);\n      }\n\n      ${ForwardContainer} {\n        opacity: 1;\n        transform: translateX(10px);\n      }\n    }\n  }\n  &.all-wallets-btn {\n    background: var(--pcm-body-background-secondary);\n    border: none;\n    font-weight: 500;\n    &:hover {\n      box-shadow: none;\n    }\n  }\n`;\n"],
  "mappings": ";;;;;;AAAA,SAAS,cAAc;AACvB,SAAS,cAAc;AADvB,IAGa,kBAOA,qBAYA,aAoCA,kBAUA;AApEb;AAAA;AAAA;AAGO,IAAM,mBAAmB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1C,IAAM,sBAAsB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY7C,IAAM,cAAc,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,gBAO5B,CAAC,UACb,MAAM,eAAe,uCAAuC;AAAA,WACrD,CAAC,UAAW,MAAM,eAAe,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAoB5D,CAAC,UAAW,MAAM,eAAe,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9E,IAAM,mBAAmB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1C,IAAM,aAAa,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgBnC;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
  "names": []
}