{"version":3,"sources":["components/Apartment/ApartmentSimilarProperties/styles.js","components/Apartment/ApartmentSimilarProperties/index.tsx"],"names":["SimilarWrapper","styled","div","withConfig","componentId","color","grid","gutterSmall","media","md","_templateObject","_taggedTemplateLiteral","lg","_templateObject2","gutter","textStyles","H2","SimilarContainer","ApartmentSimilarProperties","props","ref","useRef","onScreen","useOnScreen","React","createElement","title","properties","map","property","ApartmentBlock","key","data","small","memo"],"mappings":"8LAGO,MAAMA,EAAiBC,IAAOC,IAAGC,WAAA,CAAAC,YAAA,gBAAVH,CAAU,gHACnBI,YAAM,OAAQ,GAElBC,IAAKC,YAAc,EAEjCC,IAAMC,GAAEC,MAAAC,YAAA,kCAIRH,IAAMI,GAAEC,MAAAF,YAAA,2DAEOL,IAAKQ,OAAS,GAI5BC,IAAWC,IAMFC,EAAmBhB,IAAOC,IAAGC,WAAA,CAAAC,YAAA,gBAAVH,CAAU,koCASvBK,IAAKC,YAGMD,IAAKC,YAAc,EAC7BD,IAAKC,YAAc,EAIRD,IAAKC,YAAc,EAAK,IAIxBD,IAAKQ,OAAS,EAAK,EAC9BR,IAAKQ,OAAS,EAIHR,IAAKQ,OAAS,EAAK,EAQ3BR,IAAKC,YAAc,EASnBD,IAAKQ,OAAS,EAYnBR,IAAKC,YAAc,EAClBD,IAAKC,YAAc,EAQnBD,IAAKC,YAAc,EAGnBD,IAAKC,YAAc,EAItBD,IAAKC,YAAc,EAEtBD,IAAKC,YAAc,GCtF1BW,EAA8BC,IACnC,MAAMC,EAAMC,iBAAO,MACbC,EAAWC,YAAYH,EAAK,SAElC,OACCI,IAAAC,cAACzB,EAAc,CAACoB,IAAKA,GACpBI,IAAAC,cAAA,UAAKN,EAAMO,MAAQP,EAAMO,MAAQ,2BAChCJ,GACAE,IAAAC,cAACR,EAAgB,KACfE,EAAMQ,WAAWC,IAAIC,GACrBL,IAAAC,cAACK,IAAc,CAACC,IAAKF,EAASE,IAAKC,KAAMH,EAAUI,OAAO,KAG3DT,IAAAC,cAAA,YACAD,IAAAC,cAAA,eAOUS,yBAAKhB","file":"assets/js/63.chunk.js?cb=75c38d09391011e5d330","sourcesContent":["import styled from \"styled-components\";\nimport { color, media, grid, textStyles } from \"@utils/style-utils\";\n\nexport const SimilarWrapper = styled.div`\n\tbackground-color: ${color(\"grey\", 7)};\n\tmargin: 80px 0;\n\tpadding: 80px ${grid.gutterSmall / 2}px;\n\n\t${media.md`\n\t\tmargin: 100px 0;\n\t`}\n\n\t${media.lg`\n\t\tmargin: 130px 0;\n\t\tpadding: 80px ${grid.gutter / 2}px;\n\t`}\n\n\th2 {\n\t\t${textStyles.H2}\n\t\tmargin: 0 auto 55px;\n\t\ttext-align: center;\n\t}\n`;\n\nexport const SimilarContainer = styled.div`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tjustify-content: space-between;\n\tmargin: 0 auto;\n\tmax-width: 1635px;\n\n\t> div {\n\t\tflex-basis: 100%;\n\t\tmargin-bottom: ${grid.gutterSmall}px;\n\n\t\t@media (min-width: 610px) {\n\t\t\tflex-basis: calc((100% - ${grid.gutterSmall / 2}px) / 2);\n\t\t\tmargin-bottom: ${grid.gutterSmall / 2}px;\n\t\t}\n\n\t\t@media (min-width: 940px) {\n\t\t\tflex-basis: calc((100% - ${(grid.gutterSmall / 2) * 1.5}px) / 3);\n\t\t}\n\n\t\t@media (min-width: 1215px) {\n\t\t\tflex-basis: calc((100% - ${(grid.gutter / 2) * 3}px) / 4);\n\t\t\tmargin-bottom: ${grid.gutter / 2}px;\n\t\t}\n\n\t\t@media (min-width: 1500px) {\n\t\t\tflex-basis: calc((100% - ${(grid.gutter / 2) * 4}px) / 5);\n\t\t}\n\t}\n\n\t@supports (display: grid) {\n\t\t.is-pointer & {\n\t\t\t@media (min-width: 610px) {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-column-gap: ${grid.gutterSmall / 2}px;\n\t\t\t\tgrid-template-columns: repeat(2, 1fr);\n\t\t\t}\n\n\t\t\t@media (min-width: 940px) {\n\t\t\t\tgrid-template-columns: repeat(3, 1fr);\n\t\t\t}\n\n\t\t\t@media (min-width: 1215px) {\n\t\t\t\tgrid-column-gap: ${grid.gutter / 2}px;\n\t\t\t\tgrid-template-columns: repeat(4, 1fr);\n\t\t\t}\n\n\t\t\t@media (min-width: 1500px) {\n\t\t\t\tgrid-template-columns: repeat(5, 1fr);\n\t\t\t}\n\t\t}\n\t}\n\n\t@media (max-width: 991px) and (pointer: coarse) {\n\t\tflex-wrap: nowrap;\n\t\tmargin-left: -${grid.gutterSmall / 2}px;\n\t\tmargin-right: -${grid.gutterSmall / 2}px;\n\t\toverflow-x: scroll;\n\t\t-webkit-overflow-scrolling: touch;\n\t\twhite-space: nowrap;\n\t\twidth: auto;\n\n\t\t> div {\n\t\t\tflex: 1 0 86%;\n\t\t\tmargin-right: ${grid.gutterSmall / 2}px;\n\n\t\t\t&:first-of-type {\n\t\t\t\tmargin-left: ${grid.gutterSmall / 2}px;\n\t\t\t}\n\n\t\t\t&:nth-last-of-type(2) {\n\t\t\t\tflex: 0 0 ${grid.gutterSmall / 2}px;\n\t\t\t\tmargin: 0 !important;\n\t\t\t\twidth: ${grid.gutterSmall / 2}px;\n\t\t\t}\n\n\t\t\t&:nth-last-of-type(2),\n\t\t\t&:last-of-type {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n`;\n","import React, { memo, useRef } from \"react\";\nimport ApartmentBlock from \"@components/ApartmentBlock\";\nimport useOnScreen from \"@hooks/use-on-screen\";\n\nimport { SimilarWrapper, SimilarContainer } from \"./styles\";\n\ninterface IProps {\n\tproperties: IProperty[];\n\ttitle?: string;\n}\n\nconst ApartmentSimilarProperties = (props: IProps) => {\n\tconst ref = useRef(null);\n\tconst onScreen = useOnScreen(ref, \"-60px\");\n\n\treturn (\n\t\t<SimilarWrapper ref={ref}>\n\t\t\t<h2>{props.title ? props.title : \"Samankaltaisia kohteita\"}</h2>\n\t\t\t{onScreen && (\n\t\t\t\t<SimilarContainer>\n\t\t\t\t\t{props.properties.map(property => (\n\t\t\t\t\t\t<ApartmentBlock key={property.key} data={property} small={true} />\n\t\t\t\t\t))}\n\t\t\t\t\t{/* these empty divs make the grid work without nth-child \"hacks\" */}\n\t\t\t\t\t<div />\n\t\t\t\t\t<div />\n\t\t\t\t</SimilarContainer>\n\t\t\t)}\n\t\t</SimilarWrapper>\n\t);\n};\n\nexport default memo(ApartmentSimilarProperties);\n"],"sourceRoot":""}