import { styled } from 'styleh-components'
import { StyledLabel, StyledInput } from '@skava/ui/dist/inputs/TextBox'
import { StyledHeading } from '../styled'

const Heading = styled(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: 500;
        color: var(--color-black);
      }
      ${StyledInput} {
        font-size: rem(16);
        margin: rem(4) 0 rem(40);
        &::placeholder {
          font-style: italic;
          color: var(--color-dark-grey);
        }
      }
    }
  }
`

export { Heading, ChangePasswordWrapper }