import { styled } from 'styleh-components'

const HeadingSection = styled.div `
  @phone-or-smaller() {
    margin-bottom: 0.5rem;
    margin-left: 0.5rem;
  }
`
const StyledAvailableCredit = styled.div `
  display: flex;
  @phone-or-smaller() {
    margin-left: 0.5rem;
  }
`

const Wrapper = styled.header `
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: rem(65);
  margin: 0.5rem 0rem 0rem 0rem;
  background: var(--color-pure-white);
  @phone-or-smaller() {
    flex-direction: column;
    align-items: flex-start;
    height: rem(94);
    margin: 0rem 0rem 0.5rem 0rem;
    justify-content: center;
  }
`

export { HeadingSection, StyledAvailableCredit, Wrapper }