{"version":3,"file":"1a441b41-951c78aac5d255940a42.js","mappings":"ifAGO,MAAMA,GAAYC,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,yFAWZC,GAASJ,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,QACbK,IAAA,IAAC,WAAEC,GAAYD,EAAA,MAAmB,GAAS,GAAC,2LAU9BE,EAAAA,GAAYC,EAAC,8EASvBC,GAAeT,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,qeAgCfO,GAAaV,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,oHAOHO,EAAAA,GAAYI,GAAE,uBAKxBC,GAASZ,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,kEAKCO,EAAAA,GAAYM,EAAC,iCAKvBC,GAAgBd,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,YAChBe,IAAA,IAAC,WAAEC,GAAYD,EAAA,OAAOC,EAAsB,OAAT,MAAe,GAAC,6FAKzCT,EAAAA,GAAYI,GAAE,qBAKxBM,GAAKjB,EAAAA,EAAAA,GAAA,KAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,0LAYLe,GAAclB,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,2DAOdgB,GAAInB,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,2BAgBJiB,GARUb,EAAAA,GAAYI,IAQZX,EAAAA,EAAAA,GAAA,KAAAC,OAAA,YAAAD,CAAA,6SA0BEO,EAAAA,GAAYI,GAAE,mCAkD1BU,GArCUd,EAAAA,GAAYI,IAqCdX,EAAAA,EAAAA,GAAA,KAAAC,OAAA,YAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,sXAiCRmB,GAAatB,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,qGAMHO,EAAAA,GAAYI,GAAE,sBAKxBY,GAAYvB,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,uGAMFO,EAAAA,GAAYI,GAAE,wCAGdJ,EAAAA,GAAYI,GAAE,oCAKxBa,GAAOxB,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,EACfyB,GACDA,EAAMC,OACD,6RAYA,iRAWS,KAGLC,GAAa3B,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,4H","sources":["webpack://@ecom/uk/./src/components/Header/Header.styles.js"],"sourcesContent":["import styled from '@emotion/styled';\nimport { breakpoints } from '../../utils/styles';\n\nexport const MaxContainer = styled.div`\n  top: 0;\n  left: 0;\n  position: fixed;\n  z-index: 10;\n  width: 100vw;\n  @media (max-width: 640px) {\n    top: 0;\n  }\n`;\n\nexport const Container = styled.div`\n  top: ${({ isHomePage }) => (isHomePage ? '0' : '0')};\n  left: 0;\n  width: 100vw;\n  height: 75px;\n  display: grid;\n  position: fixed;\n  grid-template-rows: 75px;\n  background-color: var(--petlab-white);\n  border-bottom: 1px solid #ccd2e3;\n  z-index: 101;\n  @media (min-width: ${breakpoints.l}px) {\n    height: 90px;\n    grid-template-rows: 88px;\n  }\n  @media (max-width: 640px) {\n    top: 0;\n  }\n`;\n\nexport const HeaderContainer = styled.div`\n  width: 100%;\n  height: 100%;\n  display: grid;\n  margin: 0 auto;\n  max-width: 1440px;\n  align-items: center;\n  grid-template-columns: 25% auto 25%;\n\n  @media (max-width: 280px) {\n    justify-content: flex-end;\n  }\n  @media (min-width: 1201px) {\n    height: 88px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0 6%;\n  }\n  .menu-icon-container {\n    justify-self: center;\n    @media (min-width: 1201px) {\n      display: none;\n    }\n    @media (min-width: 570px) and (max-width: 1200px) {\n      justify-self: flex-start;\n      padding-left: 20%;\n      margin-left: 15px;\n    }\n  }\n`;\n\nexport const LogoContainer = styled.div`\n  justify-self: center;\n  position: relative;\n  z-index: 101;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  @media (min-width: ${breakpoints.xl}px) {\n    margin: 0 auto;\n  }\n`;\n\nexport const LogoImage = styled.img`\n  justify-self: center;\n  width: 116px;\n  height: 24px;\n\n  @media (min-width: ${breakpoints.s}px) {\n    width: 192px;\n    height: 38px;\n  }\n`;\nexport const RightContentWrap = styled.div`\n  display: ${({ searchOpen }) => (!searchOpen ? 'flex' : 'none')};\n  width: 95%;\n  height: 100%;\n  align-items: center;\n  justify-content: space-evenly;\n  @media (min-width: ${breakpoints.xl}px) {\n    height: 40px;\n  }\n`;\n\nexport const Offer = styled.a`\n  font-family: 'Neuzeit Grotesk', serif;\n  display: flex;\n  color: #008900;\n  cursor: pointer;\n  min-width: 55px;\n  margin-right: 32px;\n  white-space: nowrap;\n  text-decoration: underline;\n  text-underline-offset: 1px;\n`;\n\nexport const OfferContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 1px;\n  margin-top: 2px;\n`;\n\nexport const Icon = styled.img`\n  width: 35px;\n  height: 26px;\n`;\n\nexport const SearchIcon = styled.img`\n  cursor: pointer;\n  display: none;\n  @media (min-width: ${breakpoints.xl}px) {\n    display: block;\n    margin-right: 32px;\n  }\n  width: 20px;\n  height: 20px;\n`;\n\nexport const IconButton = styled.a`\n  display: flex;\n  align-items: center;\n  justify-content: right;\n  justify-self: center;\n  cursor: pointer;\n  margin-right: 14px;\n  picture {\n    width: 25px;\n    height: 25px;\n  }\n\n  .menu-icon {\n    width: 1.7em;\n    height: 1.7em;\n  }\n\n  .menu-text {\n    @media (max-width: 320px) {\n      display: none;\n    }\n    font-size: 1em;\n    color: var(--petlab-blue); // This Should Change To PetLab Color\n  }\n\n  .cart-align {\n    @media (min-width: ${breakpoints.xl}px) {\n      justify-self: flex-start;\n    }\n  }\n`;\n\nexport const IconButtonSearch = styled(IconButton)`\n  display: none;\n\n  picture {\n    height: 20px;\n  }\n\n  @media (min-width: ${breakpoints.xl}px) {\n    display: block;\n    align-self: center;\n  }\n`;\n\nexport const CartItems = styled.div`\n  bottom: 5px;\n  right: 10px;\n  width: 15px;\n  height: 15px;\n  color: var(--petlab-white);\n  display: flex;\n  font-size: 10px;\n  position: relative;\n  border-radius: 100%;\n  background: var(--petlab-red);\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const SearchContainer = styled.div`\n  display: ${({ open }) => (open ? 'block' : 'none')};\n  width: 321px;\n  animation: fadeInAnimation 0.5s;\n  @keyframes fadeInAnimation {\n    from {\n      width: 0;\n      opacity: 0;\n    }\n    to {\n      width: 321px;\n      opacity: 1;\n    }\n  }\n`;\n\nexport const LogoLink = styled.a`\n  grid-column: 2/2;\n  grid-row: 1/1;\n  display: flex;\n  justify-content: center;\n\n  ˝ &:not(.animated) {\n    @media screen and (max-width: 500px) {\n      width: 160px;\n    }\n  }\n\n  @media (min-width: 1200px) {\n    margin: 0 auto;\n    grid-column: 1/1 !important;\n    &.searching {\n      width: 50%;\n    }\n  }\n\n  .animation {\n    width: 290px;\n    position: relative;\n    @media screen and (max-width: 500px) {\n      width: 200px;\n    }\n\n    @media screen and (max-width: 400px) {\n      width: 170px;\n    }\n  }\n`;\n\nexport const RightSideWrap = styled.div`\n  display: flex;\n  align-items: center;\n  height: 100%;\n  width: 31%;\n  justify-content: flex-end;\n  @media (max-width: ${breakpoints.xl}px) {\n    display: none;\n  }\n`;\n\nexport const LeftSideWrap = styled.div`\n  display: flex;\n  align-items: center;\n  height: 100%;\n  width: 31%;\n  justify-content: flex-start;\n  @media (max-width: ${breakpoints.xl}px) {\n    display: none;\n  }\n  @media (min-width: ${breakpoints.xl}px) {\n    justify-content: flex-start;\n  }\n`;\n\nexport const Overlay = styled.div`\n  ${(props) =>\n    props.isOpen\n      ? `\n      position: fixed; \n      display: block;\n  width: 100%;\n  height: 100%;\n  opacity: 1;\n  top: 0;\n  left: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n  backdrop-filter: blur(2px);\n  transition: opacity 0.7s, background-filter 1s; background-color 0.4s;\n  z-index: 101;`\n      : `\n      position: fixed;\n    display: block;\n    width: 0%;\n    backdrop-filter: blur(0px);\n    height: 0%;\n    opacity: 0;\n    top: 0;\n    left: 0;\n    background-color: rgba(0, 0, 0, 0);\n    transition: opacity 0.3s, background-color 0.3s;\n    z-index: 101;`}\n`;\n\nexport const CartContainer = styled.div`\n  display: none;\n  @media (min-width: 200px) and (max-width: 1200px) {\n    display: flex;\n    justify-content: flex-end;\n    padding-right: 20%;\n  }\n`;\n"],"names":["MaxContainer","_styled","target","name","styles","Container","_ref","isHomePage","breakpoints","l","HeaderContainer","LogoContainer","xl","LogoImage","s","RightContentWrap","_ref2","searchOpen","Offer","OfferContainer","Icon","IconButton","LogoLink","RightSideWrap","LeftSideWrap","Overlay","props","isOpen","CartContainer"],"sourceRoot":""}