import { styled } from 'view-container'

/**
 * @description IMPORTANT: to do style of the children of the component then
 * we need to import the styled components from index
 */
import { Button, ButtonLabel, ButtonIcon } from 'atoms/Button'

const StyledLinkButton = styled.withComponent(Button)`
  background-color: transparent;
  border-color: transparent;
  width: 150px;
  color: blue;
  &:hover {
    text-decoration: underline;
  }

  // styling the label
  ${ButtonLabel} {
    color: blue;
    text-transform: capitalize;
  }

`

export { StyledLinkButton }