<script setup>
const { className, size } = defineProps({
  className: { type: String, default: "text-neutrals-700" },
  size: { type: Number, default: 16 },
});
</script>

<template>
  <svg
    :class="className"
    xmlns="http://www.w3.org/2000/svg"
    :width="size"
    :height="size"
    viewBox="0 0 16 16"
    fill="none"
  >
    <path fill-rule="evenodd" clip-rule="evenodd"
      d="M8.00063 1C8.13324 1 8.26042 1.05268 8.35419 1.14645C8.44795 1.24021 8.50063 1.36739 8.50063 1.5V13.293L11.6466 10.146C11.7405 10.0521 11.8679 9.99937 12.0006 9.99937C12.1334 9.99937 12.2607 10.0521 12.3546 10.146C12.4485 10.2399 12.5013 10.3672 12.5013 10.5C12.5013 10.6328 12.4485 10.7601 12.3546 10.854L8.35463 14.854C8.30819 14.9006 8.25301 14.9375 8.19226 14.9627C8.13152 14.9879 8.0664 15.0009 8.00063 15.0009C7.93486 15.0009 7.86974 14.9879 7.809 14.9627C7.74825 14.9375 7.69308 14.9006 7.64663 14.854L3.64663 10.854C3.55274 10.7601 3.5 10.6328 3.5 10.5C3.5 10.3672 3.55274 10.2399 3.64663 10.146C3.74052 10.0521 3.86786 9.99937 4.00063 9.99937C4.13341 9.99937 4.26075 10.0521 4.35463 10.146L7.50063 13.293V1.5C7.50063 1.36739 7.55331 1.24021 7.64708 1.14645C7.74085 1.05268 7.86802 1 8.00063 1Z"
      fill="currentColor"
    />

  </svg>
</template>

<style scoped>
svg {
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}
svg.up {
  transform: rotate(180deg);
}
</style>
