<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 25 25" :active="active" :className="props.color">
    <template #default="{ fill }">
      <path
        d="M11.714 24C8.133 23.976 5.373 22.795 3.523 20.491C1.878 18.44 1.028 15.586 1 12.01V11.993C1.03 8.414 1.879 5.563 3.525 3.511C5.373 1.205 8.128 0.024 11.708 0H11.722C14.468 0.02 16.765 0.725 18.548 2.098C20.225 3.388 21.406 5.228 22.057 7.565L20.017 8.134C18.913 4.174 16.119 2.15 11.713 2.119C8.803 2.141 6.603 3.055 5.173 4.836C3.835 6.504 3.144 8.914 3.117 12C3.144 15.086 3.835 17.496 5.174 19.164C6.604 20.947 8.805 21.862 11.714 21.881C14.337 21.861 16.072 21.25 17.514 19.836C19.161 18.223 19.132 16.243 18.604 15.038C18.294 14.328 17.731 13.738 16.97 13.288C16.778 14.64 16.348 15.734 15.686 16.56C14.8 17.662 13.546 18.264 11.956 18.35C10.754 18.415 9.595 18.132 8.697 17.549C7.634 16.86 7.012 15.809 6.945 14.585C6.88 13.395 7.353 12.3 8.275 11.503C9.155 10.743 10.394 10.296 11.858 10.212C12.8668 10.149 13.8795 10.1966 14.878 10.354C14.752 9.612 14.503 9.022 14.128 8.597C13.615 8.011 12.82 7.714 11.769 7.707H11.74C10.896 7.707 9.748 7.939 9.019 9.027L7.262 7.847C8.242 6.393 9.83 5.591 11.74 5.591H11.784C14.978 5.611 16.881 7.566 17.071 10.979C17.179 11.025 17.287 11.073 17.392 11.121C18.882 11.821 19.972 12.882 20.546 14.191C21.343 16.011 21.417 18.981 18.998 21.349C17.148 23.159 14.897 23.978 11.714 24ZM12.717 12.31C12.475 12.31 12.23 12.317 11.978 12.331C10.142 12.434 8.998 13.277 9.062 14.474C9.129 15.73 10.514 16.313 11.846 16.241C13.07 16.176 14.664 15.698 14.932 12.531C14.2036 12.3791 13.4611 12.305 12.717 12.31Z"
        :fill="fill"
      />
    </template>
  </BaseIcon>
</template>

<style scoped></style>
