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

const StyledResetPasswordForm = styled.section `
  width: 100%;

  .form-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    .button-group {
      flex: 1;
      margin-top: rem(24);
    }
  }

  ${StyledLabel} {
    position: relative;
    top: 0;
    text-transform: capitalize;
    color: var(--color-black);
    font-weight: 400;
    font-family: Roboto;
    font-size: rem(16);
    color: var(--color-black);
  }

  .placeholder-label {
    position: absolute;
    color: var(--color-red);
  }

  .input-box-wrapper {
    flex: 0 0 100%;
    margin-bottom: rem(16);
    user-select: none;

    &.left-align {
      flex: 0 0 calc(50% - 8px);
    }

    &.right-align {
      flex: 0 0 calc(50% - 8px);
    }
  }

  input.input-box {
    width: 100%;
    margin: 0.5rem 0 0 0;
    font-size: rem(20);
    border-radius: rem(4);
    height: rem(44);
  }
`

const StyledPrimaryButton = styled(PrimaryButton) `
  color: var(--color-pure-white);
  font-family: Roboto;
  font-weight: 500;
  font-size: rem(18);
  text-transform: capitalize;
  background-color: var(--color-blue);
  user-select: none;
`

const StyledSecondaryButton = styled(SecondaryButton) `
  color: var(--color-pure-white);
  font-family: Roboto;
  font-weight: 500;
  font-size: rem(18);
  text-transform: capitalize;
  margin-top: 1rem;
  background-color: var(--color-dark-grey);
  user-select: none;
`

export { StyledResetPasswordForm, StyledPrimaryButton, StyledSecondaryButton }