import { styled } from 'view-container'

const ItemPanel = styled.li`
  margin-bottom: 10px;
`
const ListWrapper = styled.ul`
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: ${props =>
    props.isHorizontalView === true ? 'row' : 'column'};

  ${props =>
    props.isHorizontalView === true &&
    styled.css`
      ${ItemPanel} {
        margin-right: 10px;
      }
    `};
`

export { ListWrapper, ItemPanel }