import { styled } from 'styleh-components'
import { ButtonText } from '@skava/ui/dist/components/atoms/Button'
import { StyledLabel } from '@skava/ui/dist/inputs/TextBox'
import { PrimaryButton } from 'presets/Buttons'

const StyledPrimaryButton = styled(PrimaryButton) `
  background-color: #1a75bc;
  text-transform: capitalize;
  color: var(--color-pure-white);
  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: var(--color-black);
      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);
    ${ButtonText} {
      text-transform: capitalize;
      color: var(--color-blue);
      margin: 0;
      font-size: rem(14);
    }
  }
  input.input-box {
    width: 100%;
    height: rem(44);
    border-radius: rem(4);
  }
`

export { StyledPrimaryButton, Wrapper }