import { styled } from 'styleh-components'
import Button, { ButtonIcon, ButtonLabel } from 'atoms/Button'

const NavListButtonWrapper = styled.ul`
  list-style: none;
  padding: 0;
  margin: 0;
`
const NavListButtonPanel = styled.li``

const NavListStyledButton = styled.withComponent(Button)`
  width: 100%;
  justify-content: left;
  background-color: #F5F5F5;
  border: 0px solid #fff;
  position: relative;

  ${ButtonIcon} {
    position: absolute;
    right: 20px;
    margin: 0;
  }

  ${ButtonLabel} {
    text-transform: capitalize;
  }
`

export { NavListStyledButton, NavListButtonWrapper, NavListButtonPanel }