{"version":3,"file":"CarComparisonFooterTopBand-5b897f5b.js","sources":["../../src/assets/img/chevron-white.svg","../../src/assets/img/close-white.svg","../../src/components/car-comparison/CarComparisonFooterTopBand.vue"],"sourcesContent":["export default \"__VITE_ASSET__b0f04cfb__\"","export default \"__VITE_ASSET__03b87e9b__\"","<template>\r\n  <div class=\"car-comparison-footer__top-band\">\r\n    <div class=\"container car-comparison-footer__top-band-btn-container\">\r\n      <button @click=\"toggleShowCarsOnMobile\" class=\"car-comparison-footer__btn show-more-btn\">\r\n        <small>{{ showCarsOnMobile ? 'Hide' : 'Show' }} cars</small> &nbsp; &nbsp;\r\n        <img\r\n          :src=\"ChevronIconWhite\"\r\n          alt=\"An icon of a chevron.\"\r\n          class=\"car-comparison-footer__btn--icon\"\r\n          :class=\"{\r\n            rotate180: showCarsOnMobile,\r\n          }\"\r\n        />\r\n      </button>\r\n      <button @click=\"showCarComparisonFooter = false\" class=\"car-comparison-footer__btn close-btn\">\r\n        <small>{{ comparisonFooter.closeButtonText }}</small> &nbsp; &nbsp;\r\n        <img :src=\"CloseIconWhite\" alt=\"An icon of a cross.\" class=\"car-comparison-footer__btn--icon\" />\r\n      </button>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { storeToRefs } from 'pinia';\r\nimport { useCarComparisonStore } from '../../foundation/stores/carComparisonStore';\r\nimport { useContentStore } from '../../foundation/stores/contentStore';\r\nimport ChevronIconWhite from '../../assets/img/chevron-white.svg';\r\nimport CloseIconWhite from '../../assets/img/close-white.svg';\r\n\r\nconst props = defineProps({\r\n  showCarsOnMobile: {\r\n    type: Boolean,\r\n    required: true,\r\n  },\r\n});\r\n\r\nconst emit = defineEmits(['update:showCarsOnMobile']);\r\n\r\nconst comparisonStore = useCarComparisonStore();\r\nconst { showCarComparisonFooter } = storeToRefs(comparisonStore);\r\nconst contentStore = useContentStore();\r\nconst { comparisonFooter } = storeToRefs(contentStore);\r\n\r\nfunction toggleShowCarsOnMobile() {\r\n  emit('update:showCarsOnMobile', !props.showCarsOnMobile);\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.car-comparison-footer {\r\n  &__top-band {\r\n    height: 2.5rem;\r\n    background: #377ab9;\r\n\r\n    &-btn-container {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &__btn {\r\n    background: transparent;\r\n    border: none;\r\n    color: #fff;\r\n    font: normal normal normal 0.75rem/1rem Arial;\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    small {\r\n      font-size: 0.75rem;\r\n      line-height: 1rem;\r\n    }\r\n\r\n    &--icon {\r\n      width: 12px;\r\n      height: 12px;\r\n      color: #fff;\r\n    }\r\n\r\n    &.close-btn {\r\n      right: 0.25rem;\r\n\r\n      @media screen and (min-width: #{$breakpoint-md}) {\r\n        right: 0.75rem;\r\n      }\r\n    }\r\n\r\n    &.show-more-btn {\r\n      left: 0.25rem;\r\n      visibility: visible;\r\n\r\n      @media screen and (min-width: #{$breakpoint-md}) {\r\n        visibility: hidden;\r\n      }\r\n    }\r\n\r\n    @media screen and (min-width: #{$breakpoint-xl}) {\r\n      padding: 0;\r\n    }\r\n  }\r\n}\r\n</style>\r\n"],"names":["ChevronIconWhite","CloseIconWhite","comparisonStore","useCarComparisonStore","showCarComparisonFooter","storeToRefs","contentStore","useContentStore","comparisonFooter","toggleShowCarsOnMobile","emit","props"],"mappings":"qQAAA,MAAeA,EAAA,GAAA,IAAA,IAAA,6BAAA,YAAA,GAAA,EAAA,KCAAC,EAAA,GAAA,IAAA,IAAA,2BAAA,YAAA,GAAA,EAAA,oSCsCTC,EAAkBC,IAClB,CAAE,wBAAAC,CAAA,EAA4BC,EAAYH,CAAe,EACzDI,EAAeC,IACf,CAAE,iBAAAC,CAAA,EAAqBH,EAAYC,CAAY,EAErD,SAASG,GAAyB,CAC3BC,EAAA,0BAA2B,CAACC,EAAM,gBAAgB,CACzD"}