import styled from '@emotion/styled';

export const WhitePlus = styled.div`
  background-image: url('images/Plus.svg');
  width: 1rem;
  height: 1rem;
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(0) invert(1);
`;

export const Pinned = styled.div`
  background-image: url('images/Pinned.svg');
  width: 1.25rem;
  height: 1.25rem;
`;

export const Pin = styled.div`
  background-image: url('images/Pin.svg');
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const DateType = styled.div`
  background-image: url('images/DateType.svg');
  width: 1.405rem;
  height: 1.088rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const FormulaSettingPanel = styled.div`
  background-image: url('images/FormulaSettingPanel.svg');
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const ProjectSettingPanel = styled.div`
  background-image: url('images/ProjectSetting.svg');
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const Stage = styled.div`
  background-image: url('images/Stage.svg');
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const IconHide = styled.div`
  background-image: url('images/IconHide.svg');
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const UnPinned = styled.div`
  background-image: url('images/unPinned.svg');
  width: 1.25rem;
  height: 1.25rem;
`;

export const Minus = styled.div`
  background-image: url('images/Minus.svg');
  width: 1rem;
  height: 1rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const Plus = styled.div`
  background-image: url('images/Plus.svg');
  width: 1rem;
  height: 1rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const Column = styled.div`
  background-image: url('images/Column.svg');
  width: 1.25rem;
  height: 1.25rem;
`;

export const AddColumn = styled.div`
  background-image: url('images/AddColumn.svg');
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const DeleteColumn = styled.div`
  background-image: url('images/RemoveColumn.svg');
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const Row = styled.div`
  background-image: url('images/Row.svg');
  width: 1.25rem;
  height: 1.25rem;
`;

export const AddLine = styled.div`
  background-image: url('images/AddLine.svg');
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const RemoveLine = styled.div`
  background-image: url('images/RemoveLine.svg');
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const Merge = styled.div`
  background-image: url('images/Merge.svg');
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
`;

export const MergeLayer = styled.div`
  background-image: url('images/MergeLayer.svg');
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const Split = styled.div`
  background-image: url('images/Split.svg');
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
`;

export const SplitLayer = styled.div`
  background-image: url('images/SplitLayer.svg');
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const Layer = styled.div`
  background-image: url('images/Layer.svg');
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
`;

export const AddLayer = styled.div`
  background-image: url('images/AddLayer.svg');
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const DeleteLayer = styled.div`
  background-image: url('images/DeleteLayer.svg');
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const Eye = styled.div`
  background-image: url('images/Eye.svg');
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

export const Trash = styled.div`
  background-image: url('images/Trash.svg');
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
`;

export const TrashSvg = ({ fill, size = 20 }) => (
  <svg
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    fill="none"
  >
    <rect
      id="Icon"
      width="20.000000"
      height="20.000000"
      x="0.000000"
      y="0.000000"
    />
    <path
      id="Vector (Stroke)"
      d="M14.0409 6.04928L5.95909 6.04928L5.95909 15.4391C5.95909 15.6688 6.04492 15.8793 6.18212 16.0262C6.31763 16.1711 6.48887 16.2408 6.65335 16.2409L13.3466 16.2409C13.5111 16.2408 13.6824 16.1711 13.8179 16.0262C13.9551 15.8793 14.0409 15.6688 14.0409 15.4391L14.0409 6.04928ZM8.18485 13.4352L8.18485 8.85493C8.18485 8.5071 8.47302 8.22536 8.82879 8.22536C9.18455 8.22536 9.47273 8.5071 9.47273 8.85493L9.47273 13.4352C9.47273 13.783 9.18455 14.0648 8.82879 14.0648C8.47302 14.0648 8.18485 13.783 8.18485 13.4352ZM10.5273 13.4352L10.5273 8.85493C10.5273 8.5071 10.8154 8.22536 11.1712 8.22536C11.527 8.22536 11.8152 8.5071 11.8152 8.85493L11.8152 13.4352C11.8152 13.783 11.527 14.0648 11.1712 14.0648C10.8154 14.0648 10.5273 13.783 10.5273 13.4352ZM11.6985 4.27464C11.6985 4.13798 11.6429 4.00673 11.5441 3.91009C11.4699 3.83753 11.3756 3.78895 11.2742 3.7692L11.1712 3.75913L8.82879 3.75913C8.68901 3.75913 8.55476 3.81346 8.45592 3.91009C8.35708 4.00673 8.30151 4.13798 8.30151 4.27464L8.30151 4.79014L11.6985 4.79014L11.6985 4.27464ZM12.9864 4.79014L15.8561 4.79014C16.2118 4.79014 16.5 5.07189 16.5 5.41971C16.5 5.76753 16.2118 6.04928 15.8561 6.04928L15.3288 6.04928L15.3288 15.4391C15.3288 15.9684 15.1329 16.4861 14.7683 16.876C14.402 17.2678 13.8919 17.4999 13.3466 17.5L6.65335 17.5C6.10806 17.4999 5.59803 17.2678 5.23166 16.876C4.86705 16.4861 4.67121 15.9684 4.67121 15.4391L4.67121 6.04928L4.14394 6.04928C3.78817 6.04928 3.5 5.76753 3.5 5.41971C3.5 5.07189 3.78817 4.79014 4.14394 4.79014L7.01364 4.79014L7.01364 4.27464C7.01364 3.80392 7.20504 3.35283 7.54549 3.01998C7.88594 2.68713 8.34732 2.5 8.82879 2.5L11.1712 2.5C11.6527 2.5 12.1141 2.68713 12.4545 3.01998C12.795 3.35283 12.9864 3.80392 12.9864 4.27464L12.9864 4.79014Z"
      fill={fill}
    />
  </svg>
);

export const Palette = styled.div`
  background-image: url('images/Palette.svg');
  width: 1rem;
  height: 1rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
