import { StepDefaultFillMd } from '../../../icons/StepDefaultFillMd';
import { StepErrorFillMd } from '../../../icons/StepErrorFillMd';
import { StepSuccessFillMd } from '../../../icons/StepSuccessFillMd';
import { css, styled } from '../../styled';
const iconsSize = (theme) => css `
  width: 20px;
  height: 20px;

  ${theme.breakpoints.down('sm')} {
    width: 24px;
    height: 24px;
  }
`;
export const ErrorIcon = styled(StepErrorFillMd) `
  ${({ theme }) => iconsSize(theme)};
  color: ${({ theme }) => theme.palette.error[800]};
`;
export const SuccessIcon = styled(StepSuccessFillMd) `
  ${({ theme }) => iconsSize(theme)};
  color: ${({ theme }) => theme.palette.success[800]};
`;
export const SelectIcon = styled(StepDefaultFillMd) `
  ${({ theme }) => iconsSize(theme)};
  color: ${({ theme, $isError }) => $isError ? theme.palette.error.dark : theme.palette.success[800]};
`;
export const DefaultIcon = styled(StepDefaultFillMd) `
  ${({ theme }) => iconsSize(theme)};
  color: ${({ theme }) => theme.palette.grey[400]};
`;
export const ActiveIcon = styled(StepDefaultFillMd) `
  ${({ theme }) => iconsSize(theme)};
  color: ${({ theme }) => theme.palette.primary[800]};
`;
