import { styled } from 'styleh-components'
import Button, { ButtonIcon, ButtonText } from '@skava/ui/dist/components/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: var(--color-white-grey);
  border: 0px solid var(--color-pure-white);
  position: relative;

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

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

export { NavListStyledButton, NavListButtonWrapper, NavListButtonPanel }