{
  "version": 3,
  "sources": ["../../src/components/modal/styles.ts"],
  "sourcesContent": ["import { motion } from 'framer-motion';\nimport type { HTMLAttributes } from 'react';\nimport { keyframes, styled } from 'styled-components';\n\ninterface FlexProps extends HTMLAttributes<HTMLDivElement> {\n  gap?: number;\n}\n\nconst FadeIn = keyframes`\nfrom { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst FadeOut = keyframes`\nfrom { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst BoxIn = keyframes`\n  from{ opacity: 0; transform: scale(0.97); }\n  to{ opacity: 1; transform: scale(1); }\n`;\nconst BoxOut = keyframes`\n  from{ opacity: 1; transform: scale(1); }\n  to{ opacity: 0; transform: scale(0.97); }\n`;\n\nconst MobileBoxIn = keyframes`\n  from { transform: translate3d(0, 100%, 0); }\n  to { transform: translate3d(0, 0%, 0); }\n`;\n\nconst MobileBoxOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nexport const ModalRoot = styled.div`\n  z-index: 2147483646;\n  position: fixed;\n  inset: 0;\n`;\n\nexport const ModalOverlay = styled(motion.div)<{\n  $active: boolean;\n}>`\n  z-index: 1;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--pcm-overlay-background, rgba(71, 88, 107, 0.24));\n  backdrop-filter: var(--pcm-overlay-backdrop-filter, blur(6px));\n  opacity: 0;\n  animation: ${(props) => (props.$active ? FadeIn : FadeOut)} 150ms ease-out both;\n`;\n\nexport const ModalContainer = styled(motion.div)<{\n  $positionInside?: boolean;\n}>`\n  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);\n  --duration: 200ms;\n  --transition: height var(--duration) var(--ease), width var(--duration) var(--ease);\n  z-index: 3;\n  display: block;\n  pointer-events: none;\n  position: ${(props) => (props.$positionInside ? 'unset' : 'absolute')};\n  left: 50%;\n  top: 50%;\n  width: 100%;\n  height: auto;\n  transform: ${(props) => {\n    return props.$positionInside ? 'none' : 'translate(-50%, -50%)';\n  }};\n  backface-visibility: hidden;\n  @media only screen and (max-width: 560px) {\n    pointer-events: auto;\n    left: 0;\n    top: auto;\n    bottom: -5px;\n    transform: none;\n  }\n`;\n\nexport const BoxContainer = styled(motion.div)<{\n  $positionInside?: boolean;\n}>`\n  z-index: 2;\n  position: relative;\n  color: var(--pcm-body-color, black);\n  animation: 150ms ease both;\n  animation-name: ${(props) => (props.$positionInside ? null : BoxOut)};\n  margin: auto;\n  height: var(--height);\n  width: 400px;\n  border-radius: var(--pcm-rounded-xl);\n  background: var(--pcm-body-background);\n  box-shadow: var(--pcm-modal-box-shadow);\n  transition: all 300ms ease;\n  overflow: hidden;\n  &.active {\n    animation-name: ${(props) => (props.$positionInside ? null : BoxIn)};\n  }\n\n  @media only screen and (max-width: 560px) {\n    animation-name: ${(props) => (props.$positionInside ? null : MobileBoxOut)};\n    animation-duration: 130ms;\n    animation-timing-function: ease;\n    width: 100%;\n    transition: 200ms height cubic-bezier(0.15, 1.15, 0.6, 1);\n    will-change: height;\n    border-bottom-left-radius: ${(props) => (props.$positionInside ? null : 0)};\n    border-bottom-right-radius: ${(props) => (props.$positionInside ? null : 0)};\n\n    &.active {\n      animation-name: ${(props) => (props.$positionInside ? null : MobileBoxIn)};\n      animation-duration: 300ms;\n      animation-delay: 32ms;\n      animation-timing-function: cubic-bezier(0.15, 1.15, 0.6, 1);\n    }\n  }\n`;\n\nexport const PageContainer = styled(motion.div)`\n  z-index: 2;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: auto;\n`;\n\nexport const PageContents = styled(motion.div)`\n  width: 100%;\n  padding: 64px 0 24px 0;\n  backface-visibility: hidden;\n  box-sizing: border-box;\n`;\n\nexport const PageContent = styled(motion.div)`\n  max-width: 100%;\n  margin: 0 4px 22px;\n  padding: 12px 20px 8px;\n  overflow-x: visible;\n  max-height: var(--pcm-modal-max-height, 65vh);\n  overflow-y: auto;\n  opacity: 0;\n  animation: ${FadeIn} 300ms ease-out both;\n`;\n\nexport const ControllerContainer = styled(motion.div)`\n  z-index: 3;\n  position: absolute;\n  top: 0;\n  left: 50%;\n  height: 64px;\n  transform: translateX(-50%);\n  backface-visibility: hidden;\n  width: 100%;\n  pointer-events: auto;\n`;\n\nexport const BackButton = styled(motion.button)`\n  z-index: 3;\n  cursor: pointer;\n  position: absolute;\n  top: 21px;\n  left: 17px;\n  width: 30px;\n  height: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform-origin: center center;\n  border-radius: 16px;\n  padding: 0;\n  margin: 0;\n  color: var(--pcm-body-action-color);\n  background: var(--pcm-body-background);\n  transition: background-color 200ms ease;\n  background: var(--pcm-body-background-secondary);\n  border: none;\n  svg {\n    display: block;\n    position: relative;\n    left: -1px;\n  }\n\n  &:active {\n    transform: scale(0.9);\n    svg {\n      left: 0px;\n    }\n  }\n`;\n\nexport const CloseButton = styled(motion.button)`\n  z-index: 3;\n  cursor: pointer;\n  position: absolute;\n  top: 21px;\n  right: 17px;\n  width: 30px;\n  height: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 16px;\n  padding: 0;\n  margin: 0;\n  color: var(--pcm-body-action-color);\n  background: var(--pcm-body-background);\n  transition: background-color 200ms ease;\n  background: var(--pcm-body-background-secondary);\n  border: none;\n  svg {\n    display: block;\n  }\n  &:active {\n    transform: scale(0.9);\n  }\n`;\n\nexport const ModalHeading = styled(motion.div)`\n  z-index: 3;\n  pointer-events: none;\n  user-select: none;\n  position: absolute;\n  top: 12px;\n  left: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 48px;\n  transform: translateX(-50%);\n  width: 100%;\n  text-align: center;\n  font-size: 17px;\n  line-height: 20px;\n  padding: 0 24px;\n  font-weight: var(--pcm-modal-heading-font-weight, 600);\n  color: var(--pcm-body-color);\n  span {\n    display: inline-block;\n  }\n`;\n\nexport const ErrorContent = styled(motion.div)`\n  background: var(--pcm-error-background);\n  color: var(--pcm-error-color);\n  text-align: center;\n  height: 28px;\n  margin: 0 24px;\n  line-height: 28px;\n  border-radius: 30px;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  padding: 0 16px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  svg {\n    display: inline-block;\n    margin-right: 8px;\n  }\n`;\n\nexport const ErrorMessage = styled(motion.div)<{\n  $display: boolean;\n}>`\n  display: ${(props) => (props.$display ? 'flex' : 'none')};\n  width: 100%;\n  margin: 16px auto;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  animation: ${(props) => (props.$display ? FadeIn : FadeOut)} 200ms ease-out both;\n`;\n\nexport const ModalContentContainer = styled(motion.div)`\n  position: relative;\n  padding: 0;\n`;\n\nexport const FlexCenter = styled.div<FlexProps>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: ${(props) => props.gap || 0}px;\n`;\n\nexport const FlexLeft = styled.div<FlexProps>`\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: ${(props) => props.gap || 0}px;\n`;\n\nexport const FlexRight = styled.div<FlexProps>`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: ${(props) => props.gap || 0}px;\n`;\n\nexport const FlexBetween = styled.div<FlexProps>`\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: ${(props) => props.gap || 0}px;\n`;\n"],
  "mappings": "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",
  "names": []
}