import { styled } from '../../styled';
const getBorderColor = (theme, isLoading, isError) => {
    if (isLoading) {
        return 'transparent';
    }
    if (isError) {
        return theme.palette.error[400];
    }
    return theme.palette.components.border.default;
};
export const Wrapper = styled('div', {
    shouldForwardProp: (prop) => !['$isLoading', '$isError'].includes(prop),
}) `
  display: grid;
  grid-template-columns: ${({ $isLoading }) => $isLoading ? '1fr 32px' : '1fr 96px'};
  gap: ${({ theme }) => theme.spacing(2)};
  align-items: center;

  min-height: 56px;
  padding: ${({ theme }) => theme.spacing(2, 4)};

  border: ${({ theme, $isLoading, $isError }) => `1px solid ${getBorderColor(theme, $isLoading, $isError)}`};
  border-radius: ${({ theme }) => theme.shape.medium};

  &:not(:last-of-type) {
    margin-bottom: ${({ theme }) => theme.spacing(2)};
  }
`;
export const Content = styled.div `
  overflow: hidden;
`;
