{"version":3,"file":"BBhPR1Xs.js","sources":["../../../../storyblok/faq/FaqQuestion.vue"],"sourcesContent":["<template>\n  <div\n    class=\"faq-question\"\n    :class=\"{ [`level-${level}`]: level }\"\n    @click.self=\"faqQuestion.toggleCollapse\"\n  >\n    <CollapseContainer ref=\"faqQuestion\">\n      <template #header>\n        <div class=\"question-header\">\n          {{ blok.question }}\n        </div>\n      </template>\n      <template #content>\n        <div class=\"answer-container\">\n          <div class=\"answer-wrapper\">\n            <RichText :text=\"blok.answer\" />\n          </div>\n        </div>\n      </template>\n    </CollapseContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { CollapseContainer } from \"cja-phoenix\";\nimport { FaqQuestionStoryblok } from \"~/types/bloks\";\n\ndefineProps<{ blok: FaqQuestionStoryblok; level: 1 | 2 }>();\n\nconst faqQuestion = ref();\n</script>\n\n<style lang=\"scss\" scoped>\n.faq-question {\n  &.level-1 {\n    padding: 24px 0;\n\n    .question-header {\n      color: $dark-blue;\n      font-size: 18px;\n      font-weight: 700;\n\n      @media screen and (min-width: $break-md-min) {\n        font-size: 20px;\n      }\n    }\n\n    :deep(.collapse-header) {\n      .m-cgg-icon--chevron-down {\n        color: $dark-blue;\n        font-weight: 700;\n      }\n    }\n  }\n\n  &.level-2 {\n    cursor: pointer;\n    padding: 24px;\n    border-radius: 16px;\n    border: 1px solid $light-grey;\n    background: $white;\n    transition: all 0.4s ease-in-out;\n\n    @media screen and (min-width: $break-md-min) {\n      padding: 24px 40px;\n    }\n\n    &:hover {\n      @media screen and (min-width: $break-lg-min) {\n        box-shadow: $box-shadow-m;\n      }\n\n      .question-header {\n        @media screen and (min-width: $break-lg-min) {\n          color: $main-blue;\n        }\n      }\n    }\n\n    .question-header {\n      font-size: 16px;\n      font-weight: 700;\n\n      @media screen and (min-width: $break-md-min) {\n        font-size: 18px;\n      }\n    }\n\n    :deep(.collapse-header) {\n      .m-cgg-icon--chevron-down {\n        color: $dark-blue;\n        font-weight: 400;\n      }\n    }\n\n    & + .faq-section {\n      border-top: 1px solid $light-grey;\n    }\n  }\n\n  :deep(.content-container) {\n    cursor: default;\n  }\n\n  :deep(.answer-container) {\n    ul {\n      padding-left: 16px;\n    }\n\n    a {\n      color: $main-blue;\n      text-decoration: underline;\n      transition: all 0.2s ease-in-out;\n\n      &:hover {\n        color: $dark-blue;\n        text-decoration: none;\n      }\n    }\n  }\n}\n</style>\n"],"names":["faqQuestion","ref"],"mappings":"+SA6BA,MAAMA,EAAcC,EAAI"}