import { styled } from '../styled';
const getColor = (theme, color) => {
    if (color === 'inherit') {
        return 'inherit';
    }
    if (color === 'primary') {
        return theme.palette.primary[800];
    }
    if (color === 'secondary') {
        return theme.palette.secondary[800];
    }
    if (color === 'success') {
        return theme.palette.success[800];
    }
    if (color === 'warning') {
        return theme.palette.warning[800];
    }
    if (color === 'error') {
        return theme.palette.error[800];
    }
    if (color === 'disabled') {
        return theme.palette.grey[500];
    }
    return color || 'inherit';
};
export const StyledSvg = styled.svg `
  user-select: none;

  display: inline-block;
  flex-shrink: 0;

  font-size: ${({ theme }) => {
    // По умолчанию как в MUI
    return theme.typography.pxToRem(24);
}};
  color: ${({ theme, color }) => getColor(theme, color)};
  
  fill: currentColor; 
  
  transition: ${({ theme }) => theme.transitions.create(['fill'], {
    duration: theme.transitions.duration.shorter,
})};
`;
