import React from 'react';
import styled from 'styled-components';

import type { IconProps } from '@redocly/theme/icons/types';

import { getCssColorVariable } from '@redocly/theme/core/utils';

const Icon = (props: IconProps) => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <g id="iconGraphQL">
      <g id="Vector">
        <path
          d="M3.01235 11.5921L2.50927 11.3017L8.11379 1.5947L8.61687 1.88514L3.01235 11.5921Z"
          fill="#3B3C45"
        />
        <path d="M2.39407 10.5261H13.6027V11.1071H2.39407V10.5261Z" fill="#3B3C45" />
        <path
          d="M8.22231 14.0897L2.61591 10.8527L2.90631 10.3497L8.51275 13.5866L8.22231 14.0897ZM13.0926 5.6531L7.48623 2.41614L7.77667 1.91306L13.3831 5.15006L13.0926 5.6531Z"
          fill="#3B3C45"
        />
        <path
          d="M2.90787 5.65082L2.61743 5.14778L8.22383 1.91078L8.51427 2.41386L2.90787 5.65082Z"
          fill="#3B3C45"
        />
        <path
          d="M12.9893 11.5921L7.38483 1.88514L7.88791 1.5947L13.4924 11.3017L12.9893 11.5921ZM2.83827 4.76242H3.41923V11.2365H2.83827V4.76242ZM12.5809 4.76242H13.1618V11.2365H12.5809V4.76242Z"
          fill="#3B3C45"
        />
        <path
          d="M8.12355 13.844L7.86983 13.4045L12.7459 10.5892L12.9996 11.0286L8.12355 13.844Z"
          fill="#3B3C45"
        />
        <path
          d="M13.9316 11.4256C13.5957 12.01 12.8468 12.2095 12.2624 11.8735C11.678 11.5376 11.4785 10.7887 11.8145 10.2043C12.1504 9.6199 12.8993 9.42042 13.4837 9.75638C14.0716 10.0958 14.2711 10.8412 13.9316 11.4256ZM4.18219 5.79514C3.84623 6.37954 3.09735 6.57898 2.51291 6.24302C1.92851 5.9071 1.72907 5.15822 2.06503 4.57382C2.40095 3.98938 3.14983 3.7899 3.73423 4.12586C4.31867 4.4653 4.51815 5.2107 4.18219 5.79514ZM2.06851 11.4256C1.73251 10.8412 1.93203 10.0958 2.51639 9.75642C3.10079 9.42042 3.84623 9.6199 4.18567 10.2043C4.52159 10.7887 4.32215 11.5341 3.73775 11.8735C3.14987 12.2095 2.40443 12.01 2.06851 11.4256ZM11.818 5.79514C11.482 5.21074 11.6815 4.4653 12.2659 4.12586C12.8503 3.78994 13.5957 3.98938 13.9351 4.57378C14.2711 5.15818 14.0716 5.90358 13.4872 6.24302C12.9028 6.57902 12.1539 6.3795 11.818 5.79514ZM8.00003 14.8518C7.32463 14.8518 6.77871 14.3059 6.77871 13.6305C6.77871 12.9551 7.32463 12.4092 8.00003 12.4092C8.67543 12.4092 9.22131 12.9551 9.22131 13.6305C9.22131 14.3024 8.67543 14.8518 8.00003 14.8518ZM8.00003 3.59038C7.32463 3.59038 6.77871 3.04446 6.77871 2.3691C6.77871 1.69374 7.32463 1.14778 8.00003 1.14778C8.67543 1.14778 9.22131 1.6937 9.22131 2.3691C9.22131 3.0445 8.67543 3.59038 8.00003 3.59038Z"
          fill="#3B3C45"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M8.00003 1.28384C7.39978 1.28384 6.91477 1.76888 6.91477 2.3691C6.91477 2.41502 6.91761 2.46026 6.92312 2.50467L7.41983 2.21788L7.19896 1.83534L7.93771 1.40884L8.00085 1.51819L8.06399 1.40884L8.80274 1.83534L8.58058 2.22011L9.07666 2.50653C9.08233 2.46153 9.08525 2.41566 9.08525 2.3691C9.08525 1.76884 8.60028 1.28384 8.00003 1.28384ZM9.32802 2.65166C9.34725 2.56053 9.35737 2.46602 9.35737 2.3691C9.35737 1.61856 8.75058 1.01172 8.00003 1.01172C7.24948 1.01172 6.64265 1.6186 6.64265 2.3691C6.64265 2.46538 6.65263 2.5593 6.67163 2.64987L4.03113 4.17443C3.96223 4.11247 3.88592 4.05662 3.80256 4.0082C3.15348 3.63506 2.32071 3.85596 1.94707 4.50601C1.57393 5.15509 1.79508 5.98734 2.4451 6.36098C2.52825 6.40878 2.6144 6.44682 2.70221 6.47547V9.52504C2.61565 9.55356 2.53068 9.59126 2.44857 9.63846C1.79955 10.0154 1.57714 10.844 1.95055 11.4934C2.32424 12.1435 3.15292 12.3645 3.80527 11.9917C3.88753 11.9439 3.96375 11.8884 4.03194 11.8274L6.6713 13.3513C6.65252 13.4414 6.64265 13.5348 6.64265 13.6305C6.64265 14.3811 7.24949 14.9878 8.00003 14.9878C8.75083 14.9878 9.35737 14.3773 9.35737 13.6305C9.35737 13.5203 9.34428 13.4131 9.31956 13.3105L11.9367 11.7994C12.0131 11.872 12.0992 11.9367 12.1946 11.9915C12.8436 12.3646 13.6758 12.1435 14.0495 11.4937C14.4267 10.8439 14.2044 10.0154 13.5517 9.63855C13.4697 9.59137 13.3845 9.55357 13.2979 9.52506V6.47551C13.3857 6.44686 13.4719 6.4088 13.555 6.36098C14.2041 5.98398 14.4265 5.15542 14.0531 4.50596C13.6761 3.85689 12.8476 3.63459 12.1981 4.0079C12.1142 4.05664 12.0369 4.11323 11.9676 4.1757L9.32802 2.65166ZM9.00523 2.77952L8.59101 2.54035L8.86841 3.02081C8.92375 2.94712 8.96992 2.86613 9.00523 2.77952ZM8.42845 2.80304L8.34942 2.66615L8.30986 2.68899L8.29013 2.72317L8.42845 2.80304ZM7.99827 2.55467L8.11066 2.48978L8.17912 2.3712L8.11966 2.26821L7.99827 2.19812L7.88461 2.26375L7.82257 2.3712L7.89361 2.49424L7.99827 2.55467ZM7.65099 2.66838L7.6944 2.69344L7.71028 2.72095L7.57582 2.79858L7.65099 2.66838ZM8.41294 1.96622L8.37683 1.90367L8.431 1.93494L8.41294 1.96622ZM8.17042 1.7845L8.16359 1.78056L8.15796 1.79031L8.15856 1.79135L8.17042 1.7845ZM7.83811 1.78056L7.84374 1.79031L7.84185 1.79358L7.8287 1.78599L7.83811 1.78056ZM7.62504 1.90357L7.5707 1.93494L7.58881 1.96632L7.62504 1.90357ZM7.41326 2.5359L6.99414 2.77789C7.02974 2.8656 7.07646 2.94757 7.13257 3.02205L7.41326 2.5359ZM6.91217 3.18175C6.85072 3.09957 6.79837 3.01016 6.75661 2.91503L4.21789 4.38083C4.27931 4.46462 4.3305 4.55469 4.37091 4.64899L6.91217 3.18175ZM4.13315 4.78627C4.09554 4.6908 4.04435 4.6003 3.98041 4.51794L3.55529 4.76339V5.11991L4.13315 4.78627ZM3.55529 5.43413L4.20192 5.06079C4.22785 5.28418 4.18488 5.51744 4.06423 5.72733C3.94346 5.93741 3.76245 6.09157 3.55529 6.1808V5.43413ZM3.28317 5.27702V4.92051L2.97433 5.09883V5.45534L3.28317 5.27702ZM3.2484 4.62636H2.70221V4.94172L2.43156 5.09798L2.70221 5.56673V6.18527C2.66101 6.16794 2.62044 6.14789 2.58072 6.12506C2.06194 5.82686 1.88421 5.16135 2.18299 4.64163C2.48114 4.1229 3.14647 3.94511 3.66614 4.24366C3.7061 4.26688 3.74404 4.29224 3.77988 4.3195L3.2484 4.62636ZM2.97433 6.5341V9.46563C3.07759 9.45406 3.18121 9.45452 3.28317 9.46645V6.53267C3.18122 6.54476 3.07759 6.54541 2.97433 6.5341ZM3.28317 6.25817C3.18161 6.27326 3.07759 6.27412 2.97433 6.25989V5.76956L3.28317 5.59125V6.25817ZM3.55529 6.47181C3.85901 6.37047 4.12815 6.16214 4.30015 5.86295C4.47176 5.56442 4.51762 5.22811 4.45405 4.91522L6.83232 3.54208L3.55529 9.21788V6.47181ZM3.28317 10.2334L3.20665 10.366L3.24843 10.3901H3.28317V10.2334ZM3.28317 10.7244L3.17551 10.6622H3.03561L2.97433 10.7683V10.9025L3.09291 10.971H3.21387L3.28317 10.851V10.7244ZM3.55529 10.971V10.9239L3.57366 10.8921L3.71035 10.971H3.55529ZM2.97433 10.2241L3.25544 9.73721C3.16269 9.72604 3.06819 9.72675 2.97433 9.73997V10.2241ZM2.70221 9.81561C2.66234 9.83256 2.62305 9.85206 2.58454 9.87418C2.06498 10.1761 1.88791 10.8385 2.18646 11.3578C2.48454 11.8764 3.14646 12.0545 3.66981 11.7557C3.7086 11.7331 3.74549 11.7085 3.78041 11.6822L3.28322 11.3951L3.06215 11.778L2.3234 11.3515L2.38598 11.2431H2.25801V10.3901H2.70221V9.81561ZM2.56878 10.6622H2.53013V10.7291L2.56878 10.6622ZM2.53013 10.9603V10.971H2.54309L2.54449 10.9686L2.53013 10.9603ZM2.69514 11.2519L2.7002 11.2431H2.70221V11.256L2.69514 11.2519ZM2.90421 11.3726L2.96255 11.4063L2.98199 11.3726H2.90421ZM3.56423 11.2431L3.98177 11.4842C4.03994 11.4098 4.08765 11.3286 4.1243 11.2431H3.56423ZM4.37302 11.3536C4.33237 11.4478 4.28096 11.5377 4.21933 11.6214L6.75599 13.086C6.79764 12.9908 6.84988 12.9013 6.91124 12.8191L4.37302 11.3536ZM7.14896 12.9563C7.0852 13.0368 7.03263 13.1265 6.99356 13.2231L7.91524 13.7553L7.68397 13.3547L7.76145 13.31L7.14896 12.9563ZM8.03357 13.1528L7.35202 12.7593C7.53275 12.6248 7.75694 12.5453 8.00003 12.5453C8.25618 12.5453 8.49133 12.6336 8.67676 12.7815L8.03357 13.1528ZM8.07781 13.4926L8.17335 13.6581L8.2689 13.6029L8.07781 13.4926ZM8.58409 13.7352L8.27211 14.2756L6.92292 13.4966C6.91754 13.5405 6.91477 13.5851 6.91477 13.6305C6.91477 14.2307 7.39977 14.7157 8.00003 14.7157C8.60003 14.7157 9.08525 14.2275 9.08525 13.6305C9.08525 13.5704 9.08038 13.5114 9.07103 13.454L8.58409 13.7352ZM9.22743 13.0495L11.7567 11.5891C11.7118 11.5242 11.673 11.4557 11.6403 11.3847L9.10863 12.8464C9.15383 12.9102 9.19364 12.9781 9.22743 13.0495ZM8.87168 12.9832C8.91833 13.0459 8.95836 13.114 8.99072 13.1862L8.54101 13.4458L8.30569 13.31L8.87168 12.9832ZM8.92613 12.6375C8.68374 12.4114 8.35826 12.2732 8.00003 12.2732C7.65449 12.2732 7.3394 12.4018 7.09997 12.6138L4.72591 11.2431H11.3412L8.92613 12.6375ZM11.8854 11.2431L11.8773 11.2478C11.9083 11.3197 11.9471 11.3883 11.9934 11.4524L12.3559 11.2431H11.8854ZM12.6759 11.3726L12.1853 11.6559C12.2301 11.6924 12.2785 11.7258 12.3302 11.7556C12.8499 12.0543 13.5155 11.8766 13.8137 11.3578C14.1151 10.8389 13.9387 10.1762 13.4157 9.87423C13.3771 9.85207 13.3378 9.83254 13.2979 9.81558V10.3901H13.7387V11.2431H13.6157L13.6783 11.3515L12.9395 11.778L12.7054 11.3726H12.6759ZM13.0196 11.3726L13.0391 11.4063L13.0974 11.3726H13.0196ZM13.2979 11.2569L13.3065 11.2519L13.3015 11.2431H13.2979V11.2569ZM13.4666 10.971H13.4586L13.2979 10.6926V10.6622H13.4666V10.971ZM13.0257 10.2213V9.73999C12.9324 9.72683 12.8383 9.72601 12.746 9.73691L13.0257 10.2213ZM12.7169 9.46634C12.8189 9.45451 12.9225 9.45411 13.0257 9.46569V6.53412C12.9225 6.54543 12.8189 6.54477 12.7169 6.53267V9.46634ZM12.7169 6.25817C12.8185 6.27326 12.9225 6.27413 13.0257 6.25992V5.77159L12.7169 5.5933V6.25817ZM12.4448 5.43618V6.18076C12.2377 6.09152 12.0567 5.93738 11.9359 5.72733C11.8156 5.51807 11.7726 5.28556 11.798 5.06275L12.4448 5.43618ZM12.7169 5.27907L13.0257 5.45736V5.10085L12.7169 4.92256V5.27907ZM13.2979 5.56977L13.5689 5.10026L13.2979 4.94375V4.62636H12.7481L12.2187 4.32068C12.255 4.29297 12.2935 4.26721 12.334 4.24365C12.8533 3.9454 13.5155 4.12244 13.8173 4.64191C14.1156 5.16112 13.9386 5.82335 13.4191 6.12523C13.3795 6.14801 13.339 6.16802 13.2979 6.18532V5.56977ZM11.7812 4.38229L9.24272 2.91663C9.20084 3.01171 9.14838 3.10105 9.08682 3.18316L11.6285 4.65067C11.6688 4.55631 11.7199 4.46617 11.7812 4.38229ZM11.8664 4.78798C11.9038 4.69244 11.9548 4.60185 12.0186 4.51938L12.4448 4.76544V5.12196L11.8664 4.78798ZM11.5458 4.91709C11.4827 5.22946 11.5288 5.56502 11.7 5.86295C11.872 6.16209 12.1411 6.37042 12.4448 6.47178V9.21516L9.17194 3.54653L11.5458 4.91709ZM8.64516 3.24238L8.16575 2.96559L8.40337 3.37716C8.49007 3.34252 8.57122 3.29704 8.64516 3.24238ZM8.5406 3.61483C8.63593 3.57348 8.72556 3.52152 8.808 3.46043L12.3345 9.56833C12.2402 9.60887 12.1501 9.66018 12.0665 9.72174L8.5406 3.61483ZM8.12932 3.44673L8.00084 3.22421L7.87226 3.44691C7.91416 3.4518 7.9568 3.45432 8.00003 3.45432C8.04379 3.45432 8.08693 3.45174 8.12932 3.44673ZM7.72671 3.699C7.81498 3.717 7.90639 3.72644 8.00003 3.72644C8.09419 3.72644 8.18608 3.71689 8.2748 3.69871L11.8605 9.90917C11.7993 9.97776 11.7442 10.0537 11.6966 10.1365C11.6494 10.2186 11.6117 10.3035 11.5832 10.3901H4.41701C4.3885 10.3035 4.35082 10.2186 4.30363 10.1365C4.25603 10.0545 4.20092 9.97885 4.14018 9.91085L7.72671 3.699ZM7.59801 3.37768L7.83851 2.96113L7.35336 3.24124C7.42809 3.29669 7.51021 3.34274 7.59801 3.37768ZM7.1932 3.46127C7.2757 3.52228 7.36539 3.57414 7.46076 3.61539L3.93426 9.72328C3.85064 9.66158 3.76074 9.61011 3.66656 9.56939L7.1932 3.46127ZM3.79708 9.96087C3.72245 9.90244 3.64106 9.85453 3.55529 9.81777V10.3797L3.79708 9.96087ZM3.86349 10.3901H4.12644C4.10949 10.3502 4.08997 10.3109 4.06784 10.2723C4.04544 10.2338 4.02107 10.1972 3.99491 10.1625L3.86349 10.3901ZM4.20207 10.6622H3.71975L4.20495 10.9423C4.216 10.8499 4.21525 10.7557 4.20207 10.6622ZM4.4756 10.971H11.5245C11.5126 10.869 11.5122 10.7654 11.5238 10.6622H4.47641C4.48798 10.7654 4.48753 10.8691 4.4756 10.971ZM11.7981 10.6622C11.7836 10.7654 11.7841 10.8694 11.7988 10.971H11.8125L12.3083 10.6848L12.2952 10.6622H11.7981ZM11.8738 10.3901H12.1381L12.0058 10.1609C11.9794 10.196 11.9549 10.2331 11.9325 10.2721C11.9103 10.3107 11.8907 10.3501 11.8738 10.3901ZM12.2037 9.95932L12.4448 10.377V9.81716C12.3592 9.85369 12.278 9.90129 12.2037 9.95932ZM12.7169 10.2307V10.3901H12.8089L12.7169 10.2307ZM12.9661 10.6622H12.9452L13.0257 10.8017V10.7656L12.9661 10.6622ZM12.8093 10.971L12.7169 10.8111V10.8483L12.7878 10.971H12.8093ZM12.4448 10.971V10.9212L12.3567 10.971H12.4448Z"
          fill="#3B3C45"
        />
      </g>
    </g>
  </svg>
);

export const DocumentGraphqlIcon = styled(Icon).attrs({
  'data-component-name': 'icons/DocumentGraphqlIcon/DocumentGraphqlIcon',
})`
  path {
    fill: ${({ color }) => getCssColorVariable(color)};
  }

  height: ${({ size }) => size || '16px'};
  width: ${({ size }) => size || '16px'};
`;
