{"version":3,"file":"5dc9fe25-e960e139aa6ee5a67166.js","mappings":"gdAEA,MAAMA,GAAOC,EAAAA,EAAAA,GAAA,WAAAC,OAAA,cAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,wJAcPC,GAASJ,EAAAA,EAAAA,GAAA,OAAAC,OAAA,cAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,kMAeTE,GAASL,EAAAA,EAAAA,GAAA,OAAAC,OAAA,cAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,2gBA4BTG,GAAKN,EAAAA,EAAAA,GAAA,WAAAC,OAAA,cAAAD,CAAA,kkBA4BLO,IAAA,IAAC,QAAEC,GAASD,EAAA,MACA,eAAZC,EACK,0BAGA,cAAa,8EAOlBC,IAAA,IAAC,QAAED,GAASC,EAAA,MAAiB,eAAZD,GAA6B,cAAa,SAI3DE,GAAWV,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,EACbW,IAAA,IAAC,QAAEH,GAASG,EAAA,MACA,iBAAZH,EACK,4BAGA,eAAc,+tBAyDjBI,GAASZ,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,EACXa,IAAA,IAAC,QAAEL,GAASK,EAAA,MACA,eAAZL,EACK,4BAGA,eAAc,+wBA+DjBM,GAAad,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,yHAQbY,GAASf,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,6FAMTgB,IAAA,IAAC,SAAEC,GAAUD,EAAA,OACbC,EACK,wBAGA,yBAEN,wbAwBCC,GAAclB,EAAAA,EAAAA,GAAA,MAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,sTA2BdgB,GAAoBnB,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,oOAuBpBiB,GAAiBpB,EAAAA,EAAAA,GAAA,MAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,kgBAgDjBkB,GAAgBrB,EAAAA,EAAAA,GAAA,MAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,2YA6BhBmB,GAAOtB,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,QAAAC,OAAA,wJAUPoB,GAAuBvB,EAAAA,EAAAA,GAAA,KAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,kE","sources":["webpack://@ecom/uk/./src/components/TrackMyOrder/TrackMyOrder.styles.js"],"sourcesContent":["import styled from '@emotion/styled';\n\nconst Section = styled.section`\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    outline: none;\n  }\n  padding: 50px 0 10px;\n  background-color: #fcd501;\n  @media (min-width: 768px) {\n    padding-top: 120px;\n  }\n`;\n\nconst Container = styled.div`\n  max-width: 1100px;\n  width: 100%;\n  padding: 20px;\n  position: relative;\n  @media (min-width: 768px) {\n    padding: 35px 15px 15px;\n    margin: 0 auto;\n    width: calc(90% + 20px);\n  }\n  @media (min-width: 1024px) {\n    padding: 20px 0;\n  }\n`;\n\nconst TrackWrap = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  .bg-main {\n    background-position: top center;\n    background-size: contain;\n    position: relative;\n    height: 200px;\n    background-repeat: no-repeat;\n    background-image: url('https://cdn.shopify.com/s/files/1/0015/4874/6807/t/109/assets/track-order-banner.png?v=698671569082242403');\n  }\n  @media (min-width: 768px) {\n    flex-direction: row;\n    justify-content: flex-end;\n    .bg-main {\n      background-position: 0 100%;\n      background-size: 1000px 100%;\n      background-size: 1000px 100%;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n  }\n`;\n\nconst Track = styled.section`\n  background-color: white;\n  box-shadow: 0 0 20px rgb(0 0 0 / 10%);\n  border-radius: 10px;\n  overflow: hidden;\n  z-index: 2;\n  margin-bottom: 50px;\n  h2 {\n    padding: 27px 20px 19px;\n    font-size: 20px;\n    color: #ffffff;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    background-color: #293f4c;\n    text-transform: uppercase;\n    &:before {\n      content: '';\n      display: inline-block;\n      width: 25px;\n      height: 33px;\n      margin: 0 10px 0 0;\n      background-image: url('https://cdn.shopify.com/s/files/1/0015/4874/6807/t/109/assets/Track-Icon.png?v=10472497725058817427');\n      background-repeat: no-repeat;\n      background-size: 100%;\n    }\n  }\n  @media (min-width: 768px) {\n    ${({ display }) =>\n      display === 'result-box'\n        ? `\n    width: 650px;\n  `\n        : `width:370px;`}\n    h2 {\n      font-size: 22px;\n      padding: 27px 60px 19px;\n    }\n  }\n  @media (min-width: 1024px) {\n    ${({ display }) => display === 'result-box' && `width: 70vw;`}\n  }\n`;\n\nconst FirstScreen = styled.div`\n  ${({ display }) =>\n    display === 'first-screen'\n      ? `\n    display: block;\n  `\n      : `display:none;`}\n  max-width: 100%;\n  padding: 30px 15px;\n  p {\n    font-size: 16px;\n    margin-bottom: 47px;\n    font-weight: 400;\n    color: #213f4e;\n    text-align: center;\n    line-height: 1.6em;\n  }\n  form {\n    input {\n      margin-bottom: 15px;\n      width: 100%;\n      padding: 17px 20px 17px;\n      border: none;\n      box-shadow: 0 0 10px rgb(0 0 0 / 10%);\n      border-radius: 5px;\n      color: #6d818b;\n      font-size: 18px;\n      font-weight: 300;\n      height: 54px;\n      &::placeholder {\n        color: #6d818b;\n      }\n      &:focus {\n        color: #6d818b;\n      }\n    }\n    button {\n      position: relative;\n      width: 100%;\n      margin-top: 40px;\n      padding: 17px 0 15px;\n      background: #d26546;\n      box-shadow: 0 4px 0 #b1472d;\n      border-radius: 5px;\n      color: #fff;\n      font-size: 20px;\n      transition: all ease 0.5s;\n      text-transform: inherit;\n      height: auto;\n      border: none;\n      appearance: none;\n      text-align: center;\n      cursor: pointer;\n    }\n  }\n  @media (min-width: 768px) {\n    p {\n      margin-bottom: 40px;\n      font-size: 20px;\n    }\n  }\n`;\n\nconst ResultBox = styled.div`\n  ${({ display }) =>\n    display === 'result-box'\n      ? `\n    display: block;\n  `\n      : `display:none;`}\n  width: 100%;\n  min-height: 300px;\n  padding: 15px 10px 25px;\n  position: relative;\n  .status-text {\n    display: flex;\n    flex-direction: column;\n    p {\n      margin-bottom: 5px;\n      font-size: 14px;\n      margin-right: 10px;\n      line-height: 1.6em;\n      text-transform: uppercase;\n      font-weight: 500;\n      color: #213f4e;\n      span {\n        text-transform: none;\n        font-weight: 400;\n      }\n      .tracking {\n        color: #e26447;\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n    }\n    @media (min-width: 768px) {\n      flex-direction: row;\n      justify-content: space-between;\n      p {\n        margin-bottom: 15px;\n        font-size: 16px;\n      }\n    }\n    @media (min-width: 1024px) {\n      p {\n        font-size: 18px;\n      }\n    }\n  }\n  button {\n    right: 10px;\n    bottom: 15px;\n    font-size: 16px;\n    text-decoration: underline;\n    position: absolute;\n    cursor: pointer;\n    color: #e26447;\n    line-height: 1.6em;\n    background: transparent;\n    border: none;\n  }\n  @media (min-width: 1024px) {\n    padding: 35px 40px 30px;\n    button {\n      right: 40px;\n      bottom: 30px;\n      font-size: 18px;\n    }\n  }\n`;\n\nconst TrackLineWrap = styled.div`\n  padding: 45px 0 0;\n  margin-bottom: 15px;\n  border-bottom: 1px solid #cecece;\n  @media (min-width: 1024px) {\n    padding: 50px 0 20px;\n  }\n`;\nconst TrackLine = styled.div`\n  position: relative;\n  padding: 8px 0;\n  background-color: #bfbfbf;\n  border-radius: 20px;\n  .active-line {\n    ${({ dispatch }) =>\n      dispatch\n        ? `\n    width: 80%;\n  `\n        : `\n    width: 20%;\n    `}\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    background: transparent linear-gradient(90deg, #e26447 0%, #e8b74d 100%) 0%\n      0% no-repeat padding-box;\n    border-radius: 20px;\n    z-index: 3;\n    &::before {\n      content: '';\n      display: block;\n      position: absolute;\n      top: -23px;\n      right: 3px;\n      width: 36px;\n      height: 21px;\n      background: url('https://cdn.shopify.com/s/files/1/0015/4874/6807/t/109/assets/delivery-icon.png?v=5584803288446543693')\n        50% 50% no-repeat;\n      background-size: contain;\n    }\n  }\n`;\n\nconst TrackLineLabel = styled.ul`\n  margin-bottom: 0;\n  display: flex;\n  justify-content: space-between;\n  padding: 0;\n  margin-top: 15px;\n  li {\n    font-size: 12px;\n    display: inline-block;\n    line-height: 1.6;\n    font-weight: 500;\n    margin-bottom: 12px;\n    color: #213f4e;\n    span {\n      margin-top: 0;\n      display: block;\n      font-weight: 400;\n    }\n  }\n  @media (min-width: 1024px) {\n    margin-bottom: 20px;\n    li {\n      font-size: 16px;\n    }\n  }\n`;\n\nconst OrderProductsWrapper = styled.div`\n  h1 {\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 1.2;\n    color: #213f4e;\n  }\n  ul {\n    padding: 15px 0;\n    margin-bottom: 20px;\n  }\n  @media (min-width: 1024px) {\n    ul {\n      padding: 25px 20px 20px 20px;\n    }\n  }\n  @media (min-width: 1440px) {\n    ul {\n      padding: 40px 30px 30px 80px;\n    }\n  }\n`;\n\nconst OrderProductsItem = styled.li`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 10px 20px;\n  border-bottom: 1px solid #eaeaea;\n  color: #213f4e;\n  margin-bottom: 12px;\n  .img-wrap {\n    margin-right: 15px;\n    width: 70px;\n    min-width: 55px;\n    img {\n      max-width: 100%;\n    }\n  }\n  .content {\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    span {\n      margin-right: 15px;\n    }\n    h4 {\n      font-weight: 400;\n    }\n  }\n  p {\n    font-size: 14px;\n    line-height: 1.6em;\n  }\n  @media (min-width: 1024px) {\n    padding: 10px 25px 20px;\n    .img-wrap {\n      margin-right: 30px;\n    }\n    .content {\n      font-size: 16px;\n      span {\n        margin-right: 30px;\n      }\n    }\n    p {\n      font-size: 16px;\n    }\n  }\n`;\n\nconst BestSellersTitle = styled.h1`\n  font-size: 20px;\n  color: #213f4e;\n  font-weight: 600;\n  text-align: center;\n  text-transform: uppercase;\n  position: relative;\n  max-width: 280px;\n  margin: 40px auto 0;\n  &:after {\n    content: '';\n    width: 77px;\n    height: 2px;\n    background: #273e4d;\n    position: absolute;\n    bottom: -27px;\n    left: 50%;\n    transform: translateX(-50px);\n  }\n  @media (min-width: 768px) {\n    font-size: 24px;\n    margin: 40px 0 45px;\n    max-width: 100%;\n  }\n  @media (min-width: 1024px) {\n    margin-top: 99px;\n  }\n`;\n\nconst Loading = styled.div`\n  width: 6rem;\n  height: 6rem;\n  border: 3px solid #ccc;\n  border-radius: 50%;\n  border-top-color: #213f4e;\n  animation: spinner 0.6s linear infinite;\n  display: inline-block;\n`;\n\nconst TrackingValidationError = styled.p`\n  color: #213f4e;\n  font-weight: 400;\n  font-size: 18px;\n  line-height: 1.6em;\n`;\n\nexport {\n  Container,\n  TrackWrap,\n  Track,\n  FirstScreen,\n  ResultBox,\n  BestSellersTitle,\n  Section,\n  TrackLineWrap,\n  TrackLine,\n  TrackLineLabel,\n  OrderProductsWrapper,\n  OrderProductsItem,\n  Loading,\n  TrackingValidationError\n};\n"],"names":["Section","_styled","target","name","styles","Container","TrackWrap","Track","_ref","display","_ref2","FirstScreen","_ref3","ResultBox","_ref4","TrackLineWrap","TrackLine","_ref5","dispatch","TrackLineLabel","OrderProductsWrapper","OrderProductsItem","BestSellersTitle","Loading","TrackingValidationError"],"sourceRoot":""}