{
  "version": 3,
  "sources": ["../javascripts/styled-components/components/Modal/wrapper.tsx"],
  "sourcesContent": ["import styled, { css } from 'styled-components';\n\nimport { size } from '../../layout/helpers';\nimport { fadeIn, noTransform } from '../../layout/keyframes';\nimport { ButtonReset } from '../../layout/reset';\n\nconst iconSize = (props: any) => props.theme.font.size.large;\nconst headingSize = 'var(--font-size-h3)';\nconst headingLineHeight = (props: any) => props.theme.font.lineHeight.main;\n\nexport const Wrapper = styled.div.attrs(() => ({\n  role: 'dialog',\n  'aria-modal': 'true',\n})).withConfig({ componentId: 'sc-qdyfpo-0' })`\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    min-height: 100%;\n    text-align: left;\n    white-space: normal;\n    overflow: auto;\n    overscroll-behavior: contain;\n    z-index: ${(props) => props.theme.zIndex.modal};\n`;\n\nexport const Backdrop = styled.div.attrs(() => ({\n  role: 'button',\n})).withConfig({ componentId: 'sc-qdyfpo-1' })`\n    display: table;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    isolation: isolate;\n\n    &::before {\n        content: \"\";\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background-color: rgba(var(--c-overlay-rgb), 0.2);\n        z-index: -1;\n        animation: ${fadeIn} 400ms ease;\n    }\n`;\n\nexport const Center = styled.div.withConfig({ componentId: 'sc-qdyfpo-2' })`\n    display: table-cell;\n    vertical-align: middle;\n    padding: ${size(3)};\n    max-width: 100vw;\n\n    ${(props) => props.theme.breakpoint.LtSm} {\n        vertical-align: bottom;\n        padding: 0;\n    }\n`;\n\nexport const Dialog = styled.div.withConfig({ componentId: 'sc-qdyfpo-3' })`\n    --dialog-gutter: ${size(4)};\n\n    position: relative;\n    width: 100%;\n    background-color: var(--c-bg-main);\n    color: var(--c-text-main);\n    margin-left: auto;\n    margin-right: auto;\n    max-width: 700px;\n    padding: var(--dialog-gutter);\n    border-radius: ${size(0.5)};\n    overflow: hidden;\n    transform: translateY(${size(1)});\n    animation: ${fadeIn} 300ms ease, ${noTransform} 300ms ease forwards;\n\n    ${(props) => props.theme.breakpoint.LtSm} {\n        --dialog-gutter: ${size(3)};\n\n        transform: translateY(100%);\n        animation: ${noTransform} 300ms ease forwards;\n    }\n`;\n\ninterface CloseBtnProps {\n  $absolutePosition?: boolean;\n  $disabledShapeOutside?: boolean;\n}\n\nexport const CloseBtn = styled(ButtonReset).withConfig({ componentId: 'sc-qdyfpo-4' })<CloseBtnProps>`\n    display: block;\n    float: right;\n    font-size: ${iconSize};\n    margin-left: ${size(3)};\n    margin-bottom: ${size(3)};\n    margin-top: calc((${iconSize} - ${headingSize} * ${headingLineHeight}) / -2);\n    border-radius: 50%;\n    shape-outside: circle();\n    transform-origin: 50% 50%;\n    transition: transform 200ms ease;\n    z-index: 1;\n\n    &::before {\n        content: \"\";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 2.5em;\n        height: 2.5em;\n        border-radius: 50%;\n        background-color: var(--c-bg-alt);\n        opacity: 0;\n        transform: translate(-50%, -50%);\n        transition: opacity 200ms ease;\n        z-index: -1;\n    }\n\n    &:active {\n        transform: scale(0.9);\n    }\n\n    &:hover {\n        &::before {\n            opacity: 1;\n        }\n    }\n\n    ${({ $disabledShapeOutside }) =>\n      $disabledShapeOutside &&\n      css`\n            margin-bottom: 0;\n            shape-outside: none;\n        `}\n\n    ${({ $absolutePosition }) =>\n      $absolutePosition &&\n      css`\n            position: absolute;\n            top: ${size(4)};\n            right: ${size(4)};\n\n            ${(props) => props.theme.breakpoint.LtSm} {\n                top: ${size(3)};\n                right: ${size(3)};\n            }\n        `}\n`;\n\nexport const Illustration = styled.img.withConfig({ componentId: 'sc-qdyfpo-5' })`\n    display: block;\n    width: ${size(9)};\n    height: ${size(9)};\n    max-width: 100%;\n    object-fit: contain;\n    margin-left: auto;\n    margin-right: auto;\n    margin-bottom: ${size(3)};\n`;\n\nexport const Heading = styled.div.withConfig({ componentId: 'sc-qdyfpo-6' })`\n    margin-bottom: ${size(3)};\n    font-size: ${headingSize};\n    font-weight: var(--font-weight-bold);\n    line-height: ${headingLineHeight};\n`;\n\nexport const Footer = styled.div.withConfig({ componentId: 'sc-qdyfpo-7' })`\n    display: flex;\n    align-items: center;\n    margin-top: ${size(3)};\n\n    ${(props) => props.theme.breakpoint.Sm} {\n        justify-content: flex-end;\n    }\n`;\n\nexport const FooterItem = styled.div.withConfig({ componentId: 'sc-qdyfpo-8' })`\n    flex-shrink: 0;\n\n    ${(props) => props.theme.breakpoint.LtSm} {\n        flex: 1 0 auto;\n        width: 0px;\n    }\n`;\n\n// Modal components (imported separatly)\n\nexport const ModalAccentSection = styled.div.withConfig({ componentId: 'sc-qdyfpo-9' })`\n    padding: ${size(4)};\n    margin: ${size(4)} ${size(-4)};\n    background-color: var(--c-bg-alt);\n\n    &:first-child {\n        margin-top: ${size(-4)};\n    }\n\n    &:last-child {\n        margin-bottom: ${size(-4)};\n    }\n\n    ${(props) => props.theme.breakpoint.LtSm} {\n        padding: ${size(3)};\n        margin: ${size(3)} ${size(-3)};\n\n        &:first-child {\n            margin-top: ${size(-3)};\n        }\n\n        &:last-child {\n            margin-bottom: ${size(-3)};\n        }\n    }\n`;\n"],
  "mappings": "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",
  "names": ["iconSize", "props", "headingSize", "headingLineHeight", "Wrapper", "dt", "Backdrop", "fadeIn", "Center", "size", "Dialog", "noTransform", "CloseBtn", "ButtonReset", "$disabledShapeOutside", "lt", "$absolutePosition", "Illustration", "Heading", "Footer", "FooterItem", "ModalAccentSection"]
}