{"version":3,"sources":["webpack:///./src/helpers/grid.ts","webpack:///./src/helpers/media.ts","webpack:///./src/helpers/brand.ts","webpack:///./src/stories/Widgets/ArticleGlobalStyles/ArticleGlobalStyles.styles.ts","webpack:///./src/stories/Widgets/ArticleGlobalStyles/ArticleGlobalStyles.tsx","webpack:///./src/helpers/fluid.ts"],"names":["SitePaddingMin","SiteWidthBreakpoint","SiteWidth","siteWide","css","fluid","baseGrid","Device","from","size","until","black","blackDark","grey","greyMidLight","greyMid","greyDark","pureBlack","white","yellow","green","availability","amber","red","validation","invalid","valid","ArticleGlobalStylesStyles","GlobalStyles","createGlobalStyle","brand","Desktop","TabletLarge","ArticleGlobalStyles","React","S","DEFAULT_MIN_VALUE","TabletSmall","DEFAULT_MAX_VALUE","DesktopLarge","min","max","minWidth","maxWidth","minRem","maxRem","minWidthRem","maxWidthRem","slope","yAxisIntersection","clampMin","round","clampVal","clampMax","num","Math"],"mappings":"sFAAA,0JAEO,MAAMA,EAAiB,GAGjBC,EAAsBC,KACtBC,EAAWC,YAAH,wNAEFC,YAAML,EALK,IACL,MAiBZM,EAAWF,YAAH,uGACFC,YAAM,GAAI,M,+BCtBtB,IAAIE,EAcJ,SAASC,EAAKC,GACjB,MAAQ,eAAcA,OAEnB,SAASC,EAAMD,GAClB,MAAQ,eAAcA,EAAO,OAlBjC,sGACA,SAAWF,GACPA,EAAOA,EAAM,YAAkB,KAAO,cACtCA,EAAOA,EAAM,OAAa,KAAO,SACjCA,EAAOA,EAAM,YAAkB,KAAO,cACtCA,EAAOA,EAAM,YAAkB,KAAO,cACtCA,EAAOA,EAAM,OAAa,KAAO,SACjCA,EAAOA,EAAM,YAAkB,MAAQ,cACvCA,EAAOA,EAAM,aAAmB,MAAQ,eACxCA,EAAOA,EAAM,QAAc,MAAQ,UACnCA,EAAOA,EAAM,aAAmB,MAAQ,eACxCA,EAAOA,EAAM,cAAoB,MAAQ,gBACzCA,EAAOA,EAAM,UAAgB,MAAQ,YAXzC,CAYGA,IAAWA,EAAS,M,+BCbR,KACXI,MAAO,UACPC,UAAW,UACXC,KAAM,UACNC,aAAc,UACdC,QAAS,UACTC,SAAU,UACVC,UAAW,UACXC,MAAO,UACPC,OAAQ,UACRC,MAAO,UACPC,aAAc,CACVD,MAAO,UACPE,MAAO,UACPC,IAAK,WAETC,WAAY,CACRC,QAAS,UACTC,MAAO,a,uFC+DAC,MAHmB,CAC9BC,aA1EiBC,YAAH,qoBAIIxB,YAAM,GAAI,IAIbyB,IAAMnB,MACNmB,IAAMZ,MAINY,IAAMZ,MACNY,IAAMnB,MAIjBR,IACAG,IAcKI,YAAMH,IAAOwB,SAUbvB,YAAKD,IAAOwB,SAYZvB,YAAKD,IAAOyB,aAOLF,IAAMnB,MAIhBmB,IAAMnB,MACNmB,IAAMnB,QCnEDsB,UAHa,IACjBC,gBAAoBC,EAAEP,aAAc,O,+BCH/C,6CAIO,MAIMQ,EAAoB7B,IAAO8B,YAI3BC,EAAoB/B,IAAOgC,aAIjC,SAASlC,EAAMmC,EAAKC,GAAiE,IAA5DC,EAA4D,uDAAjDN,EAAmBO,EAA8B,uDAAnBL,EACrE,MAAMM,EAASJ,EAbW,GAcpBK,EAASJ,EAdW,GAepBK,EAAcJ,EAfM,GAgBpBK,EAAcJ,EAhBM,GAiBpBK,GAASH,EAASD,IAAWG,EAAcD,GAC3CG,GAAqBH,EAAcE,EAAQJ,EAC3CM,EAAcC,EAAMP,GAAR,MACZQ,EAAY,GAAED,EAAMF,WAA2BE,EAAc,IAARH,OACrDK,EAAcF,EAAMN,GAAR,MAClB,MAAQ,SAAQK,MAAaE,MAAaC,KAK9C,SAASF,EAAMG,GACX,OAAOC,KAAKJ,MAAY,IAANG,GAAa","file":"ArticleGlobalStyles-f19a64ac3bd92b197ea0.js","sourcesContent":["import { css } from 'styled-components';\r\nimport { fluid } from './fluid';\r\nexport const SitePaddingMin = 12;\r\nexport const SitePaddingMax = 64;\r\nexport const SiteWidth = 1756;\r\nexport const SiteWidthBreakpoint = SiteWidth + SitePaddingMax * 2;\r\nexport const siteWide = css `\r\n  /* The minimum amount of space between the content and the edge of the viewport. */\r\n  --sitePadding: ${fluid(SitePaddingMin, SitePaddingMax)};\r\n\r\n  /* Max site container width */\r\n  --siteWidth: calc(${SiteWidth}px + (var(--sitePadding) * 2));\r\n\r\n  /* The amount of space between the edge of the site container and the viewport, will be 0px on smaller screens. */\r\n  --siteMargin: calc((100vw - min(var(--siteWidth), 100vw)) / 2);\r\n\r\n  margin: 0 auto;\r\n  max-width: var(--siteWidth);\r\n  padding: 0 var(--sitePadding);\r\n  width: 100%;\r\n`;\r\nexport const baseGrid = css `\r\n  --gutterWidth: ${fluid(10, 32)};\r\n\r\n  display: grid;\r\n  column-gap: var(--gutterWidth);\r\n  grid-template-columns: repeat(12, 1fr);\r\n`;\r\n","export var Device;\r\n(function (Device) {\r\n    Device[Device[\"MobileSmall\"] = 320] = \"MobileSmall\";\r\n    Device[Device[\"Mobile\"] = 375] = \"Mobile\";\r\n    Device[Device[\"MobileLarge\"] = 480] = \"MobileLarge\";\r\n    Device[Device[\"TabletSmall\"] = 568] = \"TabletSmall\";\r\n    Device[Device[\"Tablet\"] = 768] = \"Tablet\";\r\n    Device[Device[\"TabletLarge\"] = 1024] = \"TabletLarge\";\r\n    Device[Device[\"DesktopSmall\"] = 1280] = \"DesktopSmall\";\r\n    Device[Device[\"Desktop\"] = 1366] = \"Desktop\";\r\n    Device[Device[\"DesktopLarge\"] = 1600] = \"DesktopLarge\";\r\n    Device[Device[\"ActualDesktop\"] = 1920] = \"ActualDesktop\";\r\n    Device[Device[\"DesktopXL\"] = 2560] = \"DesktopXL\";\r\n})(Device || (Device = {}));\r\nexport function from(size) {\r\n    return `(min-width: ${size}px)`;\r\n}\r\nexport function until(size) {\r\n    return `(max-width: ${size - 1}px)`;\r\n}\r\nexport function between(start, end) {\r\n    return `${from(start)} and ${until(end)}`;\r\n}\r\n","export default {\r\n    black: '#282828',\r\n    blackDark: '#121212',\r\n    grey: '#f4f4f4',\r\n    greyMidLight: '#BABABA',\r\n    greyMid: '#707070',\r\n    greyDark: '#4a4a4a',\r\n    pureBlack: '#000000',\r\n    white: '#ffffff',\r\n    yellow: '#ffdc00',\r\n    green: '#80C342',\r\n    availability: {\r\n        green: '#68F087',\r\n        amber: '#FFA969',\r\n        red: '#F84848',\r\n    },\r\n    validation: {\r\n        invalid: '#da291c',\r\n        valid: '#008c15',\r\n    },\r\n};\r\n","import brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport { baseGrid, siteWide } from '@helpers/grid';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport { createGlobalStyle } from 'styled-components';\r\nconst GlobalStyles = createGlobalStyle `\r\n  .article-layout {\r\n    background: var(--bgColor);\r\n    color: var(--fgColor);\r\n    padding-bottom: ${fluid(48, 96)};\r\n    position: relative;\r\n\r\n    &--dark {\r\n      --bgColor: ${brand.black};\r\n      --fgColor: ${brand.white};\r\n    }\r\n\r\n    &--light {\r\n      --bgColor: ${brand.white};\r\n      --fgColor: ${brand.black};\r\n    }\r\n\r\n    &__inner {\r\n      ${siteWide}\r\n      ${baseGrid}\r\n\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n    \r\n    &__content {\r\n      max-width: 713px;\r\n    }\r\n\r\n    &__aside {\r\n      max-width: 625px;\r\n    }\r\n    \r\n    @media ${until(Device.Desktop)} {\r\n      &__content {\r\n        grid-column: 1 / span 12;\r\n      }\r\n\r\n      &__aside {\r\n        grid-column: 1 / span 12;\r\n      }\r\n    }\r\n\r\n    @media ${from(Device.Desktop)} {\r\n      &__content {\r\n        grid-column: 2 / span 5;\r\n      }\r\n\r\n      &__aside {\r\n        grid-column: -6 / span 5;\r\n      }\r\n    }\r\n  }\r\n\r\n  .article-logo-overlay {\r\n    @media ${from(Device.TabletLarge)} {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      z-index: 1;\r\n      width: 100%;\r\n      height: 100%;\r\n      background: ${brand.black};\r\n      background: linear-gradient(\r\n        to bottom, \r\n        transparent 0%, \r\n        ${brand.black} 600px, \r\n        ${brand.black} 100%\r\n      );\r\n      opacity: 0.77;\r\n    }\r\n  }\r\n`;\r\nconst ArticleGlobalStylesStyles = {\r\n    GlobalStyles,\r\n};\r\nexport default ArticleGlobalStylesStyles;\r\n","import * as React from 'react';\r\nimport S from './ArticleGlobalStyles.styles';\r\nconst ArticleGlobalStyles = () => {\r\n    return React.createElement(S.GlobalStyles, null);\r\n};\r\nexport default ArticleGlobalStyles;\r\n","import { Device } from './media';\r\n/**\r\n * Base pixel value for the \"rem\" unit.\r\n */\r\nexport const PIXELS_PER_REM = 16;\r\n/**\r\n * Default pixel value for the min width.\r\n */\r\nexport const DEFAULT_MIN_VALUE = Device.TabletSmall;\r\n/**\r\n * Default pixel value for the max width.\r\n */\r\nexport const DEFAULT_MAX_VALUE = Device.DesktopLarge;\r\n/**\r\n * Define a fluid value between the min/max values at the min/max widths.\r\n */\r\nexport function fluid(min, max, minWidth = DEFAULT_MIN_VALUE, maxWidth = DEFAULT_MAX_VALUE) {\r\n    const minRem = min / PIXELS_PER_REM;\r\n    const maxRem = max / PIXELS_PER_REM;\r\n    const minWidthRem = minWidth / PIXELS_PER_REM;\r\n    const maxWidthRem = maxWidth / PIXELS_PER_REM;\r\n    const slope = (maxRem - minRem) / (maxWidthRem - minWidthRem);\r\n    const yAxisIntersection = -minWidthRem * slope + minRem;\r\n    const clampMin = `${round(minRem)}rem`;\r\n    const clampVal = `${round(yAxisIntersection)}rem + ${round(slope * 100)}vw`;\r\n    const clampMax = `${round(maxRem)}rem`;\r\n    return `clamp(${clampMin}, ${clampVal}, ${clampMax})`;\r\n}\r\n/**\r\n * Round to nearest hundredth.\r\n */\r\nfunction round(num) {\r\n    return Math.round(num * 100) / 100;\r\n}\r\n"],"sourceRoot":""}