import MuiToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { styled } from '../styled';
export const StyledToggleButtonGroup = styled(MuiToggleButtonGroup, {
    shouldForwardProp: (prop) => !['$isError'].includes(prop),
}) `
  position: relative;
  
  /* Border для ToggleButtonGroup рисуется через ::after что бы не нарушать обводку кнопок внутри компонента и корректно отображать состояние ошибки */ 
  &::after {
    pointer-events: none;
    content: "";

    position: absolute;
    z-index: ${({ $isError }) => ($isError ? '1' : '0')};
    inset: 0;

    border: 1px solid ${({ $isError, theme }) => ($isError ? theme.palette.error[700] : 'transparent')};
    border-radius: ${({ theme }) => theme.shape.medium}
  }
`;
