<template>
  <!-- A DESTRA -->
  <span
    v-if="
      getTesto && rectext.font?.posiz_text === costanti.POSIZ_TESTO.A_DESTRA
    "
    :class="'flex flex-col justify-between'"
    :style="{
      width: rectext.font?.perc_text ?? '50%',
      ...( rectext.size && rectext.size.height ? { height: tools.adjustSize(optcatalogo, rectext.size.height) } : {}),
      marginTop: '0',
      '--scalecatalog': tools.getScale(optcatalogo),
      'line-height': rectext.font?.line_height,
    }"
  >
    <div v-html="getTesto"></div>
    <slot></slot>
  </span>

  <!-- IN BASSO -->
  <span
    v-else-if="
      getTesto && rectext.font?.posiz_text === costanti.POSIZ_TESTO.IN_BASSO
    "
    :class="{ 'flex-details_and_barcode' : show_at_right }"
    :style="{
      width: rectext.font?.perc_text ?? '50%',
      ...( rectext.size && rectext.size.height ? { height: tools.adjustSize(optcatalogo, rectext.size.height) } : {}),
      marginTop: '0rem',
      '--scalecatalog': tools.getScale(optcatalogo),
      'line-height': rectext.font?.line_height,
      'gap': show_at_right && scheda.barcode.size?.gap ? tools.adjustSize(optcatalogo, scheda.barcode.size?.gap) : ''
    }"
  >
    <div v-html="getTesto"></div>
    <slot></slot>
  </span>
</template>

<script lang="ts" src="./CText.ts">
</script>
<style lang="scss" scoped>
@import './CText.scss';
</style>
