import { Alert, alertClassnames } from '../Alert';
import { Button } from '../Button';
import { svgIconClassnames } from '../SvgIcon';
import { styled } from '../styled';
import { dashboardAlertClassnames } from './constants';
export const StyledAlert = styled(Alert) `
  &.${alertClassnames.root}.${dashboardAlertClassnames.root}.${dashboardAlertClassnames.root} {
    grid-template-columns: 24px 1fr 32px;

    margin-bottom: ${({ theme }) => theme.spacing(4)};
    padding: ${({ theme }) => theme.spacing(3, 4)};


    .${alertClassnames.contentWrapper} {
      grid-template-columns: 24px 1fr 32px;
      grid-template-rows: minmax(32px, auto);
      align-items: center;

      ${({ theme }) => theme.breakpoints.down('sm')} {
        align-items: flex-start;
      }
    }

    .${alertClassnames.iconWrapper} {
      height: 24px;
      padding: 0;

      & .${svgIconClassnames.root} {
        font-size: 24px;
      }
    }

    .${alertClassnames.content} {
      padding: 0;
    }

    ${({ theme }) => theme.breakpoints.down('sm')} {
      margin: ${({ theme }) => theme.spacing(3, 4, 1)};
    }
  }
`;
export const StyledButton = styled(Button) `
  height: 20px;
  padding-left: 0;

  font-weight: ${({ theme }) => theme.typography.body1.fontWeight};
  line-height: ${({ theme }) => theme.typography.body1.lineHeight};
  vertical-align: baseline;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    height: 20px;
  }
`;
