<script setup>
import { BaseIcon } from "@components/common/icons"

const props = defineProps({
  color: { type: String, default: 'text-neutrals-900' },
  active: { type: Boolean, default: false },
  width: { type: String, default: "20" },
  height: { type: String, default: "20" }
});
</script>

<template>
  <BaseIcon viewBox="0 0 21 20" :width="props.width" :height="props.height" :active="active" :className="props.color">
    <template #default="{ fill }">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 14 14"
        :fill="fill"
      >
      <path
        d="M5.5 13.5V9.99498C5.5 9.74998 5.75 9.49998 6 9.49998H8C8.25 9.49998 8.5 9.74998 8.5 9.99998V13.5C8.5 13.6326 8.55268 13.7598 8.64645 13.8535C8.74022 13.9473 8.86739 14 9 14H13C13.1326 14 13.2598 13.9473 13.3536 13.8535C13.4473 13.7598 13.5 13.6326 13.5 13.5V6.49998C13.5001 6.43427 13.4873 6.36919 13.4622 6.30845C13.4372 6.24771 13.4004 6.1925 13.354 6.14598L12 4.79298V1.49998C12 1.36737 11.9473 1.24019 11.8536 1.14643C11.7598 1.05266 11.6326 0.999978 11.5 0.999978H10.5C10.3674 0.999978 10.2402 1.05266 10.1464 1.14643C10.0527 1.24019 10 1.36737 10 1.49998V2.79298L7.354 0.145978C7.30756 0.099415 7.25238 0.0624722 7.19164 0.0372657C7.13089 0.0120593 7.06577 -0.000915527 7 -0.000915527C6.93423 -0.000915527 6.86911 0.0120593 6.80837 0.0372657C6.74762 0.0624722 6.69245 0.099415 6.646 0.145978L0.646001 6.14598C0.599599 6.1925 0.562821 6.24771 0.537769 6.30845C0.512717 6.36919 0.499883 6.43427 0.500001 6.49998V13.5C0.500001 13.6326 0.552679 13.7598 0.646447 13.8535C0.740216 13.9473 0.867393 14 1 14H5C5.13261 14 5.25979 13.9473 5.35355 13.8535C5.44732 13.7598 5.5 13.6326 5.5 13.5Z"
        :fill="fill"/>
      </svg>
    </template>
  </BaseIcon>
</template>

<style scoped></style>
