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}
  >
    <path
      d="M14.5351 2.99992H3.83862C3.6752 3.00407 3.51738 3.06029 3.38814 3.16039C3.25891 3.26049 3.16501 3.39924 3.12012 3.55642L1.02012 12.4434C0.998149 12.5106 0.993246 12.5822 1.00585 12.6518C1.01845 12.7213 1.04817 12.7867 1.09232 12.8419C1.13646 12.8971 1.19365 12.9404 1.25874 12.968C1.32382 12.9956 1.39474 13.0066 1.46512 12.9999H12.1616C12.3249 12.9957 12.4827 12.9394 12.6118 12.8393C12.7409 12.7392 12.8348 12.6005 12.8796 12.4434L14.9801 3.55592C15.002 3.48876 15.0068 3.41722 14.9942 3.34773C14.9815 3.27825 14.9518 3.213 14.9076 3.15785C14.8635 3.10271 14.8064 3.05941 14.7413 3.03184C14.6763 3.00427 14.6054 2.9933 14.5351 2.99992ZM4.31312 11.8984C4.16872 11.9865 3.99731 12.0194 3.83057 11.9909C3.66383 11.9624 3.51306 11.8745 3.40612 11.7434L3.40262 11.7389C3.35483 11.6781 3.32075 11.6076 3.30269 11.5324C3.28463 11.4572 3.28302 11.3789 3.29797 11.303C3.31292 11.2271 3.34409 11.1554 3.38933 11.0926C3.43457 11.0298 3.49283 10.9776 3.56012 10.9394L8.36012 7.90892L5.30912 4.98292L5.30412 4.97792C5.24784 4.92482 5.20377 4.86011 5.17497 4.78829C5.14616 4.71647 5.13332 4.63924 5.13731 4.56196C5.14131 4.48469 5.16205 4.4092 5.1981 4.34073C5.23416 4.27226 5.28466 4.21244 5.34612 4.16542L5.36462 4.15042C5.49395 4.04749 5.65594 3.9944 5.82112 4.00082C5.98629 4.00725 6.14367 4.07275 6.26462 4.18542L9.88112 7.66392C9.96402 7.76867 10.006 7.90001 9.99912 8.03342C9.99485 8.11013 9.97427 8.18504 9.93875 8.25316C9.90323 8.32127 9.85358 8.38102 9.79312 8.42842C9.75612 8.44842 9.72012 8.48792 4.31762 11.8959L4.31312 11.8984ZM12.0001 11.4699C11.9905 11.6194 11.9221 11.7589 11.81 11.8582C11.6979 11.9575 11.5511 12.0084 11.4016 11.9999H8.58462C8.51096 12.0071 8.43662 11.9987 8.36638 11.9754C8.29614 11.9521 8.23156 11.9144 8.17677 11.8646C8.12199 11.8149 8.07822 11.7542 8.04828 11.6865C8.01834 11.6188 8.00289 11.5457 8.00293 11.4716C8.00296 11.3976 8.01848 11.3245 8.04848 11.2568C8.07849 11.1892 8.12231 11.1285 8.17714 11.0788C8.23197 11.0291 8.2966 10.9915 8.36686 10.9682C8.43712 10.945 8.51147 10.9367 8.58512 10.9439H11.4016C11.5503 10.9353 11.6965 10.9855 11.8085 11.0837C11.9205 11.182 11.9893 11.3203 12.0001 11.4689V11.4699Z"
      fill="#3B3C45"
    />
  </svg>
);

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

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