<template>
    <section class="description">
        <h2>{{ $t('description') }}</h2>
        <div>
            <div v-html="description" />
        </div>
    </section>
</template>

<script setup>
const { description } = inject('data')
</script>

<style lang="scss">
.product .description {
    @apply w-full flex items-start gap-[13.8rem] px-6;

    & > h2 {
        @apply hidden lg:flex gap-3 items-center text-primary-600 text-xl font-bold font-vazir;

        &::before {
            @apply content-['_'] h-6 w-[0.3rem] rounded-full bg-primary-600;
        }
    }

    & > div {
        @apply w-full max-h-[17.1rem] lg:w-[57.8rem] lg:max-h-[36.1rem] overflow-y-auto lg:pt-6;

        &::-webkit-scrollbar-track {
            @apply bg-transparent;
        }

        &::-webkit-scrollbar {
            @apply w-1;
        }

        &::-webkit-scrollbar-thumb {
            @apply bg-[#E5E5E5];
        }

        div * {
            @apply font-vazir;
            all: initial;

            // @apply text-[#595959] text-xs lg:text-xl font-normal font-vazir lg:leading-9 pl-4 lg:pl-8;
        }
    }
}
</style>
