import { styled } from 'styleh-components'
import { Label, Heading } from '@skava/ui/dist/components/atoms/Text'

const CreditLabel = styled.withComponent(Label).attrs({
  'data-qa': 'qa-available-credit',
}) `
  font-size: rem(18);
  color: var(--color-black);
  font-weight: 400;
  @phone-or-smaller() {
    font-size: 1rem;
  }
`
const Price = styled.withComponent(Label).attrs({
  'data-qa': 'qa-credit-value',
}) `
  margin-left: 0.25rem;
  font-weight: 500;
  font-size: rem(18);
  color: var(--color-dark-green);
  margin-right: 1rem;
  @phone-or-smaller() {
    font-weight: 700;
    font-size: 1rem;
    margin-right: unset;
  }
`
const DashboardTitle = styled.withComponent(Heading) `
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--color-black);
  margin: 0;
  margin-left: 1rem;
  @phone-or-smaller() {
    font-size: 1.25rem;
    margin-left: unset;
  }
`

export { CreditLabel, Price, DashboardTitle }