import { styled } from 'styleh-components'
import { List, ItemPanel } from '@skava/ui/dist/components/molecules/List'

const ListSeparatorWrapper = styled(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 }