import { styled } from 'styleh-components'
import { ButtonLabel } from 'atoms/Button'
import { StyledLabel } from 'src/inputs/TextBox'
import { PrimaryButton } from 'presets/Buttons'
import { ErrorComponent } from 'atoms/Error'

const StyledPrimaryButton = styled.withComponent(PrimaryButton) `
  background-color: #1a75bc;
  text-transform: capitalize;
  color: #ffffff;
  font-size: rem(18);
  margin-bottom: rem(24);
`
const Wrapper = styled.div `
  margin-top: rem(32);
  .input-form-wrapper {
    margin-bottom: rem(32);

    ${StyledLabel} {
      position: relative;
      top: 0;
      text-transform: capitalize;
      color: #2c2c2c;
      font-size: rem(16);
      display: flex;
      margin-bottom: rem(8);
    }
    &.signin-password-wrapper {
      .input-show-password-icon {
        display: flex;
        align-items: center;
      }
    }
  }
  .signin-forgot-password {
    background: none;
    border: 0;
    padding: 0;
    padding-bottom: rem(20);
    ${ButtonLabel} {
      text-transform: capitalize;
      color: #159fd5;
      margin: 0;
      font-size: rem(14);
    }
  }
  input.input-box {
    width: 100%;
    height: rem(44);
    border-radius: rem(4);
  }
  .input-error-message {
    position: relative;
    margin-top: 0;
    ${ErrorComponent} {
      margin-top: rem(4);
      color: red;
      font-size: rem(14);
      font-weight: 400;
      position: absolute;
      top: 0;
    }
  }
`

export { StyledPrimaryButton, Wrapper }