<script setup lang="ts">
interface Props {
  size?: number | string
  color?: string
}

withDefaults(defineProps<Props>(), {
  size: 32,
  color: 'var(--foreground-gray-500)',
})
</script>

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="size"
    :height="size"
    viewBox="0 0 11 11"
    fill="none"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M5.80474 1.13807C6.06509 0.877722 6.06509 0.455612 5.80474 0.195262C5.54439 -0.0650874 5.12228 -0.0650874 4.86193 0.195262L0.195262 4.86193C-0.0650874 5.12228 -0.0650874 5.54439 0.195262 5.80474L4.86193 10.4714C5.12228 10.7318 5.54439 10.7318 5.80474 10.4714C6.06509 10.2111 6.06509 9.78894 5.80474 9.52859L1.60948 5.33333L5.80474 1.13807Z"
      :fill="color"
    />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M10.4714 1.13807C10.7318 0.877722 10.7318 0.455612 10.4714 0.195262C10.2111 -0.0650874 9.78895 -0.0650874 9.5286 0.195262L4.86193 4.86193C4.60158 5.12228 4.60158 5.54439 4.86193 5.80474L9.5286 10.4714C9.78895 10.7318 10.2111 10.7318 10.4714 10.4714C10.7318 10.2111 10.7318 9.78894 10.4714 9.52859L6.27614 5.33333L10.4714 1.13807Z"
      :fill="color"
    />
  </svg>
</template>
