import { CircleErrorFillSm } from '../../icons/CircleErrorFillSm';
import { DotOutlineSm } from '../../icons/DotOutlineSm';
import { SuccessFillSm } from '../../icons/SuccessFillSm';
import { Loader } from '../Loader';
import { keyframes, styled } from '../styled';
import { listContainer } from '../styled/mixins';
import { complianceStatusClassnames } from './constants';
const iconAppearAnimation = keyframes `
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
`;
export const Wrapper = styled.article `
  display: grid;
  grid-gap: ${({ theme }) => theme.spacing(2)};

  background-color: inherit;
  border-radius: ${({ theme }) => theme.shape.medium};

  &.${complianceStatusClassnames.contained} {
    padding: ${({ theme }) => theme.spacing(3)};

    &.${complianceStatusClassnames.primary} {
      background-color: ${({ theme }) => theme.palette.primary[100]};
    }

    &.${complianceStatusClassnames.grey} {
      background-color: ${({ theme }) => theme.palette.grey[100]};
    }
  }

  &.${complianceStatusClassnames.outlined} {
    padding: ${({ theme }) => theme.spacing(3)};

    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
  }
`;
export const Inner = styled('ul') `
  display: grid;
  grid-gap: ${({ theme }) => theme.spacing(2)};

  ${listContainer};
`;
export const Item = styled('li') `
  display: grid;
  grid-gap: ${({ theme }) => theme.spacing(2)};
  grid-template-columns: auto 1fr;
`;
const DefaultIcon = styled.div `
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin-top: ${({ theme }) => theme.microSpacing(1)};
`;
export const EmptyIcon = styled(DefaultIcon) `
  color: ${({ theme }) => theme.palette.grey[800]};
`.withComponent(DotOutlineSm);
export const RejectIcon = styled(DefaultIcon) `
  color: ${({ theme }) => theme.palette.error[800]};

  animation: ${iconAppearAnimation} ${({ theme }) => theme.transitions.duration.short}ms ease-out;
`.withComponent(CircleErrorFillSm);
export const SuccessIcon = styled(DefaultIcon) `
  color: ${({ theme }) => theme.palette.success[800]};

  animation: ${iconAppearAnimation} ${({ theme }) => theme.transitions.duration.short}ms ease-out;
`.withComponent(SuccessFillSm);
export const StyledLoader = styled(Loader) `
  align-self: center;

  width: 12px;
  height: 12px;
  margin-right: ${({ theme }) => theme.microSpacing(1)};
  margin-left: ${({ theme }) => theme.microSpacing(1)};
`;
