import { styled } from 'styleh-components'
import { Button } from 'atoms/Button'
import { SeparatorIcon } from 'atoms/Icons/SeparatorIcon'

const ListWrapper = styled.ul`
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
`
const ItemList = styled.li`
  list-style: none;
  margin-right: rem(10);
  cursor: pointer;
`
const ListItem = styled.li`
  display: inline-flex;
  margin-right: rem(10);
`
const StyledButton = styled.withComponent(Button)``

const NavSeparatorIcon = styled.withComponent(SeparatorIcon)`
  margin: 0 8px;
  &:last-child {
    display: none;
  }
`

export { ListWrapper, ItemList, ListItem, StyledButton, NavSeparatorIcon }