{
  "version": 3,
  "sources": ["../../src/pages/connecting/styles.ts"],
  "sourcesContent": ["import { motion } from 'framer-motion';\nimport { css, keyframes, styled } from 'styled-components';\n\nexport const ConnectingContainer = styled(motion.div)`\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  text-align: center;\n`;\n\nconst dist = 2;\nconst shakeKeyframes = keyframes`\n  0%{ transform:none; }\n  25%{ transform:translateX(${dist}px); }\n  50%{ transform:translateX(-${dist}px); }\n  75%{ transform:translateX(${dist}px); }\n  100%{ transform:none; }\n`;\nconst outlineKeyframes = keyframes`\n  0%{ opacity:1; }\n  100%{ opacity:0; }\n`;\n\nexport const ConnectingAnimation = styled(motion.div)<{\n  $shake: boolean;\n  $circle: boolean;\n}>`\n  user-select: none;\n  position: relative;\n  --spinner-error-opacity: 0;\n  &:before {\n    content: '';\n    position: absolute;\n    inset: 1px;\n    opacity: 0;\n    background: var(--pcm-error-color);\n    ${(props) =>\n      props.$circle &&\n      css`\n        inset: -5px;\n        border-radius: 50%;\n        background: none;\n        box-shadow: inset 0 0 0 3.5px var(--pcm-error-color);\n      `}\n  }\n  ${(props) =>\n    props.$shake &&\n    css`\n      animation: ${shakeKeyframes} 220ms ease-out both;\n      &:before {\n        animation: ${outlineKeyframes} 220ms ease-out 750ms both;\n      }\n    `}\n`;\n\nexport const RetryButton = styled(motion.button)`\n  z-index: 5;\n  appearance: none;\n  position: absolute;\n  right: 2px;\n  bottom: 2px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 16px;\n  cursor: pointer;\n  overflow: hidden;\n  background: none;\n  border: none;\n  color: var(--pcm-body-background);\n  transition: color 200ms ease;\n  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);\n\n  &:before {\n    z-index: 3;\n    content: '';\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    transition: opacity 200ms ease;\n    background: var(--pcm-body-color);\n  }\n\n  &:hover:before {\n    opacity: 0.1;\n  }\n`;\n\nexport const RetryIconContainer = styled(motion.div)`\n  position: absolute;\n  inset: 0;\n\n  &:before {\n    z-index: 1;\n    content: '';\n    position: absolute;\n    inset: 3px;\n    border-radius: 16px;\n    background: conic-gradient(from 90deg, currentColor 10%, var(--pcm-accent-color) 80%);\n  }\n\n  svg {\n    z-index: 2;\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n`;\n\nexport const StatusContainer = styled(motion.div)`\n  position: relative;\n  padding: 0;\n  margin-top: 28px;\n  scale: 0.95;\n  opacity: 0;\n  will-change: transform, height;\n  color: var(--pcm-body-color);\n  padding-bottom: 16px;\n\n  div:first-child {\n    font-weight: 500;\n    margin-bottom: 10px;\n    font-size: 16px;\n  }\n\n  span {\n    color: var(--pcm-body-color-secondary);\n    white-space: pre-wrap;\n    font-size: 14px;\n  }\n`;\n"],
  "mappings": ";;;;;;AAAA,SAAS,cAAc;AACvB,SAAS,KAAK,WAAW,cAAc;AADvC,IAGa,qBASP,MACA,gBAOA,kBAKO,qBAgCA,aAoCA,oBAsBA;AAnHb;AAAA;AAAA;AAGO,IAAM,sBAAsB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASpD,IAAM,OAAO;AACb,IAAM,iBAAiB;AAAA;AAAA,8BAEO;AAAA,+BACC;AAAA,8BACD;AAAA;AAAA;AAG9B,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAKlB,IAAM,sBAAsB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAa9C,CAAC,UACD,MAAM,WACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOF,CAAC,UACD,MAAM,UACN;AAAA,mBACe;AAAA;AAAA,qBAEE;AAAA;AAAA;AAAA;AAKd,IAAM,cAAc,OAAO,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCxC,IAAM,qBAAqB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsB5C,IAAM,kBAAkB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
  "names": []
}