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

const UserLabel = styled(H2) `
  font-size: rem(20);
  color: var(--color-black);
  text-transform: capitalize;
  margin: 0;

  @tablet-or-smaller() {
    margin-bottom: rem(8);
  }
`

const HeaderWrapper = styled.div `
  position: relative;
  width: 100%;
  background: var(--color-pure-white);
  margin-bottom: rem(8);
  padding: rem(16);
  @phone-or-smaller() {
    padding: rem(16) rem(8);
  }
`

const Wrapper = styled.section ``

export { UserLabel, HeaderWrapper, Wrapper }