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 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path d="M12.85 4.64993L9.35 1.14993C9.30601 1.10107 9.25192 1.06236 9.19149 1.03646C9.13106 1.01056 9.06572 0.998095 9 0.999933H4C3.73502 1.00071 3.48112 1.10632 3.29375 1.29369C3.10638 1.48105 3.00078 1.73496 3 1.99993V13.9999C3.00078 14.2649 3.10638 14.5188 3.29375 14.7062C3.48112 14.8935 3.73502 14.9992 4 14.9999H12C12.265 14.9992 12.5189 14.8935 12.7062 14.7062C12.8936 14.5188 12.9992 14.2649 13 13.9999V4.99993C13.0018 4.93421 12.9894 4.86887 12.9635 4.80844C12.9376 4.74801 12.8989 4.69393 12.85 4.64993ZM9 2.19993L11.8 4.99993H9V2.19993ZM12 13.9999H4V1.99993H8V4.99993C8.00078 5.26491 8.10638 5.51881 8.29375 5.70618C8.48112 5.89355 8.73502 5.99916 9 5.99993H12V13.9999Z" />
  </svg>
);

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

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