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="M14.685 5.92C14.5508 5.48498 14.3732 5.06454 14.155 4.665C13.8323 4.07201 13.4265 3.52818 12.95 3.05C11.971 2.07111 10.7237 1.40449 9.36586 1.13445C8.00801 0.864415 6.60058 1.00308 5.32154 1.53291C4.0425 2.06275 2.94929 2.95996 2.18015 4.11109C1.41101 5.26221 1.00049 6.61556 1.00049 8C1.00049 9.38444 1.41101 10.7378 2.18015 11.8889C2.94929 13.04 4.0425 13.9373 5.32154 14.4671C6.60058 14.9969 8.00801 15.1356 9.36586 14.8656C10.7237 14.5955 11.971 13.9289 12.95 12.95C13.4265 12.4718 13.8323 11.928 14.155 11.335C14.3732 10.9355 14.5508 10.515 14.685 10.08C15.1065 8.72538 15.1065 7.27463 14.685 5.92ZM1.99998 8C1.99998 6.4087 2.63212 4.88258 3.75734 3.75736C4.88256 2.63214 6.40868 2 7.99998 2V14C6.40868 14 4.88256 13.3679 3.75734 12.2426C2.63212 11.1174 1.99998 9.5913 1.99998 8Z" />
  </svg>
);

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

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