<template>
    <section class="specification">
        <h2>{{ $t('specifications') }}</h2>
        <ul>
            <li v-for="(item, key) in specs" :key="key">
                <label>{{ key }}</label>
                <span>{{ item }}</span>
            </li>
        </ul>
    </section>
</template>

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

<style lang="scss">
.product .specification {
    @apply w-full flex items-start gap-[13.6rem] 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;
        }
    }

    & > ul {
        @apply w-full lg:w-max flex flex-col;

        li {
            @apply flex justify-between lg:justify-start gap-12 border-b-2 py-[1.1rem] lg:py-6;

            label {
                @apply lg:w-[20.2rem] flex items-center gap-3 text-[#7F7F7F] text-xs lg:text-lg font-medium font-vazir;

                &::before {
                    @apply content-['_'] w-2 h-2 bg-[#7F7F7F] rounded-full;
                }
            }

            span {
                @apply text-[#333333] text-xs lg:text-lg font-vazir;
            }
        }
    }
}
</style>
