{"version":3,"file":"CMIFZjFj.js","sources":["../../../../components/App/AppSeoDescription.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/* Components */\nimport AppButton from '@/components/App/AppButton.vue'\nimport IconSeoDropDown from '@/components/Vuetify/IconSeoDropDown.vue'\n\nconst props = defineProps({\n  seoContent: {\n    type: String,\n    required: false,\n    default: '',\n  },\n})\n\nconst isSeoDescriptionAllShow = ref(false)\n\nconst buttonTextContent = computed(() => {\n  return !isSeoDescriptionAllShow.value ? 'Показать текст' : 'Скрыть'\n})\n\nconst isButtonHide = computed(() => props.seoContent.length < 200)\n\nconst changeIsSeoDescriptionAllShow = () => {\n  isSeoDescriptionAllShow.value = !isSeoDescriptionAllShow.value\n}\n</script>\n\n<template>\n  <div class=\"seo__description\">\n    <div class=\"seo\" :class=\"{ 'seo--gradient': !isSeoDescriptionAllShow }\">\n      <div\n        v-if=\"props.seoContent\"\n        class=\"seo__content\"\n        v-html=\"props.seoContent\"\n      />\n    </div>\n\n    <div v-if=\"!isSeoDescriptionAllShow\" class=\"seo__description-gradient\" />\n\n    <app-button\n      v-if=\"!isButtonHide\"\n      class=\"seo__description-button\"\n      :class=\"{ 'seo__description-button--hide': isSeoDescriptionAllShow }\"\n      @click=\"changeIsSeoDescriptionAllShow\"\n    >\n      <v-icon\n        class=\"seo__description-icon\"\n        :class=\"{ reverse__image: isSeoDescriptionAllShow }\"\n      >\n        <icon-seo-drop-down />\n      </v-icon>\n      {{ buttonTextContent }}\n    </app-button>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.seo__description {\n  position: relative;\n  @include media('>=phone', '<=desktop-mini') {\n    margin-bottom: 120px;\n    &-button {\n      width: 100%;\n      height: 50px !important;\n      padding: 13px 28px !important;\n      margin-top: 25px;\n      color: $primary !important;\n      background-color: #fff3ee !important;\n      box-shadow: none !important;\n    }\n  }\n\n  &-button {\n    width: 295px;\n    height: 50px !important;\n    padding: 13px 28px !important;\n    margin-top: 25px;\n    font-weight: 800;\n    color: $primary !important;\n    background-color: #fff3ee !important;\n    border-radius: 10px;\n    box-shadow: none !important;\n\n    @include media('<=tablet') {\n      width: 100%;\n    }\n\n    .reverse__image {\n      transform: rotate(180deg);\n    }\n  }\n\n  &-icon {\n    margin-right: 8px;\n    margin-left: -4px;\n  }\n\n  &-gradient {\n    position: absolute;\n    top: 80px;\n    width: 100%;\n    height: 30px;\n    background: linear-gradient(\n      0deg,\n      #fff 26.25%,\n      rgba(255, 255, 255, 0) 137.99%\n    );\n  }\n}\n\n.seo {\n  display: grid;\n  gap: 25px 0;\n\n  &__content {\n    color: $text-black;\n    :deep() {\n      h1 {\n        margin-bottom: 24px;\n        font-size: 28px;\n        font-weight: 900;\n        line-height: 33px;\n        @include media('<=desktop-mini') {\n          font-size: 18px;\n        }\n        @include media('<=tablet') {\n          font-size: 16px;\n        }\n      }\n      p {\n        margin: 0 0 7px;\n        font-size: 12px;\n        font-weight: 500;\n        line-height: 1.5;\n      }\n      ul,\n      ol {\n        margin: 0 0 7px 25px;\n        font-size: 12px;\n        font-weight: 500;\n        line-height: 1.7;\n      }\n      h2,\n      h3 {\n        margin-top: 24px;\n        margin-bottom: 24px;\n        font-size: 22px;\n        font-weight: 900;\n        line-height: 26px;\n        @include media('<=tablet') {\n          font-size: 16px;\n        }\n      }\n\n      h2 {\n        margin: 15px 0;\n      }\n    }\n\n    &-title {\n      margin-bottom: 25px;\n      font-size: 22px;\n      font-weight: 900;\n      line-height: 26px;\n    }\n\n    &:first-child {\n      .seo__content-title {\n        font-size: 28px;\n      }\n    }\n\n    &-text {\n      margin: 0;\n      font-size: 12px;\n      font-weight: 500;\n      line-height: 14px;\n    }\n\n    @include media('>=phone', '<=desktop-mini') {\n      &__content {\n        :deep() {\n          h1 {\n            font-size: 16px;\n          }\n\n          p {\n            font-size: 12px;\n          }\n\n          h2,\n          h3 {\n            font-size: 14px;\n          }\n        }\n      }\n      &-title {\n        font-size: 14px;\n      }\n\n      &:first-child {\n        .seo__content-title {\n          font-size: 16px;\n        }\n      }\n\n      &-text {\n        font-size: 12px;\n      }\n    }\n  }\n}\n.seo__description-button--hide {\n  @include media('>=desktop-mini') {\n    margin-top: 36px;\n  }\n}\n\n.seo--gradient {\n  height: 110px;\n  overflow: hidden;\n}\n</style>\n"],"names":["props","__props","isSeoDescriptionAllShow","ref","buttonTextContent","computed","isButtonHide","changeIsSeoDescriptionAllShow"],"mappings":";;2sBAKA,MAAMA,EAAQC,EAQRC,EAA0BC,EAAI,EAAK,EAEnCC,EAAoBC,EAAS,IACzBH,EAAwB,MAA2B,SAAnB,gBACzC,EAEKI,EAAeD,EAAS,IAAML,EAAM,WAAW,OAAS,GAAG,EAE3DO,EAAgC,IAAM,CAClBL,EAAA,MAAQ,CAACA,EAAwB,KAAA","debug_id":"e4885efa-0218-5057-88e9-bf25b2babde0"}