{"version":3,"file":"ExpertReviewProsCons-eca20b9c.js","sources":["../../src/components/expert-reviews/ExpertReviewProsCons.vue"],"sourcesContent":["<template>\r\n  <div class=\"pros\">\r\n    <p class=\"review-pros-cons__heading\">What we liked</p>\r\n\r\n    <ul class=\"review-pros-cons__list\">\r\n      <li class=\"review-pros-cons__list-item pros-icon\" v-for=\"pro in reviewProConList(expertReviewData.Pros)\" :key=\"pro.value\">\r\n        <span v-text=\"pro.value\" />\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"cons\">\r\n    <p class=\"review-pros-cons__heading\">Room for improvement</p>\r\n\r\n    <ul class=\"review-pros-cons__list\">\r\n      <li class=\"review-pros-cons__list-item cons-icon\" v-for=\"con in reviewProConList(expertReviewData.Cons)\" :key=\"con.value\">\r\n        <span v-text=\"con.value\" />\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport { IExpertReview } from '../../foundation/interfaces/IExpertReview';\r\n\r\nconst props = defineProps<{\r\n  expertReviewData: Partial<IExpertReview>;\r\n}>();\r\n\r\nconst reviewProConList = computed(() => (list: undefined | Array<{ value: string }>) => list?.slice(0, 4));\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.pros,\r\n.cons {\r\n  padding-bottom: 1rem;\r\n\r\n  @media (min-width: #{$breakpoint-md}) {\r\n    padding-bottom: 0;\r\n  }\r\n}\r\n\r\n.cons {\r\n  @media (min-width: #{$breakpoint-lg}) {\r\n    margin-left: auto;\r\n    margin-right: 5rem;\r\n  }\r\n\r\n  @media (min-width: #{$breakpoint-xl}) {\r\n    margin-right: 8rem;\r\n  }\r\n\r\n  @media (min-width: #{$breakpoint-xxl}) {\r\n    margin-right: 9rem;\r\n  }\r\n}\r\n\r\n.review-pros-cons {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0;\r\n  padding: 0 1.5rem;\r\n\r\n  @media (min-width: #{$breakpoint-md}) {\r\n    gap: 4rem;\r\n    flex-direction: row;\r\n  }\r\n\r\n  &__list {\r\n    padding-left: 1.5rem;\r\n    margin-top: 0.75rem;\r\n  }\r\n\r\n  &__list-item {\r\n    line-height: 1.8;\r\n    padding: 0 0.5rem;\r\n    min-width: 12rem;\r\n\r\n    &::first-letter {\r\n      text-transform: capitalize;\r\n    }\r\n\r\n    &.pros-icon {\r\n      list-style-image: url('@/assets/img/icon-tick-blue.svg');\r\n    }\r\n\r\n    &.cons-icon {\r\n      list-style-image: url('@/assets/img/icon-cross.svg');\r\n    }\r\n  }\r\n\r\n  &__heading {\r\n    font-size: 1.25rem;\r\n    font-weight: bold;\r\n    margin-bottom: 0;\r\n    margin-top: 0;\r\n  }\r\n}\r\n\r\n.expert-reviews-page {\r\n  .cons {\r\n    margin-right: 5rem;\r\n  }\r\n}\r\n</style>\r\n"],"names":["reviewProConList","computed","list"],"mappings":"4jBA6BM,MAAAA,EAAmBC,EAAS,IAAOC,GAA+CA,GAAA,YAAAA,EAAM,MAAM,EAAG,EAAE"}