import { styled } from 'styleh-components'
import { StyledHeading } from '../styled'

const Heading = styled.withComponent(StyledHeading).attrs({
  'data-qa': 'qa-email-preferences-heading',
})`
  margin: 0 0 rem(16) 0;
`

const FormWrapper = styled.section.attrs({
  'data-qa': 'qa-email-preferences-container',
})`
  .email-preference-option {
    margin-bottom: rem(32);
    user-select: none;
    font-weight: 500;
    @tablet-or-smaller() {
      margin-bottom: rem(24);
    }
    @phone-or-smaller() {
      margin-bottom: rem(30);
      &.all-email-option {
        margin-bottom: rem(18);
      }
    }
    span {
      margin-right: rem(16);
      svg {
        width: rem(24);
        height: rem(24);
        border-radius: rem(2);
      }
    }
    label {
      color: var(--color-black);
      &:first-letter {
        text-transform: capitalize;
      }
    }
  }
`

export { Heading, FormWrapper }