<template>
  <div :class="[
    'flex nowrap-xs auto-overflow',
    {'full-width': full},
    {'flex-column full-width tabs-container-vertical': vertical},
    {'flex-row': !vertical}
  ]">
    <div
      v-for="(option, optionIndex) in options"
      :key="optionIndex"
      :class="[
        'padding-small cursor-pointer tab-item',
        {'border-primary': option.active},
        {'border-transparent': !option.active},
        {'flex-1 text-center': full},
        {'text-left text-ellipsis': vertical},
      ]"
      @click="onClickTab(optionIndex)"
    >
      <span :class="[
        'visible-block text-small padding-x-small',
        {'text-ellipsis': vertical},
        {'text-primary': option.active},
        {'text-gray': !option.active}
      ]">{{ option.text }}</span>
    </div>
  </div>
</template>

<style src="../../identity.css"></style>
<style scoped src="./styles.css" /></style>

<script src="./scripts.js"></script>