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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" {...props}>
    <path d="M13.625 11.375C13.2277 11.3769 12.8386 11.4878 12.5 11.6956L10.7619 9.95188C11.1663 9.38137 11.3835 8.69932 11.3835 8C11.3835 7.30068 11.1663 6.61863 10.7619 6.04813L12.5 4.30438C12.8386 4.51216 13.2277 4.62306 13.625 4.625C14.07 4.625 14.505 4.49304 14.875 4.24581C15.245 3.99857 15.5334 3.64717 15.7037 3.23604C15.874 2.8249 15.9186 2.3725 15.8318 1.93605C15.745 1.49959 15.5307 1.09868 15.216 0.784011C14.9013 0.469343 14.5004 0.255051 14.064 0.168234C13.6275 0.0814174 13.1751 0.125975 12.764 0.296272C12.3528 0.466569 12.0014 0.754957 11.7542 1.12497C11.507 1.49498 11.375 1.92999 11.375 2.375C11.3769 2.77227 11.4878 3.1614 11.6956 3.5L9.95188 5.23813C9.38137 4.83369 8.69932 4.61645 8 4.61645C7.30068 4.61645 6.61863 4.83369 6.04813 5.23813L4.30438 3.5C4.51216 3.1614 4.62306 2.77227 4.625 2.375C4.625 1.92999 4.49304 1.49498 4.24581 1.12497C3.99857 0.754957 3.64717 0.466569 3.23604 0.296272C2.8249 0.125975 2.3725 0.0814174 1.93605 0.168234C1.49959 0.255051 1.09868 0.469343 0.784011 0.784011C0.469343 1.09868 0.255051 1.49959 0.168234 1.93605C0.0814174 2.3725 0.125975 2.8249 0.296272 3.23604C0.466569 3.64717 0.754957 3.99857 1.12497 4.24581C1.49498 4.49304 1.92999 4.625 2.375 4.625C2.77227 4.62306 3.1614 4.51216 3.5 4.30438L5.23813 6.04813C4.83369 6.61863 4.61645 7.30068 4.61645 8C4.61645 8.69932 4.83369 9.38137 5.23813 9.95188L3.5 11.6956C3.1614 11.4878 2.77227 11.3769 2.375 11.375C1.92999 11.375 1.49498 11.507 1.12497 11.7542C0.754957 12.0014 0.466569 12.3528 0.296272 12.764C0.125975 13.1751 0.0814174 13.6275 0.168234 14.064C0.255051 14.5004 0.469343 14.9013 0.784011 15.216C1.09868 15.5307 1.49959 15.745 1.93605 15.8318C2.3725 15.9186 2.8249 15.874 3.23604 15.7037C3.64717 15.5334 3.99857 15.245 4.24581 14.875C4.49304 14.505 4.625 14.07 4.625 13.625C4.62306 13.2277 4.51216 12.8386 4.30438 12.5L6.04813 10.7619C6.61863 11.1663 7.30068 11.3835 8 11.3835C8.69932 11.3835 9.38137 11.1663 9.95188 10.7619L11.6956 12.5C11.4878 12.8386 11.3769 13.2277 11.375 13.625C11.375 14.07 11.507 14.505 11.7542 14.875C12.0014 15.245 12.3528 15.5334 12.764 15.7037C13.1751 15.874 13.6275 15.9186 14.064 15.8318C14.5004 15.745 14.9013 15.5307 15.216 15.216C15.5307 14.9013 15.745 14.5004 15.8318 14.064C15.9186 13.6275 15.874 13.1751 15.7037 12.764C15.5334 12.3528 15.245 12.0014 14.875 11.7542C14.505 11.507 14.07 11.375 13.625 11.375ZM13.625 1.25C13.8475 1.25 14.065 1.31598 14.25 1.4396C14.435 1.56321 14.5792 1.73892 14.6644 1.94448C14.7495 2.15005 14.7718 2.37625 14.7284 2.59448C14.685 2.81271 14.5778 3.01316 14.4205 3.1705C14.2632 3.32783 14.0627 3.43498 13.8445 3.47838C13.6262 3.52179 13.4 3.49951 13.1945 3.41437C12.9889 3.32922 12.8132 3.18502 12.6896 3.00002C12.566 2.81501 12.5 2.59751 12.5 2.375C12.5 2.07663 12.6185 1.79048 12.8295 1.57951C13.0405 1.36853 13.3266 1.25 13.625 1.25ZM1.25 2.375C1.25 2.1525 1.31598 1.93499 1.4396 1.74998C1.56321 1.56498 1.73892 1.42078 1.94448 1.33564C2.15005 1.25049 2.37625 1.22821 2.59448 1.27162C2.81271 1.31503 3.01316 1.42217 3.1705 1.57951C3.32783 1.73684 3.43498 1.9373 3.47838 2.15552C3.52179 2.37375 3.49951 2.59995 3.41437 2.80552C3.32922 3.01109 3.18502 3.18679 3.00002 3.3104C2.81501 3.43402 2.59751 3.5 2.375 3.5C2.07663 3.5 1.79048 3.38147 1.57951 3.1705C1.36853 2.95952 1.25 2.67337 1.25 2.375ZM2.375 14.75C2.1525 14.75 1.93499 14.684 1.74998 14.5604C1.56498 14.4368 1.42078 14.2611 1.33564 14.0555C1.25049 13.85 1.22821 13.6238 1.27162 13.4055C1.31503 13.1873 1.42217 12.9868 1.57951 12.8295C1.73684 12.6722 1.9373 12.565 2.15552 12.5216C2.37375 12.4782 2.59995 12.5005 2.80552 12.5856C3.01109 12.6708 3.18679 12.815 3.3104 13C3.43402 13.185 3.5 13.4025 3.5 13.625C3.5 13.9234 3.38147 14.2095 3.1705 14.4205C2.95952 14.6315 2.67337 14.75 2.375 14.75ZM8 10.25C7.55499 10.25 7.11998 10.118 6.74997 9.87081C6.37996 9.62357 6.09157 9.27217 5.92127 8.86104C5.75097 8.4499 5.70642 7.99751 5.79323 7.56105C5.88005 7.12459 6.09434 6.72368 6.40901 6.40901C6.72368 6.09434 7.12459 5.88005 7.56105 5.79323C7.99751 5.70642 8.4499 5.75097 8.86104 5.92127C9.27217 6.09157 9.62357 6.37996 9.87081 6.74997C10.118 7.11998 10.25 7.55499 10.25 8C10.25 8.59674 10.0129 9.16903 9.59099 9.59099C9.16903 10.0129 8.59674 10.25 8 10.25ZM13.625 14.75C13.4025 14.75 13.185 14.684 13 14.5604C12.815 14.4368 12.6708 14.2611 12.5856 14.0555C12.5005 13.85 12.4782 13.6238 12.5216 13.4055C12.565 13.1873 12.6722 12.9868 12.8295 12.8295C12.9868 12.6722 13.1873 12.565 13.4055 12.5216C13.6238 12.4782 13.85 12.5005 14.0555 12.5856C14.2611 12.6708 14.4368 12.815 14.5604 13C14.684 13.185 14.75 13.4025 14.75 13.625C14.75 13.9234 14.6315 14.2095 14.4205 14.4205C14.2095 14.6315 13.9234 14.75 13.625 14.75Z" />
  </svg>
);

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

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