"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledLoader = exports.SuccessIcon = exports.RejectIcon = exports.EmptyIcon = exports.Item = exports.Inner = exports.Wrapper = void 0;
const CircleErrorFillSm_1 = require("../../icons/CircleErrorFillSm");
const DotOutlineSm_1 = require("../../icons/DotOutlineSm");
const SuccessFillSm_1 = require("../../icons/SuccessFillSm");
const Loader_1 = require("../Loader");
const styled_1 = require("../styled");
const mixins_1 = require("../styled/mixins");
const constants_1 = require("./constants");
const iconAppearAnimation = (0, styled_1.keyframes) `
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
`;
exports.Wrapper = styled_1.styled.article `
  display: grid;
  grid-gap: ${({ theme }) => theme.spacing(2)};

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

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

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

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

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

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

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

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

  animation: ${iconAppearAnimation} ${({ theme }) => theme.transitions.duration.short}ms ease-out;
`.withComponent(SuccessFillSm_1.SuccessFillSm);
exports.StyledLoader = (0, styled_1.styled)(Loader_1.Loader) `
  align-self: center;

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