<template>
  <el-skeleton
      class="sk"
      animated
  >
    <template #template>
      <div class="sk__main">
        <el-skeleton-item
            variant="p"
            class="sk__text"
        />
        <el-skeleton-item
            variant="p"
            class="sk__text"
        />
      </div>
      <div class="sk__bottom">
        <div class="sk__bottom-images">
          <el-skeleton-item
              variant="image"
              class="sk__image"
              v-for="idx in 3"
              :key="idx"
          />
        </div>
        <el-skeleton-item
            variant="p"
            class="sk__price"
        />
      </div>
    </template>
  </el-skeleton>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.sk {
  width: 100%;
  border-radius: $less_border_radius;
  background-color: $skeleton;
  border: 1px solid $primary;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px 8px;

  &__main {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 25px;
    padding-bottom: 5px;
  }

  &__text {
    width: 100px;
    height: 20px;
    border-radius: $less_border_radius;
  }

  &__bottom {
    border-top: 1px solid $primary;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;

    &-images {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }

  &__image {
    width: 52px;
    height: 65px;
    border-radius: $less_border_radius;
  }

  &__price {
    width: 60px;
    height: 20px;
  }
}
</style>