`;

export const Gear = styled.div`
  background-image: url('images/Gear.svg');
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 0.25rem;
`;

export const Back = styled.div`
  background-image: url('images/Back.svg');
  width: 1rem;
  height: 1rem;
  background-repeat: no-repeat;
  background-size: cover;
`;

export const Save = styled.div`
  background-image: url('images/Save.svg');
  width: 1rem;
  height: 1rem;
  background-repeat: no-repeat;
  background-size: cover;
`;

export const Search = styled.div`
  background-image: url('images/Search.svg');
  width: 1rem;
  height: 1rem;
  background-repeat: no-repeat;
  background-size: cover;
`;

export const FormulaForButton = styled.div`
  background-image: url('images/Formula.svg');
  width: 1rem;
  height: 1rem;
  background-repeat: no-repeat;
  background-size: cover;
`;

export const Formula = styled.div`
  background-image: url('images/Formula.svg');
  width: 1rem;
  height: 1rem;
  background-color: #a6a6a686;
  background-repeat: no-repeat;
  background-size: cover;
`;

export const Ban = styled.div`
  background-image: url('images/Ban.svg');
  width: 1rem;
  height: 1rem;
  background-color: #fea0a085;
  background-repeat: no-repeat;
  background-size: cover;
`;

export const TasksSvg = ({ fill }) => (
  <svg
    width="11"
    height="13"
    viewBox="0 0 11 13"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M9.33333 3.13346C9.33333 2.65482 8.94544 2.26693 8.4668 2.26693H7.53711C7.33135 3.0345 6.63263 3.60026 5.80013 3.60026H4.4668C3.6343 3.60026 2.93558 3.0345 2.72982 2.26693H1.80013C1.32148 2.26693 0.933594 2.65482 0.933594 3.13346V11.1335C0.933594 11.6121 1.32148 12 1.80013 12H8.4668C8.94544 12 9.33333 11.6121 9.33333 11.1335V3.13346ZM3.13997 8.66667C3.39771 8.66667 3.60677 8.87573 3.60677 9.13346C3.60677 9.3912 3.39771 9.60026 3.13997 9.60026H3.13346C2.87573 9.60026 2.66667 9.3912 2.66667 9.13346C2.66667 8.87573 2.87573 8.66667 3.13346 8.66667H3.13997ZM7.13346 8.66667C7.3912 8.66667 7.60026 8.87573 7.60026 9.13346C7.60026 9.3912 7.3912 9.60026 7.13346 9.60026H5.13346C4.87573 9.60026 4.66667 9.3912 4.66667 9.13346C4.66667 8.87573 4.87573 8.66667 5.13346 8.66667H7.13346ZM3.13997 6C3.39771 6 3.60677 6.20906 3.60677 6.4668C3.60677 6.72453 3.39771 6.93359 3.13997 6.93359H3.13346C2.87573 6.93359 2.66667 6.72453 2.66667 6.4668C2.66667 6.20906 2.87573 6 3.13346 6H3.13997ZM7.13346 6C7.3912 6 7.60026 6.20906 7.60026 6.4668C7.60026 6.72453 7.3912 6.93359 7.13346 6.93359H5.13346C4.87573 6.93359 4.66667 6.72453 4.66667 6.4668C4.66667 6.20906 4.87573 6 5.13346 6H7.13346ZM4.4668 0.933594C3.98815 0.933594 3.60026 1.32148 3.60026 1.80013C3.60026 2.27878 3.98815 2.66667 4.4668 2.66667H5.80013C6.27878 2.66667 6.66667 2.27878 6.66667 1.80013C6.66667 1.32148 6.27878 0.933594 5.80013 0.933594H4.4668ZM10.2669 11.1335C10.2669 12.1276 9.46091 12.9336 8.4668 12.9336H1.80013C0.806018 12.9336 0 12.1276 0 11.1335V3.13346C0 2.13935 0.806018 1.33333 1.80013 1.33333H2.72982C2.93558 0.56576 3.6343 0 4.4668 0H5.80013C6.63263 0 7.33135 0.56576 7.53711 1.33333H8.4668C9.46091 1.33333 10.2669 2.13935 10.2669 3.13346V11.1335Z"
      fill={fill}
    />
  </svg>
);

export const AdminPanelSvg = ({ fill }) => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M4.86784 10.6667C4.86784 10.1881 4.47995 9.80021 4.0013 9.80021C3.52266 9.80021 3.13477 10.1881 3.13477 10.6667C3.13477 11.1454 3.52266 11.5333 4.0013 11.5333C4.47995 11.5333 4.86784 11.1454 4.86784 10.6667ZM8.86784 5.33341C8.86784 4.85477 8.47995 4.46688 8.0013 4.46688C7.52266 4.46688 7.13477 4.85477 7.13477 5.33341C7.13477 5.81206 7.52266 6.19995 8.0013 6.19995C8.47995 6.19995 8.86784 5.81206 8.86784 5.33341ZM12.8678 10.6667C12.8678 10.1881 12.4799 9.80021 12.0013 9.80021C11.5227 9.80021 11.1348 10.1881 11.1348 10.6667C11.1348 11.1454 11.5227 11.5333 12.0013 11.5333C12.4799 11.5333 12.8678 11.1454 12.8678 10.6667ZM5.80143 10.6667C5.80143 11.4992 5.23559 12.1973 4.4681 12.4031V13.3334C4.4681 13.5911 4.25904 13.8002 4.0013 13.8002C3.74357 13.8002 3.53451 13.5911 3.53451 13.3334V12.4031C2.76702 12.1973 2.20117 11.4992 2.20117 10.6667C2.20117 9.83425 2.76693 9.13553 3.53451 8.92977V2.66675C3.53451 2.40902 3.74357 2.19995 4.0013 2.19995C4.25904 2.19995 4.4681 2.40902 4.4681 2.66675V8.92977C5.23567 9.13553 5.80143 9.83425 5.80143 10.6667ZM13.8014 10.6667C13.8014 11.4992 13.2356 12.1973 12.4681 12.4031V13.3334C12.4681 13.5911 12.259 13.8002 12.0013 13.8002C11.7436 13.8002 11.5345 13.5911 11.5345 13.3334V12.4031C10.767 12.1973 10.2012 11.4992 10.2012 10.6667C10.2012 9.83425 10.7669 9.13553 11.5345 8.92977V2.66675C11.5345 2.40902 11.7436 2.19995 12.0013 2.19995C12.259 2.19995 12.4681 2.40902 12.4681 2.66675V8.92977C13.2357 9.13553 13.8014 9.83425 13.8014 10.6667ZM9.80143 5.33341C9.80143 6.16585 9.23559 6.86393 8.4681 7.06974V13.3334C8.4681 13.5911 8.25904 13.8002 8.0013 13.8002C7.74357 13.8002 7.53451 13.5911 7.53451 13.3334V7.06974C6.76702 6.86393 6.20117 6.16585 6.20117 5.33341C6.20117 4.50092 6.76693 3.8022 7.53451 3.59644V2.66675C7.53451 2.40902 7.74357 2.19995 8.0013 2.19995C8.25904 2.19995 8.4681 2.40902 8.4681 2.66675V3.59644C9.23567 3.8022 9.80143 4.50092 9.80143 5.33341Z"
      fill={fill}
    />
  </svg>
);

export const DictSvg = ({ fill }) => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M13.5338 8.66667C13.5338 8.18802 13.146 7.80013 12.6673 7.80013H3.33397C2.85533 7.80013 2.46744 8.18802 2.46744 8.66667V12.6667C2.46744 13.1453 2.85533 13.5332 3.33397 13.5332H12.6673C13.146 13.5332 13.5338 13.1453 13.5338 12.6667V8.66667ZM12.2005 6C12.2005 5.52135 11.8126 5.13346 11.334 5.13346H4.66731C4.18866 5.13346 3.80077 5.52135 3.80077 6V6.86654H12.2005V6ZM10.8672 3.33333C10.8672 2.85469 10.4793 2.4668 10.0006 2.4668H6.00064C5.52199 2.4668 5.1341 2.85469 5.1341 3.33333V4.19987H10.8672V3.33333ZM11.8008 4.26302C12.5683 4.46878 13.1341 5.1675 13.1341 6V6.92969C13.9017 7.13545 14.4674 7.83417 14.4674 8.66667V12.6667C14.4674 13.6608 13.6614 14.4668 12.6673 14.4668H3.33397C2.33986 14.4668 1.53384 13.6608 1.53384 12.6667V8.66667C1.53384 7.83417 2.0996 7.13545 2.86718 6.92969V6C2.86718 5.1675 3.43294 4.46878 4.20051 4.26302V3.33333C4.20051 2.33922 5.00653 1.5332 6.00064 1.5332H10.0006C10.9948 1.5332 11.8008 2.33922 11.8008 3.33333V4.26302Z"
      fill={fill}
    />
  </svg>
);

export const Cancel = styled.div`
  background-image: url('images/Cancel.svg');
  width: 1rem;
  height: 1rem;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
