import { styled } from 'styleh-components'
import { List, ItemPanel } from 'molecules/List'

const ListSeparatorWrapper = styled.withComponent(List)`

  ${ItemPanel} {
    display: flex;
    align-items: center;
    margin: 0;

    :after{
      content: '';
      width: 2px;
      height: 25px;
      display: inline-block;
      background-color: ${props => props.separatorColor};
      margin: 0 10px;
    }

    &:last-child:after {
      display: none;
    }
  }
`

export { ListSeparatorWrapper }