{
  "version": 3,
  "sources": ["../../src/components/socialLogin/styles.ts"],
  "sourcesContent": ["import { motion } from 'framer-motion';\nimport { css, keyframes, styled } from 'styled-components';\nimport { ForwardContainer, WalletLable } from '../wallets/styles';\n\nconst FadeIn = keyframes`\nfrom { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nexport const SocialLoginContainer = styled(motion.div)<{\n  $felxRow: boolean;\n}>`\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  transform: translateZ(0);\n  flex-wrap: wrap;\n  flex-direction: ${(props) => {\n    if (props.$felxRow) {\n      return 'row';\n    }\n    return 'column';\n  }};\n  gap: ${(props) => {\n    if (props.$felxRow) {\n      return '0px';\n    }\n    return '12px';\n  }};\n`;\n\nexport const SocialItem = styled(motion.div)<{ $felxRow: boolean; $isDisabled?: boolean }>`\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  height: 46px;\n  border: 1px solid var(--pcm-button-border-color);\n  transition: 0.2s ease width;\n  cursor: pointer;\n  opacity: 0;\n  animation: ${FadeIn} 300ms ease-out both;\n  position: relative;\n  user-select: none;\n\n  ${(props) => {\n    if (props.$isDisabled) {\n      return css`\n        opacity: 0.5 !important;\n        cursor: not-allowed !important;\n        pointer-events: none !important;\n      `;\n    } else {\n      return css``;\n    }\n  }}\n\n  ${(props) => {\n    if (props.$felxRow) {\n      return css`\n        padding: 0;\n        width: 46px;\n        border-radius: var(--pcm-rounded-full);\n        justify-content: center;\n      `;\n    }\n\n    return css`\n      padding-left: 16px;\n      padding-right: 16px;\n      width: 100%;\n      border-radius: var(--pcm-rounded-lg);\n      justify-content: flex-start;\n      ${ForwardContainer} {\n        svg {\n          height: inherit;\n          width: inherit;\n        }\n      }\n      @media only screen and (min-width: 560px) {\n        &:hover {\n          ${WalletLable} {\n            opacity: 0;\n            transform: translateX(-15px);\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          ${WalletLable} {\n            opacity: 0;\n            transform: translateX(-15px);\n          }\n          ${ForwardContainer} {\n            opacity: 1;\n            transform: translateX(10px);\n          }\n        }\n      }\n    `;\n  }}\n\n  @media only screen and (min-width: 560px) {\n    &:hover {\n      box-shadow: var(--pcm-button-hover-shadow);\n    }\n  }\n\n  @media only screen and (max-width: 560px) {\n    &:hover:active {\n      box-shadow: var(--pcm-button-hover-shadow);\n    }\n  }\n\n  svg {\n    object-fit: cover;\n    ${(props) => {\n      if (props.$felxRow) {\n        return css`\n          height: 30px;\n          width: 30px;\n        `;\n      }\n      return css`\n        height: 22px;\n        width: 22px;\n      `;\n    }}\n  }\n\n  span {\n    font-weight: 500;\n    font-size: 14px;\n    white-space: nowrap;\n    text-align: center;\n    text-transform: capitalize;\n    display: ${(props) => {\n      if (props.$felxRow) {\n        return 'none';\n      }\n      return 'block';\n    }};\n  }\n`;\n\nexport const ToggleContainer = styled(motion.div)`\n  height: 47px;\n  width: 47px;\n  cursor: pointer;\n  border-radius: var(--pcm-rounded-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--pcm-body-background-secondary);\n  opacity: 0;\n  animation: ${FadeIn} 300ms ease-out both;\n\n  &:hover {\n    box-shadow: var(--pcm-button-hover-shadow);\n  }\n  svg {\n    height: 25px;\n    width: 25px;\n    object-fit: cover;\n  }\n`;\n"],
  "mappings": ";;;;;;;;;;;AAAA,SAAS,cAAc;AACvB,SAAS,KAAK,WAAW,cAAc;AADvC,IAIM,QAKO,sBAsBA,YAsHA;AArJb,IAAAA,eAAA;AAAA;AAAA;AAEA;AAEA,IAAM,SAAS;AAAA;AAAA;AAAA;AAKR,IAAM,uBAAuB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAQjC,CAAC,UAAU;AAC3B,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT;AAAA,SACO,CAAC,UAAU;AAChB,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT;AAAA;AAGK,IAAM,aAAa,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAS5B;AAAA;AAAA;AAAA;AAAA,IAIX,CAAC,UAAU;AACX,UAAI,MAAM,aAAa;AACrB,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA,MAKT,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF;AAAA;AAAA,IAEE,CAAC,UAAU;AACX,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMT;AAEA,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQI;AAAA;AAAA;AAAA;AAAA,YAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASA;AAAA;AAAA;AAAA;AAAA,YAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBI,CAAC,UAAU;AACX,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA;AAAA;AAAA;AAAA,MAIT;AACA,aAAO;AAAA;AAAA;AAAA;AAAA,IAIT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eASW,CAAC,UAAU;AACpB,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT;AAAA;AAAA;AAIG,IAAM,kBAAkB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAUjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
  "names": ["init_styles"]
}