import { styled } from 'styleh-components'
import { StyledLabel, StyledInput } from 'src/inputs/TextBox'
import { ErrorComponentWrapper } from 'atoms/Error'
import { StyledHeading } from '../styled'

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

const ChangePasswordWrapper = styled.div.attrs({
  'data-qa': 'qa-change-password-container',
}) `
  .form-wrapper {
    .input-box-wrapper {
      margin: 0;
      width: rem(430);
      @tablet-or-smaller() {
        width: 100%;
      }
      &.confirm-password-wrapper {
        margin-bottom: rem(8);
      }
      ${StyledLabel} {
        font-size: rem(16);
        text-transform: capitalize;
        font-weight: 400;
        color: #2c2c2c;
      }
      ${StyledInput} {
        font-size: rem(16);
        margin: rem(4) 0 rem(16);
        &::placeholder {
          font-style: italic;
          color: #5f6c88;
        }
      }
      ${ErrorComponentWrapper} {
        color: red;
        font-size: rem(14);
        font-weight: 400;
        position: absolute;
        top: 38px;
      }
    }
  }
`

export { Heading, ChangePasswordWrapper }