{"version":3,"file":"TripFaqItem-D9aFCb5U.js","sources":["../../../app/javascript/src/components/TripFaqItem.vue"],"sourcesContent":["<template>\n  <div class=\"faq\" :class=\"{ expand }\" @click=\"expand = !expand\">\n    <div class=\"heading\">\n      <div class=\"question\">{{ q }}</div>\n      <FoldIcon v-if=\"expand\" class=\"fold icon\"/>\n      <ExpandIcon v-else class=\"expand icon\"/>\n    </div>\n\n    <div v-if=\"expand\" class=\"answer\" v-html=\"a\"></div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from \"vue\";\nimport FoldIcon from 'app/assets/images/mba/icons/fold.svg?component';\nimport ExpandIcon from 'app/assets/images/mba/icons/expand.svg?component';\n\nconst props = defineProps({\n  q: String,\n  a: String,\n  open: {\n    type: Boolean,\n    default: false\n  }\n})\n\nconst expand = ref(props.open);\n</script>\n\n<style lang=\"scss\" scoped>\n.faq {\n  @include flex-column;\n  padding: 24px;\n  gap: 16px;\n  border-radius: 15px;\n  background: $grey-25;\n  color: $grey-300;\n  cursor: pointer;\n\n  &.expand {\n    background-color: $green-50;\n\n    .question {\n      font-weight: 600;\n    }\n  }\n}\n\n.heading {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  user-select: none;\n  gap: 12px;\n}\n\n.question {\n  font-size: 20px;\n  font-weight: 400;\n  line-height: 110%;\n  padding: 1px 0;\n}\n\n.answer {\n  &::v-deep(a) {\n    font-weight: 600;\n  }\n}\n\n.icon {\n  width: 24px;\n  flex-shrink: 0;\n\n  &.expand {\n    color: $grey-50;\n  }\n\n  &.fold {\n    color: white;\n\n    &::v-deep(path) {\n      fill: $brand-primary;\n    }\n  }\n}\n</style>\n\n"],"names":["expand","ref","__props"],"mappings":"mXA0BA,MAAMA,EAASC,EATDC,EASW,IAAI"}