import { styled } from 'view-container'
import { SeparatorIcon } from 'atoms/Icons/SeparatorIcon'
import List, { ItemPanel } from 'molecules/List'

const NavMenuList = styled.withComponent(List) `
  display: flex;
  flex-direction: row;

  ${ItemPanel} {
    margin-left: 15px;
    display: flex;
    align-items: center;
  }

  ${ItemPanel}:last-child {
    margin-right: 0px;
  }

`

const NavSeparatorIcon = styled.withComponent(SeparatorIcon) `
  margin-left: 15px;
`

export { NavMenuList, NavSeparatorIcon }