{"version":3,"file":"D1gJ2uXi.js","sources":["../../../../components/GoogleRating.vue"],"sourcesContent":["<template>\n  <div class=\"google-rating\">\n    <NuxtLink :href=\"getStoryblokUrl(blok.link)\" target=\"_blank\">\n      <div class=\"image-container\">\n        <StoryblokImg\n          :image=\"{\n            filename:\n              'https://a.storyblok.com/f/223704/24x24/39c806d46e/google_g_icon.svg',\n            alt: t('img.alt'),\n          }\"\n        />\n      </div>\n      <div class=\"title-container\">\n        {{ t(\"title\") }}\n      </div>\n      <div class=\"rating-container\">\n        <span class=\"rating\">{{ blok.rating }}</span>\n        <div class=\"rating-stars\">\n          <span\n            class=\"m-cgg-icon--star-fill\"\n            v-for=\"n in Math.floor(parseFloat(blok.rating))\"\n          />\n          <span\n            class=\"m-cgg-icon--star-fill half-star\"\n            v-if=\"parseFloat((parseFloat(blok.rating) % 1).toFixed(1)) >= 0.3\"\n          />\n        </div>\n      </div>\n    </NuxtLink>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { getStoryblokUrl } from \"@/utils/getStoryblokUrl\";\nimport { GoogleRatingStoryblok } from \"~/types/bloks\";\n\ndefineProps<{\n  blok: GoogleRatingStoryblok;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<style lang=\"scss\" scoped>\n.google-rating {\n  a {\n    display: grid;\n    grid-template-columns: 16px auto auto;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    cursor: pointer;\n    color: inherit;\n    transition: 0.3s ease-in-out;\n\n    @media screen and (min-width: $break-md-min) {\n      justify-content: flex-start;\n      grid-template-columns: 40px 1fr;\n      gap: 4px 20px;\n    }\n\n    &:hover {\n      color: $dark-blue;\n      text-decoration: none;\n    }\n\n    .image-container {\n      @media screen and (min-width: $break-md-min) {\n        grid-area: 1 / 1 / 3 / 2;\n      }\n\n      img {\n        display: block;\n        width: 100%;\n      }\n    }\n\n    .title-container {\n      font-size: 16px;\n      font-weight: 700;\n    }\n\n    .rating-container {\n      display: grid;\n      grid-template-columns: auto 1fr;\n      align-items: center;\n      gap: 8px;\n\n      @media screen and (max-width: $break-sm-max) {\n        padding-left: 8px;\n        border-left: 1px solid $extra-dark-blue;\n      }\n\n      .rating {\n        font-size: 16px;\n        font-weight: 700;\n      }\n\n      .rating-stars {\n        display: grid;\n        grid-template-columns: repeat(5, min-content);\n        gap: 4px;\n        color: $main-yellow;\n\n        .half-star {\n          width: 8px;\n          overflow: hidden;\n        }\n      }\n    }\n  }\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"title\": \"Google Reviews\",\n    \"img\": {\n      \"alt\": \"Google Rating\"\n    }\n  }\n}\n</i18n>\n"],"names":["useI18n"],"mappings":"ubAwCM,KAAA,CAAE,CAAE,EAAIA,EAAQ"}