{"version":3,"file":"CSS9b291.js","sources":["../../../../components/App/AppSeoDescription.vue"],"sourcesContent":["<script setup lang=\"ts\">\ntype Props = {\n  seoContent?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  seoContent: '',\n})\n\nconst isVisibleText = ref(false)\n\nconst buttonText = computed(() => {\n  return isVisibleText.value ? 'Скрыть' : 'Показать текст'\n})\n\nconst isVisibleButton = computed(() => props.seoContent.length >= 200)\n\nconst toggleVisibleText = () => {\n  isVisibleText.value = !isVisibleText.value\n}\n</script>\n\n<template>\n  <div class=\"seo-description\">\n    <div class=\"seo\" :class=\"{ 'seo--hidden': !isVisibleText }\">\n      <div\n        v-if=\"props.seoContent\"\n        class=\"seo__content\"\n        v-html=\"props.seoContent\"\n      />\n    </div>\n\n    <div v-if=\"!isVisibleText\" class=\"seo-description__gradient\" />\n\n    <the-button\n      v-if=\"isVisibleButton\"\n      class=\"seo-description__button\"\n      :class=\"{ 'seo-description__button--hidden': isVisibleText }\"\n      variant=\"tertiary\"\n      @click=\"toggleVisibleText\"\n    >\n      <the-icon class=\"seo-description__icon\" name=\"expand-down\" />\n\n      {{ buttonText }}\n    </the-button>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.seo-description {\n  position: relative;\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  &__button {\n    width: 100%;\n    margin-top: 25px;\n\n    &--hidden {\n      margin-top: 36px;\n\n      .seo-description__icon {\n        transform: rotate(180deg);\n      }\n    }\n\n    @include media('>=tablet') {\n      width: 295px;\n    }\n  }\n}\n\n.seo {\n  &--hidden {\n    height: 110px;\n    overflow: hidden;\n  }\n\n  &__content {\n    color: var(--ui-text-primary);\n\n    :deep(h1) {\n      margin-bottom: 24px;\n      font-size: 16px;\n      font-weight: 900;\n      line-height: 33px;\n\n      @include media('>tablet') {\n        font-size: 18px;\n      }\n\n      @include media('>desktop-mini') {\n        font-size: 28px;\n      }\n    }\n\n    :deep(h2),\n    :deep(h3) {\n      margin-top: 24px;\n      margin-bottom: 24px;\n      font-size: 16px;\n      font-weight: 900;\n      line-height: 26px;\n\n      @include media('>tablet') {\n        font-size: 22px;\n      }\n    }\n\n    :deep(h2) {\n      margin: 15px 0;\n    }\n\n    :deep(p) {\n      margin: 0 0 7px;\n      font-size: 12px;\n      font-weight: 500;\n      line-height: 1.5;\n    }\n\n    :deep(ul),\n    :deep(ol) {\n      margin: 0 0 7px 25px;\n      font-size: 12px;\n      font-weight: 500;\n      line-height: 1.7;\n    }\n  }\n\n  &__content-title {\n    margin-bottom: 25px;\n    font-size: 16px;\n    font-weight: 900;\n    line-height: 26px;\n\n    @include media('>tablet') {\n      font-size: 18px;\n    }\n\n    @include media('>desktop-mini') {\n      font-size: 28px;\n    }\n  }\n\n  &__content-text {\n    margin: 0;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 14px;\n  }\n}\n</style>\n"],"names":["props","__props","isVisibleText","ref","buttonText","computed","isVisibleButton","toggleVisibleText"],"mappings":";;knBAKA,MAAMA,EAAQC,EAIRC,EAAgBC,EAAI,EAAK,EAEzBC,EAAaC,EAAS,IACnBH,EAAc,MAAQ,SAAW,gBACzC,EAEKI,EAAkBD,EAAS,IAAML,EAAM,WAAW,QAAU,GAAG,EAE/DO,EAAoB,IAAM,CAChBL,EAAA,MAAQ,CAACA,EAAc,KAAA","debug_id":"f2c79f61-1ccc-5906-a750-c0cf1324808f"}