'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 DefaultListItemWrapper = styled__default['default'].li.withConfig({
    shouldForwardProp: index.convertToTransientProps([
        'prefixWidth',
        'dividerStartsFromText',
        'divider',
    ]),
}) `
  cursor: ${(props) => props.disabled ? 'not-allowed' : props.onClick ? 'pointer' : 'default'};
  display: flex;
  position: relative;
  width: 100%;
  min-height: ${index.getSpacing('s08')};
  padding: ${index.getSpacing('s02')};
  background-color: ${index.getColorAlias('containerDefault')};
  color: ${(props) => props.state === 'unavailable' || props.disabled
    ? index.getColorAlias('contentDisabled')
    : index.getColorAlias('contentDefault')};
  list-style-type: none;

  span {
    color: ${(props) => props.disabled && index.getColorAlias('contentDisabled')};
  }

  ${(props) => props.state === 'default' &&
    styled.css `
      &:hover {
        background-color: ${index.getDarkenColor('hover01', 'containerDefault')};
      }
    `}
  svg {
    fill: ${(props) => props.state === 'unavailable' || props.disabled
    ? index.getColorAlias('contentDisabled')
    : index.getColorAlias('contentDefault')};
  }

  ${({ divider, theme, prefixWidth, dividerStartsFromText }) => divider &&
    styled.css `
      &::before {
        content: '';
        ${dividerStartsFromText
        ? styled.css `
              width: calc(100% - ${prefixWidth}px - ${index.getSpacing('s04')});
            `
        : styled.css `
              width: 100%;
            `};
        height: 1px;
        background-color: ${index.getColorAlias('borderDefault', theme)};
        position: absolute;
        right: 0;
        bottom: 0;
      }
    `}
`;
const CompactListItemWrapper = styled__default['default'](DefaultListItemWrapper) `
  min-height: ${index.getSpacing('s07')};
`;
const MultiLineListItemWrapper = styled__default['default'](DefaultListItemWrapper) `
  min-height: ${index.getSpacing('s09')};
`;
const ListItemFlexContainer = styled__default['default'].div `
  display: flex;
  flex-flow: row nowrap;
  align-items: ${({ variant }) => variant === 'multi-line' ? 'flex-start' : 'center'};
  flex: 1;
`;
styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['type']),
}) `
  height: 100%;
  padding-inline: ${index.getSpacing('s02')};
  display: flex;
  align-items: ${(props) => (props.type === 'action' ? 'baseline' : 'center')};
  justify-content: center;

  div {
    margin: 0;
  }

  svg {
    ${index.getFontSize('size20')};
    fill: ${index.getColorAlias('interactivePrimary')};
  }

  img {
    ${(props) => props.type === 'thumbnail'
    ? styled.css `
            height: ${index.getSpacing('s09')};
            width: ${index.getSpacing('s09')};
          `
    : styled.css `
            height: ${index.getSpacing('s07')};
            width: ${index.getSpacing('s07')};
          `}
    object-fit: cover;
    ${(props) => props.type === 'avatar' &&
    styled.css `
        clip-path: circle();
      `}
  }
`;
styled__default['default'].div `
  padding-inline: ${index.getSpacing('s02')};
  flex: 1 2 60%;
  flex-direction: column;
`;
const ListItemPrimaryText = styled__default['default'].p `
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
`;
const ListItemSecondaryText = styled__default['default'](ListItemPrimaryText) `
  ${index.getFontSize('size14')};
  color: ${index.getColorAlias('contentSubdued')};
  -webkit-line-clamp: 2;
`;
const sharedSuffixPositioning = styled.css `
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
`;
styled__default['default'](ListItemSecondaryText) `
  ${index.getFontSize('size14')};
  ${sharedSuffixPositioning}
  align-self: baseline;
`;
styled__default['default'].div `
  ${sharedSuffixPositioning}
  flex-basis: 25%;
  svg {
    ${index.getFontSize('size24')};
    fill: ${index.getColorAlias('interactivePrimary')};
  }
`;

exports.CompactListItemWrapper = CompactListItemWrapper;
exports.DefaultListItemWrapper = DefaultListItemWrapper;
exports.ListItemFlexContainer = ListItemFlexContainer;
exports.ListItemPrimaryText = ListItemPrimaryText;
exports.ListItemSecondaryText = ListItemSecondaryText;
exports.MultiLineListItemWrapper = MultiLineListItemWrapper;
