import { styled } from 'styleh-components'
import { Link } from 'atoms/Link'
import { Label } from 'atoms/Text'

const StyledLink = styled.withComponent(Link) `
  text-transform: capitalize;
  text-decoration: none;
  color: #159fd5;
  cursor: pointer;
`

const DetailsValue = styled.withComponent(Label) `
  text-transform: capitalize;
  color: #2c2c2c;
  font-weight: 700;
`

const DetailsLabel = styled.withComponent(Label) `
  text-transform: capitalize;
  color: #2c2c2c;
  margin-right: rem(6);
`

const DetailsRow = styled.div `
  display: flex;
  flex-direction: row;
  margin-bottom: rem(6);
`

export { StyledLink, DetailsRow, DetailsLabel, DetailsValue }