{"version":3,"sources":["webpack://switch-website/./src/components/common/CardBase.js"],"names":["boxShadowPerformantCss","CardBase","image","link","children","props","backgroundImageWithColorOverlay","getImage","colors","hexToRgba","reverse","cardBackgroundImageFilteredCss","css","linkCardWrapperCss","cardContentCss","fonts","breakpoints","className","to"],"mappings":"kTAcA,IAAMA,EAAsB,qLA+BtBC,EAAW,SAAC,GAAuC,IAAtCC,EAAqC,EAArCA,MAAOC,EAA8B,EAA9BA,KAAMC,EAAwB,EAAxBA,SAAaC,GAAW,YAG9CC,EAAkC,EACpCC,OAASL,GACT,uFAFoC,2BAGTM,gBAHS,SAGgBC,QAAUD,gBAAmB,GAH7C,SAItCE,UAGIC,GAAiCC,QAAH,sLAiBHJ,gBAjBG,UAuB9BK,GAAqBD,QAAH,iEAMXJ,WANW,yCAUPA,WAVO,mBAcPA,WAdO,8BAmBlBM,GAAiBF,QAAH,+DAMDG,eANC,UAOPP,WAPO,uBASKQ,QATL,uBAcpB,OACI,QAAC,MAAD,QACId,MAAOI,EACPM,IAAKD,EACLM,UAAU,QACNZ,IAEJ,QAAC,KAAD,CACIa,GAAIf,EACJS,IAAG,CAAGC,EAAoBC,EAAvB,OACHG,UAAU,iBAETb","file":"ab63ac9ff80907eac1190fac9ee7a65ba6b027c5-06c2d0f28034ac5faa47.js","sourcesContent":["/** @jsx jsx */\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport {css, jsx} from '@emotion/react';\nimport {getImage} from 'gatsby-plugin-image';\nimport {BgImage} from 'gbimage-bridge';\n\nimport {hexToRgba} from '../../helpers/utils';\nimport {breakpoints, colors, fonts} from '../../styles/theme';\nimport {Link} from './Typography';\n\n\n// see: https://tobiasahlin.com/blog/how-to-animate-box-shadow/\nconst boxShadowPerformantCss = css`\n    position: relative;\n\n    ::after {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n    }\n\n    :hover,\n    :focus-within {\n        &::after {\n          opacity: 1;\n        }\n    }\n`;\n\n\n// TODO: reformat Post base card witch common styles from Learn and Newsroom pages:\n//  This component has many things in common with BaseCard from Learn page.\n//  These components and styles should be reformatted to avoid duplicated code.\n\n/*\n * The base for a Card component with a black&white image background that is a link.\n *\n * Uses of this component must specify the dimensions of the card (height/max-width/...) on its styles.\n */\nconst CardBase = ({image, link, children, ...props}) => {\n    // Semi-transparent color gradient on top of the background image.\n    // This helps the bottom text be (more) readable.\n    const backgroundImageWithColorOverlay = [\n        getImage(image),\n        'linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 10%, rgba(255, 255, 255, 0) 40%)',\n        `linear-gradient(to top, ${colors.darkPurple} 5%, ${hexToRgba(colors.darkPurple, 0)} 65%)`,\n    ].reverse();\n\n    // Add a filter to background image to be black&white by default and colored on hover/focus\n    const cardBackgroundImageFilteredCss = css`\n        &:before,\n        &:after {\n            border-radius: 5px;\n            overflow: hidden;\n            filter: grayscale(100%);\n        }\n        &:hover,\n        &:focus-within {\n            &:before,\n            &:after {\n                filter: none;\n            }\n        }\n        &:focus-within {\n            &:before,\n            &:after {\n                outline: 3px solid ${colors.darkPurple};\n            }\n        }\n    `;\n\n    // Wrap all card content in a link, styled as an interactive block\n    const linkCardWrapperCss = css`\n        height: 100%;\n        width: 100%;\n        border-radius: 5px;\n\n        cursor: pointer;\n        color: ${colors.white};\n        text-decoration: none;\n\n        &:visited {\n            color: ${colors.white};\n        }\n\n        &:hover {\n            color: ${colors.white};\n            text-decoration: none;\n        }\n    `;\n\n    const cardContentCss = css`\n        padding: 1rem;\n\n        display: flex;\n        flex-direction: column;\n\n        font-family: ${fonts.sansSerif};\n        color: ${colors.white};\n\n        @media (min-width: ${breakpoints.md}) {\n            padding: 2rem;\n        }\n    `;\n\n    return (\n        <BgImage\n            image={backgroundImageWithColorOverlay}\n            css={cardBackgroundImageFilteredCss}\n            className=\"card\"\n            {...props}\n        >\n            <Link\n                to={link}\n                css={[linkCardWrapperCss, cardContentCss]}\n                className=\"card__content\"\n            >\n                {children}\n            </Link>\n        </BgImage>\n    );\n};\n\nCardBase.propTypes = {\n    image: PropTypes.object.isRequired,\n    link: PropTypes.string.isRequired,\n    children: PropTypes.node.isRequired,\n};\n\nexport {\n    CardBase,\n    boxShadowPerformantCss,\n};\n"],"sourceRoot":""}