{"version":3,"sources":["webpack:///./src/stories/Components/Buttons/GeneralButton/Button.tsx","webpack:///./src/stories/Widgets/Header/ShortListCount/ShortListCount.styles.ts","webpack:///./src/img/icons/search.svg","webpack:///./src/stories/Components/Buttons/GeneralButton/Button.styles.ts","webpack:///./src/helpers/aspectRatio.ts","webpack:///./src/stories/Widgets/Header/Header.styles.ts","webpack:///./src/helpers/scrollToTop.ts","webpack:///./src/stories/Components/OfferCard/OfferCard.styles.ts","webpack:///./src/stories/Widgets/Header/NavigationDropdown/NavigationDropdown.styles.ts","webpack:///./src/helpers/scrollbars.ts"],"names":["Button","addon","addonPosition","branding","className","disabled","form","size","title","type","onClick","rest","React","createElement","ButtonStyles","iconPosition","Icon","position","Text","LinkButton","href","target","as","Container","styled","div","fonts","inter","bold","from","Device","DesktopLarge","Link","a","transition","brand","primary","blue","base","ShortListCountStyles","Heart","span","highlight","_path","_extends","Object","assign","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","this","SvgSearch","props","xmlns","viewBox","d","fill","PrimaryStyles","css","white","light","SecondaryStyles","TertiaryStyles","black","OutlineStyles","TransparentStyles","IconLeft","until","DesktopSmall","IconRight","hideText","BaseButtonStyles","ButtonTextStyles","semiBold","TabletLarge","button","aspectRatio","width","height","imageWrapperPreserveRatio","imageCoverContainer","relative","GlobalStyles","createGlobalStyle","Desktop","fluid","header","Layers","Header","SiteWideStyles","cubicEaseOut","NavigationDropdownStyles","TopWrapper","SiteWide","TopInner","LogoWrapper","LogoLink","MobileLarge","LogoMain","LogoBrand","img","MobileToggle","BottomWrapper","MobileWrapper","ShortlistAdded","m","regular","colourWithTransparency","ShortlistClose","ButtonReset","HeaderStyles","ShortlistImage","scrollToTop","ref","offSet","element","HTMLElement","current","document","querySelector","headerHeight","offsetHeight","window","scrollTo","top","offsetTop","behavior","ImageContainer","Image","Price","extraBold","ContentWrapper","Title","OfferCardStyles","CtaWrapper","section","Inner","Outer","List","ul","scrollbars","grey","Item","li","sofiaPro","medium","CardList","CardListHeader","CardItem"],"mappings":"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","file":"default~ProductListing~VacancyListing~VacancyListing2-2796cc9b1c828aa56ecd.js","sourcesContent":["import React from 'react';\r\nimport { ButtonStyles } from './Button.styles';\r\nconst Button = ({ addon, addonPosition, branding, className, disabled, form, size, title, type = 'button', onClick, ...rest }) => {\r\n    return (React.createElement(ButtonStyles.Button, { className: className, branding: branding, disabled: disabled, form: form, size: size, iconPosition: addonPosition, type: type, onClick: onClick, ...rest },\r\n        addon && addonPosition === 'left' && (React.createElement(ButtonStyles.Icon, { position: addonPosition }, addon)),\r\n        React.createElement(ButtonStyles.Text, null, title),\r\n        addon && addonPosition === 'right' && (React.createElement(ButtonStyles.Icon, { position: addonPosition }, addon))));\r\n};\r\nconst LinkButton = ({ addon, addonPosition, branding, className, href, size, target = '_self', title, ...rest }) => {\r\n    return (React.createElement(ButtonStyles.Button, { className: className, as: \"a\", branding: branding, href: href, size: size, target: target, ...rest },\r\n        addon && addonPosition === 'left' && (React.createElement(ButtonStyles.Icon, { position: addonPosition }, addon)),\r\n        React.createElement(ButtonStyles.Text, null, title),\r\n        addon && addonPosition === 'right' && (React.createElement(ButtonStyles.Icon, { position: addonPosition }, addon))));\r\n};\r\nexport { Button as default, LinkButton };\r\n","import { transition } from '@helpers/animation';\r\nimport brand from '@helpers/brand';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from } from '@helpers/media';\r\nimport styled from 'styled-components';\r\nconst Container = styled.div `\r\n  ${fonts.inter.bold};\r\n\r\n  display: block;\r\n  font-size: 13px;\r\n  line-height: 1em;\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 14px;\r\n  }\r\n`;\r\nconst Link = styled.a `\r\n  ${transition('text-decoration-color', 0.2)};\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  color: ${brand.primary.blue.base};\r\n  text-decoration: underline;\r\n  text-underline-position: under;\r\n  text-decoration-color: transparent;\r\n\r\n  &:focus,\r\n  &:hover {\r\n    text-decoration-color: currentColor;\r\n  }\r\n`;\r\nconst Heart = styled.span `\r\n  display: inline-block;\r\n  height: 15px;\r\n  margin: 0 8px;\r\n  width: 15px;\r\n  color: ${brand.primary.blue.highlight};\r\n`;\r\nconst ShortListCountStyles = {\r\n    Container,\r\n    Heart,\r\n    Link,\r\n};\r\nexport default ShortListCountStyles;\r\n","var _path;\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport * as React from \"react\";\n\nfunction SvgSearch(props) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\"\n  }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n    d: \"M14.245 12.571h-.912l-.342-.286a7.564 7.564 0 001.767-4.857 7.379 7.379 0 10-7.351 7.429 7.637 7.637 0 004.843-1.771l.342.286v.914l5.7 5.714L20 18.286zm-6.838 0a5.143 5.143 0 115.128-5.143 5.114 5.114 0 01-5.127 5.143z\",\n    fill: \"currentColor\"\n  })));\n}\n\nexport default __webpack_public_path__ + \"480d661dd05b6fe3caeeee1798f300f9.svg\";\nexport { SvgSearch as ReactComponent };","import { transition } from '@helpers/animation';\r\nimport brand from '@helpers/brand';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, until } from '@helpers/media';\r\nimport styled, { css } from 'styled-components';\r\nconst Text = styled.div ``;\r\nexport const PrimaryStyles = css `\r\n  border: 2px solid ${brand.primary.blue.base};\r\n  background-color: ${brand.primary.blue.base};\r\n  color: ${brand.white};\r\n\r\n  &:focus-visible,\r\n  &:hover {\r\n    border-color: var(--hoverColor, ${brand.primary.blue.light}) !important;\r\n    background-color: var(--hoverColor, ${brand.primary.blue.light}) !important;\r\n    color: ${brand.white};\r\n  }\r\n\r\n  &:active {\r\n    border-color: ${brand.primary.blue.base};\r\n    background-color: ${brand.primary.blue.base};\r\n    color: ${brand.white};\r\n  }\r\n`;\r\nexport const SecondaryStyles = css `\r\n  background-color: transparent;\r\n  color: ${brand.white};\r\n  border: 2px solid ${brand.white};\r\n\r\n  &:focus-visible,\r\n  &:hover,\r\n  &:active {\r\n    border-color: ${brand.primary.blue.light};\r\n    background-color: ${brand.primary.blue.light};\r\n    color: ${brand.white};\r\n  }\r\n`;\r\nexport const TertiaryStyles = css `\r\n  background-color: ${brand.white};\r\n  color: ${brand.black};\r\n  border: 2px solid ${brand.white};\r\n\r\n  &:focus-visible,\r\n  &:hover {\r\n    border-color: ${brand.primary.blue.base};\r\n    background-color: ${brand.primary.blue.base};\r\n    color: ${brand.white};\r\n  }\r\n\r\n  &:active {\r\n    border-color: ${brand.white};\r\n    background-color: ${brand.primary.blue.base};\r\n    color: ${brand.white};\r\n  }\r\n`;\r\nexport const OutlineStyles = css `\r\n  background-color: ${brand.white};\r\n  color: ${brand.primary.blue.base};\r\n  border: 2px solid ${brand.primary.blue.base};\r\n\r\n  &:focus-visible,\r\n  &:hover,\r\n  &:active {\r\n    border-color: ${brand.primary.blue.light};\r\n    background-color: ${brand.primary.blue.light};\r\n    color: ${brand.white};\r\n  }\r\n`;\r\nexport const TransparentStyles = css `\r\n  background-color: transparent;\r\n  color: ${brand.white};\r\n  border: 2px solid ${brand.white};\r\n\r\n  &:focus-visible,\r\n  &:hover,\r\n  &:active {\r\n    border-color: ${brand.white};\r\n    background-color: ${brand.primary.blue.base};\r\n    color: ${brand.white};\r\n  }\r\n`;\r\nconst IconLeft = css `\r\n  padding-right: 15px;\r\n\r\n  @media ${until(Device.DesktopSmall)} {\r\n    padding-right: 0;\r\n  }\r\n`;\r\nconst IconRight = css `\r\n  padding-left: 15px;\r\n\r\n  @media ${until(Device.DesktopSmall)} {\r\n    padding-left: 0;\r\n  }\r\n`;\r\nconst hideText = css `\r\n  ${Text} {\r\n    @media ${until(Device.DesktopSmall)} {\r\n      display: none;\r\n    }\r\n  }\r\n`;\r\nconst Icon = styled.div `\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n\r\n  ${({ position }) => {\r\n    switch (position) {\r\n        case 'left':\r\n            return IconLeft;\r\n        case 'right':\r\n            return IconRight;\r\n        default:\r\n            break;\r\n    }\r\n}}\r\n\r\n  svg {\r\n    max-height: 24px;\r\n    width: 20px;\r\n  }\r\n`;\r\nexport const BaseButtonStyles = css `\r\n  ${transition('color, background-color, border-color')};\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border-radius: 25px;\r\n  height: 50px;\r\n  justify-content: center;\r\n  padding: 0 32px;\r\n  text-decoration: none;\r\n  user-select: none;\r\n  white-space: nowrap;\r\n`;\r\nexport const ButtonTextStyles = css `\r\n  ${fonts.inter.semiBold};\r\n\r\n  font-size: 16px;\r\n  line-height: 26px;\r\n  text-transform: uppercase;\r\n  transform: translateY(-2px);\r\n  vertical-align: middle;\r\n\r\n  @media ${until(Device.TabletLarge)} {\r\n    font-size: 12px;\r\n    line-height: 20px;\r\n    white-space: break-spaces;\r\n    text-align: center;\r\n  }\r\n`;\r\nconst Button = styled.button `\r\n  ${BaseButtonStyles};\r\n\r\n  ${Text} {\r\n    ${ButtonTextStyles};\r\n\r\n    display: inline-block;\r\n  }\r\n\r\n  ${({ branding }) => {\r\n    switch (branding) {\r\n        case 'primary':\r\n            return PrimaryStyles;\r\n        case 'secondary':\r\n            return SecondaryStyles;\r\n        case 'tertiary':\r\n            return TertiaryStyles;\r\n        case 'outline':\r\n            return OutlineStyles;\r\n        case 'transparent':\r\n            return TransparentStyles;\r\n        default:\r\n            break;\r\n    }\r\n}}\r\n\r\n  ${({ iconPosition }) => {\r\n    switch (iconPosition) {\r\n        case 'right':\r\n            return hideText;\r\n        default:\r\n            break;\r\n    }\r\n}}\r\n\r\n  &:disabled {\r\n    opacity: 0.5;\r\n    pointer-events: none;\r\n  }\r\n`;\r\nexport const ButtonStyles = {\r\n    Button,\r\n    Icon,\r\n    Text,\r\n};\r\n","import { css } from 'styled-components';\r\n/**\r\n * Returns the aspect ratio of the given width and height as a percentage.\r\n */\r\nexport function aspectRatio(width, height) {\r\n    return (height / width) * 100;\r\n}\r\n/**\r\n * Re-usable styles for image container where the\r\n * image needs to maintain it's aspect ratio\r\n *\r\n * @param width\r\n * @param height\r\n * @returns\r\n */\r\nexport function imageWrapperPreserveRatio(width, height) {\r\n    if (!width && !height) {\r\n        return null;\r\n    }\r\n    return css `\r\n    position: relative;\r\n    height: 0;\r\n    width: 100%;\r\n    overflow: hidden;\r\n    overflow: clip;\r\n    padding-bottom: ${aspectRatio(width, height)}%;\r\n  `;\r\n}\r\n/**\r\n * Re-usable styles for an image placed within\r\n * a container maintaining aspect ratio\r\n */\r\nexport const imageCoverContainer = (relative) => css `\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  object-position: center;\r\n  ${!relative && 'position: absolute; top: 0;left: 0;'}\r\n`;\r\n","import { cubicEaseOut, transition } from '@helpers/animation';\r\nimport brand, { colourWithTransparency } from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { ButtonReset } from '@helpers/global';\r\nimport { Layers } from '@helpers/layers';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport SiteWide from '@stories/Components/Global/SiteWide/SiteWide';\r\nimport SiteWideStyles from '@stories/Components/Global/SiteWide/SiteWide.styles';\r\nimport { m } from 'framer-motion';\r\nimport styled, { createGlobalStyle } from 'styled-components';\r\nimport NavigationDropdownStyles from './NavigationDropdown/NavigationDropdown.styles';\r\nimport ShortListCountStyles from './ShortListCount/ShortListCount.styles';\r\nconst GlobalStyles = createGlobalStyle `\r\n  /* Declare global header CSS variables. */\r\n  :root {\r\n    --headerHeight: 92px;\r\n    --headerReducedOffset: 0px;\r\n\r\n    @media ${from(Device.Desktop)} {\r\n      --headerHeight: 177px;\r\n      --headerNavHeight: ${fluid(51, 54, Device.DesktopSmall)};\r\n      --headerReducedOffset: calc(var(--headerNavHeight) - var(--headerHeight));\r\n    }\r\n  }\r\n\r\n  #main {\r\n    padding-top: var(--headerHeight);\r\n  }\r\n`;\r\nconst Container = styled.header `\r\n  ${transition('transform, border-color', 0.2)};\r\n\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  display: flex;\r\n  background: ${brand.white};\r\n  border-bottom: 4px solid ${brand.primary.blue.base};\r\n  flex-direction: column;\r\n  height: var(--headerHeight);\r\n  padding-top: 24px;\r\n  width: 100%;\r\n  z-index: ${Layers.Header};\r\n\r\n  > ${SiteWideStyles.Container} {\r\n    align-items: center;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    transition: transform 0.3s ${cubicEaseOut};\r\n\r\n    > ${SiteWideStyles.Container} {\r\n      align-items: flex-start;\r\n    }\r\n\r\n    &[data-reduce='true'] {\r\n      transform: translateY(var(--headerReducedOffset));\r\n    }\r\n  }\r\n\r\n  &:has(${NavigationDropdownStyles.Container}[data-active='true']) {\r\n    border-color: ${brand.primary.blue.highlight};\r\n\r\n    &::after {\r\n      opacity: 0;\r\n    }\r\n  }\r\n`;\r\nconst TopWrapper = styled(SiteWide) `\r\n  display: flex;\r\n  align-items: flex-start;\r\n`;\r\nconst TopInner = styled.div `\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 16px;\r\n  margin-left: auto;\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    ${ShortListCountStyles.Container} {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    gap: 32px;\r\n  }\r\n`;\r\nconst LogoWrapper = styled.div `\r\n  display: flex;\r\n  gap: 24px;\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    margin-right: 14px;\r\n  }\r\n`;\r\nconst LogoLink = styled.a `\r\n  display: block;\r\n\r\n  @media ${until(Device.MobileLarge)} {\r\n    &[data-brand='true'] {\r\n      display: none;\r\n    }\r\n  }\r\n`;\r\nconst LogoMain = styled.span `\r\n  display: block;\r\n  height: auto;\r\n  width: 106px;\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    width: 180px;\r\n  }\r\n`;\r\nconst LogoBrand = styled.img `\r\n  display: block;\r\n  height: 38px;\r\n  width: auto;\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    height: auto;\r\n    width: auto;\r\n  }\r\n`;\r\nconst MobileToggle = styled.div `\r\n  display: inline-flex;\r\n  align-items: center;\r\n  color: ${brand.primary.blue.base};\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst BottomWrapper = styled(SiteWide) `\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  margin-top: auto;\r\n\r\n  &::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 50%;\r\n    height: 1px;\r\n    width: 100dvw;\r\n    transform: translateX(-50%);\r\n    background: ${brand.primary.blue.base};\r\n  }\r\n\r\n  @media ${until(Device.Desktop)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst MobileWrapper = styled.div `\r\n  display: block;\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst ShortlistAdded = styled(m.div) `\r\n  ${fonts.inter.regular};\r\n\r\n  position: fixed;\r\n  top: calc(var(--headerHeight) + 12px);\r\n  right: 12px;\r\n  display: flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 260px;\r\n  background: ${brand.white};\r\n  border: 1px solid ${brand.primary.blue.base};\r\n  color: ${brand.primary.blue.base};\r\n  z-index: ${Layers.Header + 1};\r\n  box-shadow: 0 0 4px ${colourWithTransparency(brand.black, 0.2)};\r\n  padding: 8px 18px 8px 8px;\r\n  border-radius: 4px;\r\n  font-size: ${fluid(14, 16, Device.DesktopSmall)};\r\n  line-height: 1.3;\r\n\r\n  &[data-reduced='true'] {\r\n    top: calc(var(--headerHeight) + 12px + var(--headerReducedOffset));\r\n  }\r\n`;\r\nconst ShortlistClose = styled.button `\r\n  ${ButtonReset};\r\n\r\n  position: absolute;\r\n  top: 6px;\r\n  right: 6px;\r\n  width: 8px;\r\n  height: 8px;\r\n\r\n  svg {\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n`;\r\nconst ShortlistImage = styled.img `\r\n  width: 50px;\r\n  height: 50px;\r\n`;\r\nconst HeaderStyles = {\r\n    BottomWrapper,\r\n    Container,\r\n    GlobalStyles,\r\n    MobileWrapper,\r\n    LogoBrand,\r\n    LogoLink,\r\n    LogoMain,\r\n    LogoWrapper,\r\n    MobileToggle,\r\n    TopInner,\r\n    TopWrapper,\r\n    ShortlistAdded,\r\n    ShortlistImage,\r\n    ShortlistClose,\r\n};\r\nexport default HeaderStyles;\r\n","import HeaderStyles from '@stories/Widgets/Header/Header.styles';\r\nexport const scrollToTop = (ref, \r\n// Additional offset to be applied, such as for sticky inner page nav\r\noffSet) => {\r\n    const element = ref instanceof HTMLElement ? ref : ref?.current;\r\n    if (element) {\r\n        const header = document.querySelector(HeaderStyles.Container);\r\n        const headerHeight = header?.offsetHeight ?? 0;\r\n        window.scrollTo({ top: element.offsetTop - headerHeight - (offSet ?? 0), behavior: 'smooth' });\r\n    }\r\n};\r\n","import { aspectRatio } from '@helpers/aspectRatio';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device } from '@helpers/media';\r\nimport styled from 'styled-components';\r\nimport { ButtonStyles } from '../Buttons/GeneralButton/Button.styles';\r\nconst Container = styled.a `\r\n  position: relative;\r\n  display: block;\r\n  text-decoration: none;\r\n`;\r\nconst ImageContainer = styled.div `\r\n  position: relative;\r\n  height: 0px;\r\n  padding-bottom: ${aspectRatio(380, 334)}%;\r\n  width: 100%;\r\n`;\r\nconst Image = styled.img `\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  display: block;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  width: 100%;\r\n`;\r\nconst Price = styled.span `\r\n  ${fonts.inter.extraBold};\r\n\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 50%;\r\n  background-color: ${brand.primary.blue.base};\r\n  color: ${brand.white};\r\n  font-size: ${fluid(14, 20, Device.Desktop)};\r\n  line-height: 1.2em;\r\n  max-width: 100%;\r\n  overflow: hidden;\r\n  padding: ${fluid(8, 12, Device.Desktop)} ${fluid(8, 16, Device.Desktop)};\r\n  text-align: center;\r\n  text-overflow: ellipsis;\r\n  transform: translateY(50%) translateX(-50%);\r\n  white-space: nowrap;\r\n`;\r\nconst ContentWrapper = styled.div `\r\n  padding-top: ${fluid(28, 42, Device.Desktop)};\r\n`;\r\nconst Title = styled.div `\r\n  ${fonts.inter.extraBold};\r\n\r\n  color: ${brand.black};\r\n  font-size: ${fluid(14, 18, Device.Desktop)};\r\n  line-height: 1.2em;\r\n  margin-bottom: 16px;\r\n  text-align: center;\r\n`;\r\nconst CtaWrapper = styled.div `\r\n  ${ButtonStyles.Button} {\r\n    width: 100%;\r\n  }\r\n`;\r\nexport const OfferCardStyles = {\r\n    Container,\r\n    ContentWrapper,\r\n    CtaWrapper,\r\n    Image,\r\n    ImageContainer,\r\n    Price,\r\n    Title,\r\n};\r\n","import { transition } from '@helpers/animation';\r\nimport brand, { colourWithTransparency } from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from } from '@helpers/media';\r\nimport scrollbars from '@helpers/scrollbars';\r\nimport SiteWide from '@stories/Components/Global/SiteWide/SiteWide';\r\nimport { OfferCardStyles } from '@stories/Components/OfferCard/OfferCard.styles';\r\nimport styled from 'styled-components';\r\nconst Container = styled.section `\r\n  --colWidth: 280px;\r\n\r\n  position: absolute;\r\n  top: 100%;\r\n  left: calc(var(--sitePadding) * -1);\r\n  color: ${brand.black};\r\n  height: 100vh;\r\n  max-height: 638px;\r\n  max-height: min(638px, 100vh - var(--headerHeight) - 16px);\r\n  pointer-events: none; // disable pointer events on container as this has transparent areas either side\r\n\r\n  [data-central-menu='true'] & {\r\n    pointer-events: all;\r\n    width: calc(var(--colWidth) * 3);\r\n    left: auto;\r\n    right: calc(var(--sitePadding) * -1);\r\n  }\r\n\r\n  &[data-active='false'] {\r\n    max-height: 0;\r\n\r\n    ${() => Inner} {\r\n      max-height: 0;\r\n    }\r\n  }\r\n\r\n  @media (min-height: 900px) {\r\n    max-height: min(638px, 90vh - var(--headerHeight));\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    --colWidth: 310px;\r\n  }\r\n`;\r\nconst Outer = styled(SiteWide) `\r\n  min-height: 0;\r\n  z-index: 2;\r\n`;\r\nconst Inner = styled.div `\r\n  ${transition('border-color', 0.2)};\r\n\r\n  position: absolute;\r\n  border-top: 4px solid transparent;\r\n  pointer-events: all; // re-enable pointer events on the inner container\r\n  display: flex;\r\n\r\n  [data-active='true'] & {\r\n    border-color: ${brand.primary.blue.highlight};\r\n  }\r\n`;\r\nconst List = styled.ul `\r\n  display: block;\r\n  overflow-y: auto;\r\n  // allow space for scroll bar.\r\n  width: var(--colWidth);\r\n  position: relative;\r\n  box-shadow: 3px 0 6px ${colourWithTransparency(brand.black, 0.08)};\r\n\r\n  ${scrollbars};\r\n\r\n  &[data-empty-level='true'] {\r\n    background-color: ${brand.white};\r\n  }\r\n\r\n  &[data-empty-level='false'] {\r\n    background-color: none;\r\n  }\r\n\r\n  &[data-level='1'] {\r\n    --paddingX: 8px;\r\n\r\n    background-color: ${brand.primary.grey.light};\r\n    z-index: 3;\r\n    max-height: 0;\r\n\r\n    &[data-active='true'] {\r\n      padding: 12px var(--paddingX);\r\n      max-height: 638px;\r\n      transition: max-height 0.3s ease-out;\r\n    }\r\n  }\r\n\r\n  &[data-level='2'],\r\n  &[data-level='3'] {\r\n    --paddingX: 18px;\r\n\r\n    transition: width 0.1s ease-in;\r\n    min-height: 638px;\r\n    width: 0;\r\n    padding: 0;\r\n\r\n    &[data-active='true'] {\r\n      width: var(--colWidth);\r\n      padding: 12px var(--paddingX);\r\n      transition: width 0.3s ease-in;\r\n    }\r\n  }\r\n\r\n  &[data-level='2'] {\r\n    background-color: #fafafa;\r\n    z-index: 2;\r\n  }\r\n\r\n  &[data-level='3'] {\r\n    background-color: ${brand.white};\r\n    z-index: 1;\r\n  }\r\n`;\r\nconst Item = styled.li `\r\n  ${transition('background-color', 0.2)};\r\n\r\n  position: relative;\r\n  display: block;\r\n  border-radius: 4px;\r\n  position: relative;\r\n  width: calc(var(--colWidth) - (var(--paddingX) * 2));\r\n\r\n  &[aria-current='true'],\r\n  &:focus-within,\r\n  &:hover {\r\n    background-color: ${colourWithTransparency(brand.primary.blue.light, 0.3)};\r\n  }\r\n\r\n  ${List}[data-level=\"1\"] & {\r\n    [data-link-lines='true'] & {\r\n      &:after {\r\n        left: -8px;\r\n        width: calc(100% + 16px);\r\n      }\r\n    }\r\n  }\r\n\r\n  [data-link-lines='true'] & {\r\n    ${() => Link} {\r\n      margin: 5px 0 10px;\r\n    }\r\n\r\n    &:after {\r\n      content: '';\r\n      position: absolute;\r\n      width: calc(100% + 32px);\r\n      border-bottom: 1px solid #d9d9d9;\r\n      left: -16px;\r\n      bottom: -5px;\r\n    }\r\n  }\r\n\r\n  &:last-child {\r\n    &:after {\r\n      border-bottom: none;\r\n    }\r\n  }\r\n\r\n  &[aria-current='true'] {\r\n    &:before {\r\n      content: '';\r\n      position: absolute;\r\n      width: 3px;\r\n      height: 16px;\r\n      border-radius: 0 4px 4px 0;\r\n      background-color: ${brand.primary.blue.base};\r\n      left: -8px;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n\r\n      ${List}[data-level=\"2\"] & {\r\n        left: -16px;\r\n      }\r\n    }\r\n\r\n    ${() => Link} {\r\n      ${fonts.inter.extraBold};\r\n\r\n      font-size: 14px;\r\n    }\r\n  }\r\n`;\r\nconst Link = styled.a `\r\n  ${transition('text-decoration-color', 0.2)};\r\n  ${fonts.sofiaPro.medium};\r\n\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  color: ${brand.black};\r\n  font-size: 16px;\r\n  letter-spacing: normal;\r\n  line-height: 1.2em;\r\n  padding: 0 8px;\r\n  height: ${fluid(42, 46)};\r\n  text-decoration: underline;\r\n  text-transform: none;\r\n  text-decoration-color: transparent;\r\n\r\n  &:focus,\r\n  &:hover {\r\n    text-decoration-color: currentColor;\r\n  }\r\n\r\n  svg {\r\n    position: absolute;\r\n    width: 7px;\r\n    height: 11px;\r\n    right: 8px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n  }\r\n\r\n  ${List}[data-level=\"1\"] & {\r\n    ${fonts.inter.extraBold};\r\n\r\n    font-size: 18px;\r\n  }\r\n\r\n  ${List}[data-level=\"2\"] & {\r\n    font-size: 18px;\r\n  }\r\n`;\r\nconst CardList = styled.ul `\r\n  display: grid;\r\n  column-gap: 40px;\r\n  grid-column: -7 / span 6;\r\n  grid-row: span 2;\r\n  grid-template-columns: repeat(2, 1fr);\r\n  overflow-y: auto;\r\n  padding: 23px 18px;\r\n  background-color: ${brand.white};\r\n  height: 100%;\r\n\r\n  ${scrollbars}\r\n`;\r\nconst CardListHeader = styled.li `\r\n  border-bottom: 2px solid ${brand.primary.blue.base};\r\n  font-size: 22px;\r\n  grid-column: span 2;\r\n  margin-bottom: 24px;\r\n  padding-bottom: 8px;\r\n  text-transform: none;\r\n  max-height: 60px;\r\n`;\r\nconst CardItem = styled.li `\r\n  ${OfferCardStyles.Container} {\r\n    display: flex;\r\n    flex-direction: column;\r\n    height: 100%;\r\n  }\r\n`;\r\nconst NavigationDropdownStyles = {\r\n    CardItem,\r\n    CardListHeader,\r\n    CardList,\r\n    Container,\r\n    Inner,\r\n    Item,\r\n    Link,\r\n    List,\r\n    Outer,\r\n};\r\nexport default NavigationDropdownStyles;\r\n","import { css } from 'styled-components';\r\nexport default css `\r\n  &::-webkit-scrollbar-track {\r\n    background-color: none;\r\n  }\r\n\r\n  &::-webkit-scrollbar {\r\n    background-color: none;\r\n    height: var(--scrollbar-width, 10px);\r\n    width: var(--scrollbar-width, 10px);\r\n  }\r\n\r\n  &::-webkit-scrollbar-thumb {\r\n    background-color: #9c9fa1;\r\n    border-radius: calc(var(--scrollbar-width, 10px) / 2);\r\n    cursor: pointer;\r\n  }\r\n`;\r\n"],"sourceRoot":""}