`;

export const Edit = styled.div`
  background-image: url('images/Edit.svg');
  width: 1.5rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-size: 0.75rem 0.75rem;
  background-position: center;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
`;

export const DateIcon = styled.div`
  width: 1rem;
  height: 1rem;
  background-image: url('images/Calendar.svg');
  background-repeat: no-repeat;
  background-size: cover;
`;

export const CalendarIcon = styled.div`
  width: 1rem;
  height: 1rem;
  background-image: url('images/CalendarIcon.svg');
  background-repeat: no-repeat;
  background-size: cover;
`;

export const UserIcon = styled.div`
  width: 1rem;
  height: 1rem;
  background-image: url('images/User.svg');
  background-repeat: no-repeat;
  background-size: cover;
`;

export const TableIcon = styled.div`
  width: 1rem;
  height: 1rem;
  background-image: url('images/Table.svg');
  background-repeat: no-repeat;
  background-size: cover;
`;

export const EmptyListIcon = styled.div`
  width: 7.5rem;
  height: 6.94rem;
  background-image: url('images/EmptyList.svg');
  background-repeat: no-repeat;
  background-size: cover;
`;
export const EditSvg = ({ fill = '#737373', size = '12' }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 12 12"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M8.62108 0.578686C9.39407 -0.19289 10.6473 -0.192901 11.4203 0.578686C12.1932 1.35027 12.1932 2.60123 11.4203 3.37281L2.9043 11.8734C2.8231 11.9544 2.71288 12 2.59804 12H0.433108C0.193976 12 0 11.8064 0 11.5677V9.36325C0 9.24868 0.0457346 9.13858 0.126852 9.05754L8.62108 0.578686ZM0.866216 9.54172V11.136H2.41803L9.57368 3.99326L7.9989 2.42134L0.866216 9.54172ZM10.8078 1.19009C10.373 0.756075 9.6684 0.756086 9.23359 1.19009L8.61141 1.80994L10.1862 3.38186L10.8078 2.76141C11.2425 2.32739 11.2425 1.62411 10.8078 1.19009Z"
      fill={fill}
    />
  </svg>
);

export const SettingSvg = ({ size = '8' }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 8 8"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M4.74461 0.585471C4.5551 -0.195157 3.4449 -0.195157 3.25539 0.585471C3.13297 1.08975 2.55522 1.32906 2.11208 1.05904C1.42609 0.641062 0.641062 1.42609 1.05904 2.11208C1.32906 2.55522 1.08975 3.13297 0.585471 3.25539C-0.195157 3.4449 -0.195157 4.5551 0.585471 4.74461C1.08975 4.86703 1.32906 5.44478 1.05904 5.88792C0.641062 6.57391 1.42609 7.35894 2.11208 6.94096C2.55523 6.67094 3.13297 6.91025 3.25539 7.41453C3.4449 8.19516 4.5551 8.19516 4.74461 7.41453C4.86703 6.91025 5.44478 6.67094 5.88792 6.94096C6.57391 7.35894 7.35894 6.57391 6.94096 5.88792C6.67094 5.44478 6.91025 4.86703 7.41453 4.74461C8.19516 4.5551 8.19516 3.4449 7.41453 3.25539C6.91025 3.13297 6.67094 2.55522 6.94096 2.11208C7.35894 1.42609 6.57391 0.641062 5.88792 1.05904C5.44478 1.32906 4.86703 1.08975 4.74461 0.585471ZM4 5.5C4.82843 5.5 5.5 4.82843 5.5 4C5.5 3.17157 4.82843 2.5 4 2.5C3.17157 2.5 2.5 3.17157 2.5 4C2.5 4.82843 3.17157 5.5 4 5.5Z"
      fill="#EBF9E9"
    />
  </svg>
);

export const UnLockedSvg = ({ size = '12' }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 14 14"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M11.2591 7.58333C11.2591 7.16452 10.9197 6.82511 10.5009 6.82511H3.5009C3.08208 6.82511 2.74268 7.16452 2.74268 7.58333V11.0833C2.74268 11.5021 3.08208 11.8416 3.5009 11.8416H10.5009C10.9197 11.8416 11.2591 11.5021 11.2591 11.0833V7.58333ZM6.59245 9.91667V8.75C6.59245 8.52448 6.77538 8.34155 7.0009 8.34155C7.22641 8.34155 7.40934 8.52448 7.40934 8.75V9.91667C7.40934 10.1422 7.22641 10.3251 7.0009 10.3251C6.77538 10.3251 6.59245 10.1422 6.59245 9.91667ZM8.92578 4.08333C8.92578 3.02019 8.06404 2.15845 7.0009 2.15845C5.93775 2.15845 5.07601 3.02019 5.07601 4.08333V6.00822H10.5009C11.3707 6.00822 12.076 6.71348 12.076 7.58333V11.0833C12.076 11.9532 11.3707 12.6584 10.5009 12.6584H3.5009C2.63105 12.6584 1.92578 11.9532 1.92578 11.0833V7.58333C1.92578 6.71348 2.63105 6.00822 3.5009 6.00822H4.25911V4.08333C4.25911 2.56915 5.48671 1.34155 7.0009 1.34155C8.51508 1.34155 9.74268 2.56915 9.74268 4.08333C9.74268 4.30885 9.55974 4.49178 9.33423 4.49178C9.10871 4.49178 8.92578 4.30885 8.92578 4.08333Z"
      fill="#258141"
    />
  </svg>
);

export const QuestionMarkSvg = ({ size = '13' }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M13.5332 8C13.5332 4.94402 11.056 2.4668 8 2.4668C4.94402 2.4668 2.4668 4.94402 2.4668 8C2.4668 11.056 4.94402 13.5332 8 13.5332C11.056 13.5332 13.5332 11.056 13.5332 8ZM8 7.5332C8.25773 7.5332 8.4668 7.74227 8.4668 8V10.1999H8.66667C8.9244 10.1999 9.13346 10.4089 9.13346 10.6667C9.13346 10.9244 8.9244 11.1335 8.66667 11.1335H8C7.74227 11.1335 7.5332 10.9244 7.5332 10.6667V8.4668H7.33333C7.0756 8.4668 6.86654 8.25773 6.86654 8C6.86654 7.74227 7.0756 7.5332 7.33333 7.5332H8ZM8.00651 4.86654C8.26424 4.86654 8.47331 5.0756 8.47331 5.33333C8.47331 5.59107 8.26424 5.80013 8.00651 5.80013H8C7.74227 5.80013 7.5332 5.59107 7.5332 5.33333C7.5332 5.0756 7.74227 4.86654 8 4.86654H8.00651ZM14.4668 8C14.4668 11.5714 11.5714 14.4668 8 14.4668C4.42856 14.4668 1.5332 11.5714 1.5332 8C1.5332 4.42856 4.42856 1.5332 8 1.5332C11.5714 1.5332 14.4668 4.42856 14.4668 8Z"
      fill="#99A1AF"
    />
  </svg>
);

export const ExportSvg = ({
  size = '16',
  color = '#4A5565',
  strokeWidth = null,
}) => (
  <>
    <svg
      width={size}
      height={size}
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M11.3341 13.8002L4.66748 13.8002C3.30518 13.8002 2.20068 12.6957 2.20068 11.3334L2.20068 10.6667C2.20068 10.409 2.40975 10.1999 2.66748 10.1999C2.92521 10.1999 3.13428 10.409 3.13428 10.6667L3.13428 11.3334C3.13428 12.1802 3.82064 12.8666 4.66748 12.8666L11.3341 12.8666C12.181 12.8666 12.8674 12.1802 12.8674 11.3334L12.8674 10.6667C12.8674 10.409 13.0764 10.1999 13.3341 10.1999C13.5919 10.1999 13.8009 10.409 13.8009 10.6667L13.8009 11.3334C13.8009 12.6957 12.6965 13.8002 11.3341 13.8002ZM5.00407 5.66345C4.82182 5.48121 4.82182 5.18554 5.00407 5.0033L7.67074 2.33663C7.75825 2.24911 7.87705 2.19991 8.00081 2.19991C8.12458 2.19991 8.24337 2.24911 8.33089 2.33663L10.9976 5.0033C11.1798 5.18554 11.1798 5.48121 10.9976 5.66345C10.8153 5.8457 10.5196 5.8457 10.3374 5.66345L8.46761 3.79366L8.46761 10.6667C8.46761 10.9244 8.25855 11.1335 8.00081 11.1335C7.74308 11.1335 7.53402 10.9244 7.53402 10.6667L7.53402 3.79366L5.66422 5.66345C5.48198 5.8457 5.18631 5.8457 5.00407 5.66345Z"
        fill={color}
        strokeWidth={strokeWidth}
        stroke={strokeWidth ? color : null}
      />
    </svg>
  </>
);

export const ExitSvg = ({ color = '#B73B0B', size = 16 }, props) => {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M7.00374 5.00321C7.18599 4.82097 7.48166 4.82097 7.6639 5.00321C7.84614 5.18546 7.84614 5.48113 7.6639 5.66337L5.79411 7.53316H14.0005C14.2582 7.53316 14.4673 7.74223 14.4673 7.99996C14.4673 8.25769 14.2582 8.46676 14.0005 8.46676H5.79411L7.6639 10.3365C7.84614 10.5188 7.84614 10.8145 7.6639 10.9967C7.48166 11.1789 7.18599 11.1789 7.00374 10.9967L4.33708 8.33004C4.15483 8.14779 4.15483 7.85213 4.33708 7.66988L7.00374 5.00321ZM10.2004 5.33329V4.66663C10.2004 3.81979 9.51399 3.13342 8.66716 3.13342H4.00049C3.15365 3.13342 2.46729 3.81979 2.46729 4.66663V11.3333C2.46729 12.1801 3.15365 12.8665 4.00049 12.8665H8.66716C9.51399 12.8665 10.2004 12.1801 10.2004 11.3333V10.6666C10.2004 10.4089 10.4094 10.1998 10.6672 10.1998C10.9249 10.1998 11.134 10.4089 11.134 10.6666V11.3333C11.134 12.6956 10.0295 13.8001 8.66716 13.8001H4.00049C2.63819 13.8001 1.53369 12.6956 1.53369 11.3333V4.66663C1.53369 3.30432 2.63819 2.19983 4.00049 2.19983H8.66716C10.0295 2.19983 11.134 3.30432 11.134 4.66663V5.33329C11.134 5.59103 10.9249 5.80009 10.6672 5.80009C10.4094 5.80009 10.2004 5.59103 10.2004 5.33329Z"
        fill={color}
      />
    </svg>
  );
};

export const CheckBoxCheckSvg = ({ size = '26' }) => {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 26 26"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M9.75 0.813477H16.25C21.1861 0.813477 25.1875 4.81493 25.1875 9.75098V16.251C25.1875 21.1871 21.1861 25.1885 16.25 25.1885H9.75C4.81395 25.1885 0.8125 21.1871 0.8125 16.251V9.75098C0.8125 4.81493 4.81395 0.813477 9.75 0.813477Z"
        fill="#69A643"
      />
      <path
        d="M9.75 0.813477H16.25C21.1861 0.813477 25.1875 4.81493 25.1875 9.75098V16.251C25.1875 21.1871 21.1861 25.1885 16.25 25.1885H9.75C4.81395 25.1885 0.8125 21.1871 0.8125 16.251V9.75098C0.8125 4.81493 4.81395 0.813477 9.75 0.813477Z"
        stroke="#69A643"
        strokeWidth="0.99875"
      />
      <path
        d="M20.9582 9.38056L11.2081 19.1306C11.1232 19.2157 11.0223 19.2833 10.9112 19.3295C10.8001 19.3756 10.681 19.3994 10.5607 19.3994C10.4404 19.3994 10.3212 19.3756 10.2101 19.3295C10.099 19.2833 9.99812 19.2157 9.91319 19.1306L5.64758 14.8649C5.56255 14.7799 5.49511 14.679 5.44909 14.5679C5.40307 14.4568 5.37939 14.3377 5.37939 14.2175C5.37939 14.0972 5.40307 13.9782 5.44909 13.8671C5.49511 13.756 5.56255 13.655 5.64758 13.57C5.7326 13.485 5.83355 13.4175 5.94463 13.3715C6.05572 13.3255 6.1748 13.3018 6.29503 13.3018C6.41528 13.3018 6.53435 13.3255 6.64545 13.3715C6.75653 13.4175 6.85748 13.485 6.9425 13.57L10.5614 17.1889L19.6647 8.08716C19.8365 7.91545 20.0693 7.81897 20.3123 7.81897C20.555 7.81897 20.7879 7.91545 20.9597 8.08716C21.1314 8.25887 21.2278 8.49177 21.2278 8.73463C21.2278 8.97747 21.1314 9.21036 20.9597 9.38209L20.9582 9.38056Z"
        fill="white"
      />
    </svg>
  );
};

export const CheckBoxUncheckSvg = ({ size = '26' }) => {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 26 26"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M9.75 0.813477H16.25C21.1861 0.813477 25.1875 4.81493 25.1875 9.75098V16.251C25.1875 21.1871 21.1861 25.1885 16.25 25.1885H9.75C4.81395 25.1885 0.8125 21.1871 0.8125 16.251V9.75098C0.8125 4.81493 4.81395 0.813477 9.75 0.813477Z"
        fill="white"
      />
      <path
        d="M9.75 0.813477H16.25C21.1861 0.813477 25.1875 4.81493 25.1875 9.75098V16.251C25.1875 21.1871 21.1861 25.1885 16.25 25.1885H9.75C4.81395 25.1885 0.8125 21.1871 0.8125 16.251V9.75098C0.8125 4.81493 4.81395 0.813477 9.75 0.813477Z"
        stroke="#E0DFE0"
        strokeWidth="0.99875"
      />
    </svg>
  );
};

export const EditPenSvg = ({ fill = '#737373' }) => (
  <svg
    width="12"
    height="12"
    viewBox="0 0 12 12"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M8.62108 0.578686C9.39407 -0.19289 10.6473 -0.192901 11.4203 0.578686C12.1932 1.35027 12.1932 2.60123 11.4203 3.37281L2.9043 11.8734C2.8231 11.9544 2.71288 12 2.59804 12H0.433108C0.193976 12 0 11.8064 0 11.5677V9.36325C0 9.24868 0.0457346 9.13858 0.126852 9.05754L8.62108 0.578686ZM0.866216 9.54172V11.136H2.41803L9.57368 3.99326L7.9989 2.42134L0.866216 9.54172ZM10.8078 1.19009C10.373 0.756075 9.6684 0.756086 9.23359 1.19009L8.61141 1.80994L10.1862 3.38186L10.8078 2.76141C11.2425 2.32739 11.2425 1.62411 10.8078 1.19009Z"
      fill={fill}
    />
  </svg>
);

export const TransitionSvg = ({ size = 16 }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M8.66667 3.99992H4C3.63181 3.99992 3.33333 4.2984 3.33333 4.66659V11.9999C3.33333 12.3681 3.63181 12.6666 4 12.6666H11.3333C11.7015 12.6666 12 12.3681 12 11.9999V7.33325M11.3333 3.33325H12.6667M12.6667 3.33325V4.66659M12.6667 3.33325L8 7.99992"
      stroke="white"
      strokeWidth="1.33"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);