'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var index = require('../../../../utils/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const ListItemPrefixWrapper = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['type', 'variant']),
}) `
  display: flex;
  height: 100%;
  padding-inline: ${index.getSpacing('s02')};
  align-items: ${({ variant }) => variant === 'multi-line' ? 'flex-start' : 'center'};

  justify-content: center;

  div {
    margin: 0;
  }

  & > svg,
  & > div > svg {
    ${({ type }) => type === 'illustration' ? index.getFontSize('size24') : index.getFontSize('size14')};
  }

  img {
    object-fit: cover;
    height: ${index.getSpacing('s07')};
    width: ${index.getSpacing('s07')};
    border-radius: ${(props) => props.type === 'avatar'
    ? props.theme.radius.roundedE
    : props.theme.radius.roundedB};
  }
`;
const ImagePlaceholder = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['type']),
}) `
  height: ${index.getSpacing('s07')};
  width: ${index.getSpacing('s07')};
  border-radius: ${(props) => props.type === 'avatar'
    ? props.theme.radius.roundedE
    : props.theme.radius.roundedB};
  background-color: ${index.getColorAlias('contentSubdued')};
`;

exports.ImagePlaceholder = ImagePlaceholder;
exports.ListItemPrefixWrapper = ListItemPrefixWrapper;
