<script setup>
import { BaseIcon } from "@components/common/icons";
const props = defineProps({
  color: { type: String, default: 'text-neutrals-900' },
  active: { type: Boolean, default: false },
});
</script>

<template>
  <BaseIcon viewBox="0 0 21 20" :active="active" :className="props.color">
    <template #default="{ fill }">
      <g clip-path="url(#clip0_28_1818)">
        <path
          d="M2.91667 0.333252C2.27573 0.333252 1.66104 0.587864 1.20783 1.04108C0.754612 1.49429 0.5 2.10898 0.5 2.74992V17.2499C0.5 17.8909 0.754612 18.5055 1.20783 18.9588C1.66104 19.412 2.27573 19.6666 2.91667 19.6666H17.4167C18.0576 19.6666 18.6723 19.412 19.1255 18.9588C19.5787 18.5055 19.8333 17.8909 19.8333 17.2499V2.74992C19.8333 2.10898 19.5787 1.49429 19.1255 1.04108C18.6723 0.587864 18.0576 0.333252 17.4167 0.333252H2.91667ZM6.67593 5.97214C6.67593 6.257 6.56277 6.5302 6.36134 6.73163C6.15991 6.93305 5.88671 7.04622 5.60185 7.04622C5.31699 7.04622 5.0438 6.93305 4.84237 6.73163C4.64094 6.5302 4.52778 6.257 4.52778 5.97214C4.52778 5.68728 4.64094 5.41408 4.84237 5.21266C5.0438 5.01123 5.31699 4.89807 5.60185 4.89807C5.88671 4.89807 6.15991 5.01123 6.36134 5.21266C6.56277 5.41408 6.67593 5.68728 6.67593 5.97214ZM8.55556 5.97214C8.55556 5.75849 8.64043 5.5536 8.7915 5.40253C8.94257 5.25146 9.14746 5.16659 9.36111 5.16659H15.2685C15.4822 5.16659 15.6871 5.25146 15.8381 5.40253C15.9892 5.5536 16.0741 5.75849 16.0741 5.97214C16.0741 6.18579 15.9892 6.39068 15.8381 6.54175C15.6871 6.69283 15.4822 6.7777 15.2685 6.7777H9.36111C9.14746 6.7777 8.94257 6.69283 8.7915 6.54175C8.64043 6.39068 8.55556 6.18579 8.55556 5.97214ZM8.55556 9.99992C8.55556 9.78627 8.64043 9.58138 8.7915 9.43031C8.94257 9.27923 9.14746 9.19436 9.36111 9.19436H15.2685C15.4822 9.19436 15.6871 9.27923 15.8381 9.43031C15.9892 9.58138 16.0741 9.78627 16.0741 9.99992C16.0741 10.2136 15.9892 10.4185 15.8381 10.5695C15.6871 10.7206 15.4822 10.8055 15.2685 10.8055H9.36111C9.14746 10.8055 8.94257 10.7206 8.7915 10.5695C8.64043 10.4185 8.55556 10.2136 8.55556 9.99992ZM9.36111 13.2221H15.2685C15.4822 13.2221 15.6871 13.307 15.8381 13.4581C15.9892 13.6092 16.0741 13.8141 16.0741 14.0277C16.0741 14.2413 15.9892 14.4462 15.8381 14.5973C15.6871 14.7484 15.4822 14.8333 15.2685 14.8333H9.36111C9.14746 14.8333 8.94257 14.7484 8.7915 14.5973C8.64043 14.4462 8.55556 14.2413 8.55556 14.0277C8.55556 13.8141 8.64043 13.6092 8.7915 13.4581C8.94257 13.307 9.14746 13.2221 9.36111 13.2221ZM5.60185 11.074C5.31699 11.074 5.0438 10.9608 4.84237 10.7594C4.64094 10.558 4.52778 10.2848 4.52778 9.99992C4.52778 9.71506 4.64094 9.44186 4.84237 9.24043C5.0438 9.03901 5.31699 8.92585 5.60185 8.92585C5.88671 8.92585 6.15991 9.03901 6.36134 9.24043C6.56277 9.44186 6.67593 9.71506 6.67593 9.99992C6.67593 10.2848 6.56277 10.558 6.36134 10.7594C6.15991 10.9608 5.88671 11.074 5.60185 11.074ZM6.67593 14.0277C6.67593 14.3126 6.56277 14.5858 6.36134 14.7872C6.15991 14.9886 5.88671 15.1018 5.60185 15.1018C5.31699 15.1018 5.0438 14.9886 4.84237 14.7872C4.64094 14.5858 4.52778 14.3126 4.52778 14.0277C4.52778 13.7428 4.64094 13.4696 4.84237 13.2682C5.0438 13.0668 5.31699 12.9536 5.60185 12.9536C5.88671 12.9536 6.15991 13.0668 6.36134 13.2682C6.56277 13.4696 6.67593 13.7428 6.67593 14.0277Z"
          :fill="fill"
        />
      </g>
      <defs>
        <clipPath id="clip0_28_1818">
          <rect
            width="20"
            height="20"
            fill="white"
            transform="translate(0.167969)"
          />
        </clipPath>
      </defs>
    </template>
  </BaseIcon>
</template>

<style scoped></style>
