import { styled } from 'styleh-components'
import { TextPlaceholder, RectanglePlaceholder } from 'atoms/Placeholder'

const StyledHeading = styled.withComponent(TextPlaceholder) `
  margin-bottom: rem(8);
`

const FormListWrapper = styled.div `
  display: flex;
  flex-direction: column;
`

const StyledButton = styled.withComponent(RectanglePlaceholder) `
  width: rem(268);
  height: rem(44);
  margin-top: rem(8);

  @tablet-or-smaller() {
    width: rem(210);
  }

  @phone-or-smaller() {
    margin-top: rem(8);
    width: 100%;
  }
`

const Wrapper = styled.section `
  display: flex;
  flex-direction: column;
`

export { StyledHeading, FormListWrapper, StyledButton, Wrapper }