import React from 'react';

export const checkboxCheckedIcon = (
  <svg width='100%' height='100%'>
    <rect fill='#3397FF' stroke='none' x='0' y='0' width='12' height='12' />
    <line x1='3.5' y1='6.5' x2='5' y2='8' stroke='#fefefe' strokeLinecap='square' strokeWidth='1.7' />
    <line x1='5' y1='8' x2='9' y2='4' stroke='#fefefe' strokeLinecap='square' strokeWidth='1.7' />
  </svg>
);

export const checkboxCheckedDisabledIcon = (
  <svg width='100%' height='100%'>
    <rect fill='#D9D9D9' stroke='none' x='0' y='0' width='12' height='12' />
    <line x1='3.5' y1='6.5' x2='5' y2='8' stroke='#fefefe' strokeLinecap='square' strokeWidth='1.7' />
    <line x1='5' y1='8' x2='9' y2='4' stroke='#fefefe' strokeLinecap='square' strokeWidth='1.7' />
  </svg>
);

export const checkboxIndeterminateIcon = (
  <svg width='100%' height='100%'>
    <rect fill='#3397FF' stroke='none' x='0' y='0' width='12' height='12' />
    <line x1='3' y1='6' x2='9' y2='6' stroke='#fefefe' strokeLinecap='square' strokeWidth='1.7' />
  </svg>
);

export const checkboxIcon = (
  <svg className='checkboxIcon' width='100%' height='100%'>
    <style>
      {
        '.checkboxIcon:hover rect { stroke: #333; } '
      }
    </style>
    <rect fill='none' stroke='#707070' x='0' y='0' width='12' height='12' />
  </svg>
);

export const searchIcon = (<svg width='100%' height='100%' className='searchIcon'>
  <style>
    {
      '.searchIcon:hover .group { stroke: #333; } '
    }
  </style>
  <g stroke='#707070' className='group' transform='translate(8, 8)' width='13px' height='13px'>
    <line x1='8' y1='8' x2='11.8' y2='11.8' />
    <ellipse cx='5' cy='5' rx='4.5' ry='4.5' fill='none' />
  </g>
</svg>);

export const clearIcon = (<svg className='clearIcon' width='100%' height='100%'>
  <style>
    {
      '.clearIcon:hover ellipse { fill: #707070; } ' +
      '.clearIcon:hover line { stroke: #fff; } '
    }
  </style>
  <g transform='translate(-7, -7)' stroke='#707070'>
    <svg x='50%' y='50%'>
      <ellipse cx='7' cy='7' rx='7' ry='7' fill='none' stroke='none' />
      <line x1='4' y1='4' x2='10' y2='10' stroke='#707070' />
      <line x1='4' y1='10' x2='10' y2='4' stroke='#707070' />
    </svg>
  </g>
</svg>);
