<script setup lang="ts">
import { isEmpty } from 'lodash';
const emit = defineEmits(['dropData', 'selectComponent'])

const _props = defineProps<{
  dataResult?: any[]
}>()

const SETTING_OPTIONS = {
  MAX_ELEMENT: 3
}
</script>
<template>
  <div class="breadcrumb">
    <ul class="breadcrumb__list">
      <li class="breadcrumb__list__item">
          <p class="breadcrumb__list__item__title">
            <nuxt-link to="/">Trang chủ</nuxt-link>
          </p>
      </li>
    </ul>

    <div class="button">
      <div class="button__increase">
        <i class="ri-font-size"></i>
        <i class="ri-add-line"></i>
      </div>
      <div class="button__decrease">
        <i class="ri-font-size"></i>
        <i class="ri-subtract-line"></i>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.breadcrumb {
  display: flex;
  justify-content: space-between;

  &__list {
    padding: 0px;
    display: flex;
    overflow-x: auto;
    gap: 1.5rem;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.25rem;

    &__item {
      display: inline-block;
      position: relative;
      &:first-child {
        color: blue;
      }

      &:not(:first-child):before {
        content: "";
        width: 7px;
        height: 7px;
        border-top: 1px solid #bdbdbd;
        border-right: 1px solid #bdbdbd;
        transform: rotate(45deg);
        position: absolute;
        left: -18px;
        top: 8px;
      }
    }
  }

  .button {
    display: flex;
    gap: 4px;

    &__increase, &__decrease {
      width: 32px;
      height: 32px;
      background-color: rgb(243, 244, 246);
      border-radius: 50px;
      position: relative;

      & .ri-font-size {
        font-size: 17px;
        position: absolute;
        top: 50%;
        left: 40%;
        transform: translateY(-50%) translateX(-45%);
      }

      & .ri-add-line, & .ri-subtract-line {
        position: absolute;
        right: 2px;
      }
    }

  }
}
.empty {
  border-radius: 6px;
  background: #409eff;
  width: 40px;
  min-height: 20px;
}


</style>