<script setup lang="ts">
interface Props {
  color?: string;
  size?: string | number;
}
defineProps<Props>();
</script>

<template>
  <svg
    :width="`${size ?? 40}px`"
    :height="`${size ?? 40}px`"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M1 4C1 2.34315 2.34315 1 4 1H7.76393C8.90025 1 9.93904 1.64201 10.4472 2.65836L11.3416 4.44721C11.511 4.786 11.8573 5 12.2361 5H20C21.6569 5 23 6.34315 23 8V20C23 21.6569 21.6569 23 20 23H4C2.34315 23 1 21.6569 1 20V4ZM4 3C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V8C21 7.44772 20.5523 7 20 7H12.2361C11.0998 7 10.061 6.35799 9.55279 5.34164L8.65836 3.55279C8.48897 3.214 8.1427 3 7.76393 3H4Z"
      :fill="color ?? '#000000'"
    />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M8.96182 13.0007C8.9616 12.9928 8.9614 12.9849 8.96121 12.9769C8.95231 12.6032 8.96882 12.0812 9.08469 11.5405C9.1987 11.0084 9.42623 10.3766 9.90001 9.86642C10.4037 9.32402 11.1116 9 12 9C12.8884 9 13.5963 9.32402 14.1 9.86642C14.5737 10.3766 14.8013 11.0084 14.9153 11.5405C15.0312 12.0812 15.0477 12.6033 15.0388 12.9769C15.0386 12.9849 15.0384 12.9928 15.0382 13.0007C15.5728 13.0208 16 13.4605 16 14V18C16 18.5523 15.5523 19 15 19H9C8.44772 19 8 18.5523 8 18V14C8 13.4605 8.42723 13.0208 8.96182 13.0007ZM13.0372 13C13.038 12.9772 13.0388 12.9537 13.0393 12.9293C13.0461 12.6467 13.0313 12.2938 12.9597 11.9595C12.8862 11.6166 12.77 11.3734 12.6344 11.2273C12.5287 11.1135 12.3616 11 12 11C11.6384 11 11.4713 11.1135 11.3656 11.2273C11.23 11.3734 11.1138 11.6166 11.0403 11.9595C10.9687 12.2938 10.9539 12.6468 10.9606 12.9293C10.9612 12.9537 10.962 12.9772 10.9628 13H13.0372Z"
      :fill="color ?? '#000000'"
    />
  </svg>
</template>

<style scoped></style>
